Html form

From LemonWiki共筆
Jump to navigation Jump to search

<< Accessibility

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:

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 Browser chrome.png .

Form submit[edit]

Disable the button to prevent multiple form submits e.g. javascript - Disable submit button on form submit - Stack Overflow