Label Guidance

Best Practices

• Labels are required for form controls.
• 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.

Usage

<div class="form-group">
  <label for="inputTextBox499">
      <span class="icon fas fa-asterisk text-danger me-1" aria-hidden="true"></span>
      Input Email Label
    </label>
  <input type="tel" class="form-control" id="inputTextBox499" placeholder="This is a placeholder, don’t use.">
  <small>On mobile browsers this presents an email-optimized UI.</small>
</div>

Resources

• The anatomy of Accessible Forms: The Problem with Placeholders