Label Guidance

Labels give the user additonal control and context for form controls.

On this page:

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

On mobile browsers this presents an email-optimized UI. 
<div class="form-group">
  <label for="inputTextBox499">
      <span class="fas fa-asterisk text-danger mr-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

Previous page
Next page