Forms are interactive elements used to capture user-provided information. Some of the information, provided by a user, may be crucial to the type of form being filled out. Meaning some of the form fields are required to be filled out by the user before one can continue or submit the form.
Required Form Fields
Required sections in forms must be clearly labeled with a symbol or character to inform users that a section is required. Commonly, an asterisk (*) symbol is used to indicate a required form field. Color can be used to show a required form field, as long as it is not the only way to convey the required form field. If color is used it must be combined with a symbol or text to identify a required form field. Instructions must also be provided to define the meaning of the symbols or text. (e.g. required form fields are marked by asterisk " * ")
- Always group associated forms: Use the <fieldset> and <legend> elements to group and associate related form controls.
- Provide form instructions to help users understand how to complete the form and individual form controls.
- Color can be used to indicate a required field but should not be the only indication of a required field.
- Required fields should be indicated with either a symbol or text, not just color.
- When providing an indicator for a required field, it should be placed right before the form field. This allows a screen reader to read the indicator to a screen reader user right before the user activates the field.
- Alert the user of any validation errors in an accessible manner. Provide an informative feedback message if an error occurs.
In this example an asterisk(*) is used to indicate that a form field is required to be filled out. There is also a statement that defines the asterisk(*).
An asterisk (*) indicates a required field
The input field below, unlike the first example, uses text to indicate that the form field is required to be filled out.
Your page should alert a user when they have failed to enter a required field on a form. For example, if a user tries to proceed to the next page but has left an input field empty. Then the user should not be able to proceed onto the next page and should be prompted with on error indicating what field requires attention. To test this you simply have to:
- Purposely enter a blank value into any field.
- Check to see that the page makes it clear that there is an error.
- Check if the page shows which field has the error.
- Check if the page displays an error message to guide users.
If the page works even though the user has entered a blank value, review and apply the best practices for required fields.