« Back to home

Reviewing all form controls

Form controls are elements that let users enter, select, submit or activate something. They’re often inside a <form> element, but they don’t have to be. Interactions may include:

• Adding data to a text field.
• Selecting an option from a dropdown.
• Checking or unchecking a radio or checkbox.
• Activating a button.
• Choosing a file to upload.
• Picking a date or time.
• Adjusting a slider (type="range").
• Choosing a colour.

Elements that are form controls:

• <button>
• all <input> types, except <input type="hidden">, which has no visible interface
• <textarea>
• <select>

Custom controls also count. A <div role="combobox"> isn’t a HTML form element, but users interact with it the same way, so it carries the same requirements for name, role, state and keyboard support.

These elements appear in forms but are not form controls:

• Display values only: <meter>, <progress>, <output>
• Structural or grouping: <form>, <fieldset>, <legend>
• Interaction comes from the parent control: <option>, <optgroup>, <datalist>
• Interaction is passed to another element: <label>

Clicking a <label> moves focus to its associated control and toggles checkboxes and radios, but the focus and the state belong to the control, not the label.

Here is a list of all form controls:

<button>

<button>Button</button>

<textarea>

<label for="textarea">Textarea</label>
<textarea id="textarea"></textarea>

<select>

<label for="select">Select</label>
<select id="select">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
</select>

<input type="button">

<input type="button" value="Button">

<input type="checkbox">

<input id="checkbox" type="checkbox">
<label for="checkbox">Checkbox</label>

<input type="color">

<label for="color">Pick a colour</label>
<input id="color" type="color">

<input type="date">

<label for="date">Date</label>
<input id="date" type="date">

<input type="datetime-local">

<label for="datetime-local">Datetime local</label>
<input id="datetime-local" type="datetime-local">

<input type="email">

<label for="email">Email</label>
<input id="email" type="email">

<input type="file">

<label for="file">Choose a file</label>
<input id="file" type="file">

<input type="image">

<input type="image" alt="Login" src="image.png">

<input type="month">

<label for="month">Month</label>
<input id="month" type="month">

<input type="number">

<label for="number">Number</label>
<input id="number" type="number">

<input type="password">

<label for="password">Password</label>
<input id="password" type="password">

<input type="radio">

<input id="radio" type="radio" name="radio-group">
<label for="radio">Radio button</label>

<input type="range">

<label for="range">Range</label>
<input id="range" type="range">

<input type="reset">

<input type="reset" value="reset">

<input type="search">

<label for="search">Search</label>
<input id="search" type="search">

<input type="submit">

<input type="submit" value="submit">

<input type="tel">

<label for="tel">Tel</label>
<input id="tel" type="tel">

<input type="text"> (default)

<label for="text">Text</label>
<input id="text" type="text">

<input type="time">

<label for="time">Time</label>
<input id="time" type="time">

<input type="url">

<label for="url">URL</label>
<input id="url" type="url">

<input type="week">

<label for="week">Week</label>
<input id="week" type="week">

<div role="combobox">

A minimal, real select-only combobox, not just a div with the role attached. Focus stays on the combobox itself, aria-activedescendant tracks which option is current, and the listbox opens and closes via click, keyboard, and Escape.

<label id="combobox-label">Choose a fruit</label>
<div
  role="combobox"
  tabindex="0"
  aria-haspopup="listbox"
  aria-expanded="false"
  aria-labelledby="combobox-label"
  aria-controls="combobox-listbox"
>Select a fruit</div>
<ul id="combobox-listbox" role="listbox" hidden>
  <li role="option">Apple</li>
  <li role="option">Banana</li>
  <li role="option">Cherry</li>
</ul>

« Back to home