The type attribute on <input> changes its UI, on-screen keyboard (mobile), and built-in validation. Using the right type improves usability and gives free validation.
html
The type attribute on <input> changes its UI, on-screen keyboard (mobile), and built-in validation. Using the right type improves usability and gives free validation.
Mobile keyboards adapt — type="email" shows the @ key, type="tel" shows a number pad, type="number" shows digits. This alone is a big usability win on phones.
Free validation — type="email" rejects not-an-email on submit, min/max bound numbers, type="url" checks for a valid URL — no JavaScript required.
<input type="radio" name="plan" value="free" /> Free
<input type="radio" name="plan" value="pro" /> Pro
<!-- same name = mutually exclusive; only one can be selected -->
Choosing the correct input type gives you better mobile keyboards, native pickers, and built-in validation for free — improving accessibility and reducing the JavaScript you'd otherwise write.
It's a small choice with an outsized UX payoff.