Datalist suggestions in HTML

A free-text input with suggestions attached, unlike a select's closed list.

<label for="repo">Repository</label>
<input type="text" id="repo" name="repo" list="known-repos"
       placeholder="owner/name">
<datalist id="known-repos">
  <option value="python/cpython">
  <option value="rust-lang/rust">
  <option value="sqlite/sqlite">
</datalist>

How it works

1. list on the input points at the datalist id.
2. The user may still type a value that is not offered.
3. The options need no labels, only values.

The run, in numbers

Lines

8

Characters to type

257

Tokens

57

Three-star pace

70 tpm

At the three-star pace of 70 tokens a minute, this run takes about 49 seconds.

Type this snippet

Step 5 of 6 in Choices, step 13 of 25 in Forms & inputs.

← Previous Next →