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’s 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.