Forms allow people to enter information into a site for processing and manipulation. This includes things like sending messages and placing orders.

Using JavaScript with forms

A good rule of thumb is that a form should work with JavaScript disabled. JavaScript can be used to enhance a form.

If your form really needs to depend on JavaScript, make sure to serve an alternative for users that have JavaScript disabled.

Toggling disabled attributes

Avoid toggling disabled attributes programmaticly. The problem is that this can cause elements from losing focus, confusing users navigating the application with a keyboard.

Label input fields

All inputs in a form are associated with a corresponding <label> element.

Use a for/id pairing to guarantee the highest level of browser/assistive technology support.

<label for="firstname">Input</label>
<input type="text" id="firstname" name="fname" />

Use labels to wrap input fields

Another approach is to nest input fields inside a label element. This will not require the for/id pairing.

<label>
  Firstname
  <input type="text" name="fname" />
</label>

fieldset and legend elements

Does your form contain multiple sections of related inputs? Use <fieldset> to group them, and <legend> to provide a label for what this section is for.

<fieldset>
  <legend>Choose your favorite monster</legend>
  <input type="radio" id="kraken" name="monster" value="K" />
  <label for="kraken">Kraken</label><br />

  <input type="radio" id="sasquatch" name="monster" value="S" />
  <label for="sasquatch">Sasquatch</label><br />

  <input type="radio" id="mothman" name="monster" value="M" />
  <label for="mothman">Mothman</label>
</fieldset>

Autocomplete

Inputs use autocomplete where appropriate. Providing a mechanism to help people more quickly, easily, and accurately fill in form fields that ask for common information (for example, name, address, phone number).

The HTML autocomplete attribute lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field.

<label for="firstName">First Name:</label>
<input name="firstName" id="firstName" type="text" autocomplete="given-name" />

<label for="lastName">Last Name:</label>
<input name="lastName" id="lastName" type="text" autocomplete="family-name" />

<label for="email">Email:</label>
<input name="email" id="email" type="email" autocomplete="off" />

Input errors

Make sure that form input errors are displayed in list above the form after submission.

This provides a way for assistive technology users to quickly have a high-level understanding of what issues are present in the form. This is especially important for larger forms with many inputs. Make sure that each reported error also has a link to the corresponding field with invalid input.

https://www.w3.org/WAI/WCAG22/Understanding/error-identification.html

Associate input error messaging with the input it corresponds to

Techniques such as using aria-describedby allow people who use assistive technology to more easily understand the difference between the input and the error message associated with it.

Make sure that error, warning, and success states are not visually communicated by just color

People who are color blind, who have other low vision conditions, or different cultural understandings for color may not see the state change, or understand what kind of feedback the state represents if color is the only indicator.