JezK
Edit File: 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/justinfrench/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>