select, textarea & datalist
Not every answer fits in a one-line text box. <select> offers a menu of options, <textarea> accepts paragraphs of text, and <datalist> adds suggestions to an ordinary input. This lesson also covers <output>, <progress> and <meter>.
select and option
- Each
<option>has avaluethat's submitted, and visible text that's shown. Ifvalueis omitted, the text is submitted. selectedpre-selects an option; otherwise the first is selected.- A first option with an empty value works as a prompt — with
requiredon the select, the user must choose a real option.
Grouping options
Multiple selection and list boxes
multiple allows several choices, and size shows that many rows at once. Multi-select lists are awkward to use (many people don't know the Ctrl/Cmd trick), so a group of checkboxes is often friendlier for a handful of options.
When to use a select
| Number of options | Best control |
|---|---|
| 2–5, single choice | Radio buttons — all options visible at once |
| About 6–15 | <select> |
| Dozens or hundreds (countries, cities) | <select>, or a text input with a <datalist> so users can type to filter |
| Several choices allowed | Checkboxes |
Newer browsers also allow far more customised styling of <select> menus with the CSS appearance: base-select opt-in, while keeping the native accessibility.
textarea
<textarea> isn't a void element: its default content goes between the tags (not in a value attribute), and whitespace there is kept exactly — so don't indent it. rows and cols set the initial size; users can usually resize it, which CSS resize controls. Modern CSS can also make it grow automatically with its content using field-sizing: content.
datalist: suggestions for an input
The input's list attribute points to a <datalist>. As the user types, matching suggestions appear — but unlike a select, any value can still be typed. Datalists also work with type="range" (tick marks), color and date inputs in many browsers.
output, progress and meter
<output>displays the result of a calculation, and screen readers can announce changes.<progress>shows how far a task has got. Without avalue, it shows an "in progress" animation.<meter>shows a measurement within a known range — disk space, password strength, a rating.low,highandoptimumlet the browser colour it as good or bad.