What are form controls?

Published: 19 September 2026

The term "form controls" is used all the time in accessibility, but there is no single, clear definition of exactly what it includes. This article is my attempt to provide one.

A definition

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.

Elements that are not form controls

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.

A list of all form controls

The <button> element

<button>Button</button>

The <textarea> element

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

The <select> element

<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>

The <input type="button"> element

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

The <input type="checkbox"> element

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

The <input type="color"> element

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

The <input type="date"> element

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

The <input type="datetime-local"> element

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

The <input type="email"> element

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

The <input type="file"> element

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

The <input type="image"> element

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

The <input type="month"> element

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

The <input type="number"> element

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

The <input type="password"> element

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

The <input type="radio"> element

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

The <input type="range"> element

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

The <input type="reset"> element

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

The <input type="search"> element

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

The <input type="submit"> element

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

The <input type="tel"> element

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

The <input type="text"> (default) element

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

The <input type="time"> element

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

The <input type="url"> element

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

The <input type="week"> element

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

An example custome element: <div role="combobox">

This is just one example of a custom (non-native) form control.

<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>