Required Form Fields HTML
Indicating clearly required or optional fields on a form tells the user what needs to be filled in to complete the form. If most of the form fields are optional, use text or asterisk (*) next to each field to indicate required fields. If you choose asterisk, provide a legend which tells the meaning of it.
If most questions on a form require an answer, indicating all required fields would add unnecessary info to the form. In this case indicate the ones that are optional using an “Optional” text next to the optional field labels.
Another alternative would be to not indicate required fields but handle missing required input with error messages.
What problem does the pattern solve?
When to use it?
You’re designing a form that contains both required and optional form fields.
How to use it?
- First of all, keep the form simple. Avoid optional input fields in forms, don’t ask users to provide useless information.
- Show the required/optional indicators next to labels instead of input fields to make it easier to scan the form through and see what information needs to be given.
- Use text or asterisk (*) next to each field to indicate required fields.
- If you choose asterisk, provide a legend which tells the meaning of it.
- Consider bolding the required field label.
- Use text “(Optional)” after optional field labels to indicate optional fields.
Why to use it?
People need to know what needs to be filled in to complete the form, otherwise they will get an error if some of the required form fields are left blank.
Example images (5 examples)
Posterous uses text to indicate required fields
Here the word “required” is used after the help text below the form field.