Typed inputs in HTML

The input type decides the keyboard, the picker and the validation.

<input type="email" name="email" autocomplete="email" required>
<input type="url" name="site" placeholder="https://example.com">
<input type="number" name="target_wpm" min="20" max="200" step="5"
       value="80">
<input type="date" name="starts_on" min="2026-01-01">
<input type="color" name="accent" value="#7c5cff">
<input type="range" name="volume" min="0" max="100" value="70">

How it works

email and url validate their format for free.
number takes min, max and step.
date and time open the platform's own picker.

The run, in numbers

Lines: 7
Characters to type: 376
Tokens: 88
Three-star pace: 65 tpm

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

Type this snippet

Step 2 of 5 in Fields & labels, step 5 of 25 in Forms & inputs.

← Previous Next →