Html form: Difference between revisions
Jump to navigation
Jump to search
(Created page with "<< Accessibility If the {{kbd | key=submit/reset}} buttons were replace with the {{kbd | key=a/div}} blocks. Before: <pre> <input type='text' name='text1'> <br /> <input...") |
No edit summary |
||
| Line 22: | Line 22: | ||
* press {{kbd | key=enter}} key to submit the form in any input box. | * press {{kbd | key=enter}} key to submit the form in any input box. | ||
used functions: | |||
* [http://jquery-howto.blogspot.tw/2013/08/jquery-form-reset.html jQuery Howto: jQuery Form Reset] | * [http://jquery-howto.blogspot.tw/2013/08/jquery-form-reset.html jQuery Howto: jQuery Form Reset] | ||
* [http://api.jquery.com/submit/ .submit() | jQuery API Documentation] | * [http://api.jquery.com/submit/ .submit() | jQuery API Documentation] | ||
* [http://api.jquery.com/keypress/ .keypress() | jQuery API Documentation] {{exclaim}} <span class="code" style="font-family: source-code-pro, Consolas, monospace !important; word-spacing: 0; padding: 0 3px; background-color: rgba( 0, 0, 0, .1 ); border-radius: 3px;">keypress</span> event works on div element but not a element. | * [http://api.jquery.com/keypress/ .keypress() | jQuery API Documentation] {{exclaim}} <span class="code" style="font-family: source-code-pro, Consolas, monospace !important; word-spacing: 0; padding: 0 3px; background-color: rgba( 0, 0, 0, .1 ); border-radius: 3px;">keypress</span> event works on div element but not a element. | ||
further reading: | |||
* [http://www.w3schools.com/tags/att_global_tabindex.asp HTML Global tabindex Attribute] | |||
* [http://htmldog.com/guides/html/advanced/forms/ Accessible Forms | HTML Dog] | |||
Revision as of 16:15, 13 October 2014
If the submit/reset buttons were replace with the a/div blocks.
Before:
<input type='text' name='text1'> <br /> <input type='reset' value='Reset' name='reset'> <input type="submit" value="Submit">
After:
<input type='text' name='text1' tabindex="1"> <br /> <div id="clear_my_form" tabindex="2"><a href="#">reset</a></div> <div id="submit_my_form" tabindex="3"><a href="#">submit</a></div>
takes the Accessibility issues into consideration:
- tabindex: Users are able to press tab key to jump to next form element.
- press space key or enter key to trigger the reset or submit the form.
- press enter key to submit the form in any input box.
used functions:
- jQuery Howto: jQuery Form Reset
- .submit() | jQuery API Documentation
- .keypress() | jQuery API Documentation
keypress event works on div element but not a element.
further reading: