sample/basic_inputs.html
<!DOCTYPE html>
<html>
<head>
<meta content="noindex,nofollow" name="robots">
<meta charset="utf-8">
<title>Formtastic</title>
<link href="/formtastic.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]><link href="/formtastic_ie6.css" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if IE 7]><link href="/formtastic_ie7.css" rel="stylesheet" type="text/css" /><![endif]-->
<style>
body {
font-family: helvetica, arial;
font-size: 12px;
}
</style>
</head>
</html>
<body>
<h1>Formtastic</h1>
<form action="basic_inputs.html" class="formtastic gem" id="new_gem" method="get">
<fieldset class="inputs">
<ol>
<li class="input string stringish optional" id="gem_summary_input">
<label class="label" for="gem_summary">Summary</label>
<input id="gem_summary" name="gem[summary]" type="text" value="A Rails form builder plugin/gem with semantically rich and accessible markup" maxlength="255">
</li>
<li class="input text optional" id="gem_description_input">
<label class="label" for="gem_description">Description</label>
<textarea id="gem_description" rows="5">A Rails form builder plugin/gem with semantically rich and accessible markup</textarea>
</li>
<li class="input url stringish optional" id="gem_url_input">
<label class="label" for="gem_url">URL</label>
<input id="gem_url" name="gem[url]" type="url">
<p class="inline-hints">Example: https://github.com/formtastic/formtastic</p>
</li>
<li class="input password stringish required" id="gem_password_input">
<label class="label" for="gem_password">Password<abbr title="required">*</abbr></label>
<input id="gem_password" name="gem[password]" type="password">
<p class="inline-errors">can't be blank</p>
</li>
<li class="input password stringish required" id="gem_password_input">
<label class="label" for="gem_password_confirmation">Password confirmation<abbr title="required">*</abbr></label>
<input id="gem_password_confirmation" name="gem[password_confirmation]" type="password">
<p class="inline-errors">can't be blank</p>
</li>
<li class="input numeric stringish optional" id="gem_downloads_input">
<label class="label" for="gem_downloads">Downloads</label>
<input id="gem_downloads" name="gem[downloads]" type="numeric" value="209,354">
</li>
<li class="input file optional" id="gem_file_input">
<label class="label" for="gem_file">File</label>
<input id="gem_file" name="gem[file]" type="file" value="value">
</li>
<li class="input email stringish optional" id="gem_email_input">
<label class="label" for="gem_email">Email</label>
<input id="gem_email" name="gem[email]" type="email">
</li>
<li class="input phone stringish optional" id="gem_phone_input">
<label class="label" for="gem_phone">Phone</label>
<input id="gem_phone" name="gem[phone]" type="phone">
</li>
<li class="input search stringish optional" id="gem_search_input">
<label class="label" for="gem_search">Search</label>
<input id="gem_search" name="gem[search]" type="search">
</li>
<li class="input date optional">
<fieldset class="fragments">
<legend class="label"><label>First release</label></legend>
<ol class="fragments-group">
<li class="fragment">
<label>Year</label>
<select id="gem_first_release_1i" name="gem[first_release][1i]">
<option>2009</option>
</select>
</li>
<li class="fragment">
<label>Month</label>
<select id="gem_first_release_2i" name="gem[first_release][2i]">
<option>October</option>
</select>
</li>
<li class="fragment">
<label>Day</label>
<select id="gem_first_release_3i" name="gem[first_release][3i]">
<option>15</option>
</select>
</li>
</ol>
</fieldset>
</li>
<li class="input date_picker optional">
<label class="label" for="gem_expiry">Expiry date</label>
<input id="gem_expiry" name="gem[gem_expiry]" type="date" size="10" maxlength="10" min="2012-01-01" max="2012-12-31" step="1" value="2012-01-01">
</li>
<li class="input datetime_picker optional">
<label class="label" for="gem_expiry">Expiry datetime-local</label>
<input id="gem_expiry" name="gem[gem_expiry]" type="datetime-local" size="16" maxlength="16" min="2012-01-01T00:00" max="2012-12-31T23:59" step="1800">
</li>
<li class="input datetime_picker optional">
<label class="label" for="gem_expiry">Expiry datetime</label>
<input id="gem_expiry" name="gem[gem_expiry]" type="datetime" size="16" maxlength="16" min="2012-01-01T00:00" max="2012-12-31T23:59" step="1800">
</li>
<li class="input time_picker optional">
<label class="label" for="gem_expiry">Expiry time</label>
<input id="gem_expiry" name="gem[gem_expiry]" type="time" size="5" maxlength="5" min="T00:00" max="23:59" step="60">
</li>
<li class="input string stringish optional autofocus" id="gem_autofocus_input">
<label class="label" for="gem_autofocus">Autofocus</label>
<input id="gem_autofocus" name="gem[autofocus]" type="text" value="The focus is set to this field" autofocus="autofocus">
</li>
<li class="input boolean optional" id="gem_terms_and_conditions_input">
<label for="gem_terms_and_conditions">
<input id="gem_terms_and_conditions" name="gem[terms_and_conditions]" type="checkbox" value="1" checked="checked">
I agree to your draconian terms of service even though I didn't read them
</label>
</li>
<li class="input select optional" id="gem_awesomeness_input">
<label class="label" for="gem_awesomeness">Select</label>
<select id="gem_awesomeness" name="gem[awesomeness]">
<option value="5">First choice</option>
<option value="4">Second choice</option>
</select>
</li>
<li class="input radio optional">
<fieldset class="choices">
<legend class="label"><label>Rate</label></legend>
<ol class="choices-group">
<li class="choice">
<label><input id="gem_rate_five" name="gem[rate]" type="radio" checked="checked"> Five</label></label>
</li>
<li class="choice">
<label><input id="gem_rate_four" name="gem[rate]" type="radio"> Four</label></label>
</li>
<li class="choice">
<label><input id="gem_rate_three" name="gem[rate]" type="radio"> Three</label></label>
</li>
<li class="choice">
<label><input id="gem_rate_two" name="gem[rate]" type="radio"> Two</label></label>
</li>
<li class="choice">
<label><input id="gem_rate_one" name="gem[rate]" type="radio"> One</label></label>
</li>
</ol>
</fieldset>
</li>
<li class="input check_boxes optional">
<fieldset class="choices">
<legend class="label"><label>Browsers</label></legend>
<ol class="choices-group">
<li class="choice">
<label><input id="gem_browser_google_chrome" name="gem[browser][]" type="checkbox"> Google Chrome</label></label>
</li>
<li class="choice">
<label><input id="gem_browser_apple_safari" name="gem[browser][]" type="checkbox"> Apple Safari</label></label>
</li>
<li class="choice">
<label><input id="gem_browser_mozilla_firefox" name="gem[browser][]" type="checkbox"> Mozilla Firefox</label></label>
</li>
<li class="choice">
<label><input id="gem_browser_opera" name="gem[browser][]" type="checkbox"> Opera</label></label>
</li>
<li class="choice">
<label><input id="gem_browser_internet_explorer" name="gem[browser][]" type="checkbox"> Internet Explorer (Although you really can't call it a browser can you? This is some long text to force wrapping.)</label></label>
</li>
</ol>
</fieldset>
</li>
</ol>
</fieldset>
<fieldset class="buttons">
<ol>
<li class="button commit">
<input class="create" id="gem_submit" type="submit">
</li>
</ol>
</fieldset>
<fieldset class="actions">
<ol>
<li class="action input_action">
<input id="gem_submit" type="submit" value="Create Thing">
</li>
</ol>
</fieldset>
<fieldset class="actions">
<ol>
<li class="action button_action">
<button id="gem_submit" type="submit">Create Thing</button>
</li>
<li class="action button_action">
<button id="gem_submit" type="reset">Reset</button>
</li>
<li class="action link_action">
<a href="#">Cancel</a>
</li>
</ol>
</fieldset>
</form>
</body>
</html>