Form interactions

HTML documents can use forms to collect information from users. Interaction with form elements should not result in anything unexpected.


Recommendations

Only change the users location in a page on an explicit user action, such as when a submit button is activated, not when blur, change (particularly for select elements), or focus events are fired.

Include a submit button, either an <input>[type=submit image] or <button>[type=submit] element, within all <form> elements that submit user input (i.e. do not consist only of <input>[type=hidden] elements to store state).


Why it matters

Field validation errors or other responses to user interaction should not cause focus changes or other actions that may confuse or impede a user.

All forms should have a submit button to provide a clear call to action. This is particularly important to users with cognitive impairments and also benefits low vision users as an indication of the end of the form.

Examples

Recommended:

<form action="/search">
    <label for="q">Search term:</label>
    <input type="text" name="q" id="q">
    <input type="submit" value="Search">
</form>

Not recommended:

<form action="/search">
    <label for="q">Search term:</label>
    <input type="text" name="q" id="q">
</form>

Testing

Check that each <form> element or collection of form elements includes a submit button, by using a browser鈥檚 developer tools or viewing the source code.

Try out each visible form control and check that the page location does not move on change, on blur or on focus events.