Html form: Difference between revisions
Jump to navigation
Jump to search
mNo edit summary |
m (Text replacement - "Category:WebDesign" to "Category:Design") |
||
| (2 intermediate revisions by one other user not shown) | |||
| Line 1: | Line 1: | ||
<< [[Accessibility]] | << [[Accessibility]] | ||
== Tab index == | |||
If the <span class="code">submit/reset</span> buttons were replace with the <span class="code">div/a</span> blocks. | If the <span class="code">submit/reset</span> buttons were replace with the <span class="code">div/a</span> blocks. | ||
| Line 31: | Line 32: | ||
* [http://htmldog.com/guides/html/advanced/forms/ Accessible Forms | HTML Dog] | * [http://htmldog.com/guides/html/advanced/forms/ Accessible Forms | HTML Dog] | ||
== Accesskey == | |||
[http://www.w3schools.com/tags/att_global_accesskey.asp HTML Global accesskey Attribute]. Avoid to conflict with the browser keyboard shortcut e.g. [https://support.google.com/chrome/answer/157179?hl=en Chrome keyboard shortcuts]. | |||
* Press {{kbd | key=Alt}} +{{kbd | key= D}} will switch to Url address on {{Chrome}}. | |||
== Form submit == | |||
Disable the button to prevent multiple form submits e.g. [https://stackoverflow.com/questions/5691054/disable-submit-button-on-form-submit javascript - Disable submit button on form submit - Stack Overflow] | |||
[[Category: | [[Category:Design]] | ||
Latest revision as of 10:30, 16 May 2022
Tab index[edit]
If the submit/reset buttons were replace with the div/a 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:
Accesskey[edit]
HTML Global accesskey Attribute. Avoid to conflict with the browser keyboard shortcut e.g. Chrome keyboard shortcuts.
- Press Alt +D will switch to Url address on Chrome
.
Form submit[edit]
Disable the button to prevent multiple form submits e.g. javascript - Disable submit button on form submit - Stack Overflow