Required Form Fields
Also known as: Required vs. Optional Form Fields
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.
Required form fields are marked with asterisks next to the labels, and a text explains what the asterisk indicates.
What problem does the pattern solve?
You’re designing a form that contains both required and optional form fields.
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.
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.
- Consider bolding the required field label.
If most of the form fields are required:
- 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.
Useful links
- Marking Required vs. Optional form fields - LukeW.com
- Highlight Optional Form Fields Not Required Ones - UX Movement
- What's the best way to highlight a Required field on a web form before submission? - UX StackExchange
- Creating a Usable Contact Form - UX Booth
- 10 UI Design Patterns You Should Be Paying Attention To - Smashing Magazine
- Marking Required vs. Optional form fields - IxDA Discussions
- Lorem Ipsum
Code snippets
- No code snippets yet.
Example Images (4 examples)
Posterous uses text to indicate required fields
Source: http://posterous.com/Here the word “required” is used after the help text below the form field.
Creative Commons
Comments
Smart Company Software (www) Nov. 11, 2011 09:27
I've never been a big fan of using a * to indicate that the field is mandatory. There are some good alternatives here.
Leave a comment