Inputs

Best Practices

• Please read Label Guidance first.
• Refrain from using placeholder attributes in inputs because they causes usability problems.
• Use the Text Input when you can’t predict a user’s response or when another type of Input would make answering the prompt difficult.
• If users must choose from a predetermined set of choices, use Radio Buttons or Checkboxes.
• Use Textarea if the user needs to enter more than a single line of text.
• Clearly label all text input fields.
• Use the appropriate type of input for the data being gathered.
• Ensure the for and id attributes have matching values.

We currently show 8 of the 22 types of inputs.

Usage

Input Type: Text

• Accepts text, numbers, and other characters

<div class="form-group">
  <label for="inputTextBox199">Input Text Label</label>
  <input type="text" class="form-control" id="inputTextBox199">
  <small>This accepts any kind of alphanumeric characters.</small>
</div>

Input Type: Date Picker

• Accepts dates using the browser’s date picker.
• Displays a User Interface (UI) optimized for the entry of dates.

<div class="form-group">
  <label for="inputDate299">Input Date Label</label>
  <input type="date" class="form-control" id="inputDate299">
  <small>This tells the browser to present its own optimized date-entry user interface.</small>
</div>

Input Type: Known Date Entry

• Accepts dates using three text inputs for Month, Day, Year.
• Displays a User Interface (UI) optimized for the entry of dates.
• Be sure to include labels, especially if the fields are rearranged.

Enter Date as Month, Day, Year

<p class="label" id="date-multiple-guidance">Enter Date as Month, Day, Year</p>
<div class="form-row">
  <div class="col-4 col-md-3 col-lg-1">
    <div class="form-group">
      <label for="date-multiple-month">Month</label>
      <input type="text" class="form-control" id="date-multiple-month" name="date-multiple-month" aria-describedby="date-multiple-guidance" maxlength="2" pattern="[0-9]*" inputmode="numeric" value="">
    </div>
  </div>
  <div class="col-4 col-md-3 col-lg-1">
    <div class="form-group">
      <label for="date-multiple-day">Day</label>
      <input type="text" class="form-control" id="date-multiple-day" name="date-multiple-day" aria-describedby="date-multiple-guidance" maxlength="2" pattern="[0-9]*" inputmode="numeric" value="">
    </div>
  </div>
  <div class="col-4 col-md-3 col-lg-1">
    <div class="form-group">
      <label for="date-multiple-year">Year</label>
      <input type="text" class="form-control" id="date-multiple-year" name="date-multiple-year" aria-describedby="date-multiple-guidance" minlength="4" maxlength="4" pattern="[0-9]*" inputmode="numeric" value="">
    </div>
  </div>
</div>

Input Type: Tel

• Accepts telephone numbers
• Displays a UI optimized for a phone number

<div class="form-group">
  <label for="inputTelBox399">Input Tel Label</label>
  <input type="tel" class="form-control" id="inputTelBox399">
  <small>On mobile browsers this presents a phone number-optimized UI.</small>
</div>

Input Type: Email

• Accepts email addresses
• Displays a UI optimized for the email address entry

<div class="form-group">
  <label for="inputEmail499">Input Email Label</label>
  <input type="email" class="form-control" id="inputEmail499">
  <small>On mobile browsers this presents an email-optimized UI.</small>
</div>

Input Type: Search

• Accepts search terms
• Displays a UI optimized for search term entry

<div class="form-group">
  <label for="inputTextBox599">Input Search Label</label>
  <input type="search" class="form-control" id="inputTextBox599">
  <small>This presents a search-optimized UI.</small>
</div>

Input Type: URL

• Accepts web addresses
• Displays a UI optimized for the entry of web addresses

<div class="form-group">
  <label for="inputTextBox699">Input URL Label</label>
  <input type="url" class="form-control" id="inputTextBox699">
  <small>On mobile browsers this presents a URL-optimized UI.</small>
</div>

Input Type: Number

• Accepts numbers
• Displays a UI optimized for the entry of numbers

<div class="form-group">
  <label for="inputTextBox799">Input Number Label</label>
  <input type="number" class="form-control" id="inputTextBox799">
  <small>This presents a numeric-optimized UI.</small>
</div>

Input Type: File

• Accepts file uploads.
• Displays a UI optimized for uploading files.

<div class="form-group">
  <label for="customFile" aria-hidden="true">Select</label>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile">
    <label class="custom-file-label" for="customFile">Choose file</label>
  </div>
  <small>This presents a file-selection UI.</small>
</div>

Readonly

• Shows user information that is readonly.
• User can copy the information but not change it.

Note: This is not the same as a disabled field. A disabled field prevents user input. This displays system provided values.

<div class="form-group">
  <label for="read-only" class="label">Label</label>
  <input id="read-only" class="form-control" type="text" placeholder="Value" tabindex="-1" readonly>
</div>

Input-Aligned Plain Text

• Same as Readonly, but removes input styling.
• Will horizontally align with other, user-editable fields.

<div class="form-group">
  <label for="staticEmail" class="label">Label</label>
  <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="Value" tabindex="-1">
</div>

Input Detail View

• Use for detail views.
• Decreased vertical space between label and data to improve a detail page of data.
• Use on detail pages, not edit pages.

<div class="form-group">
  <p class="label">Label</p>
  <p>Value</p>
</div>

Resources

• W3Schools.com - 22 Types of Inputs
• Section 508 Guidelines
• Web Content Accessibility Guidelines (WCAG)
• Bootstrap Documentation - Forms