Label Guidance

Best Practices

Users don’t know the legislative or administrative structure so we should arrange the forms for their understanding.

• Don’t omit form labels.
• Labels are required for form controls.
• Put labels above the field so that the label appears higher up on the page than the field.
• Use a single column form if possible. This is the easiest form reading experience for users.
• Refrain from using the placeholder attribute.
• Verify that the appropriate input type is being used, such as using <input type=”tel”> for telephone numbers.
• Make for and id value match.
• Change any IDs for your project’s requirements.
• Don’t replace Labels with placeholders.
• Refrain from using placeholder attributes in inputs because they cause usability problems.
• Ensure the for and id attributes have matching values. Note the code below.
• Use a red asterisk () to denote required fields.

Resources

• The anatomy of Accessible Forms: The Problem with Placeholders