Html form

<< Accessibility

Tab index

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:

• HTML Global tabindex Attribute
• Accessible Forms | HTML Dog

Accesskey

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

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