Forms - Labeling Required Fields

Problem

The application implements a form that contains both required and optional form fields.

Solution

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 an asterisk (*) next to each field to indicate required fields. when using an asterisk, provide a legend which explains its meaning.

HTML code here
	

CSS code here
	

Why

Users 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.

Use When

The form includes both required and optional fields. If most questions on the form are required, indicating all required fields would add unnecessary information to the form. In this case, indicate the elements that are optional using "optional" text next to the appropriate field labels.

How

Keep the form as simple as possible. 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 through the form and determine 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 the text "optional" after the appropriate field labels to indicate these are optional fields.

Examples