Das type-Attribut auf <input> ändert seine Benutzeroberfläche, On-Screen-Tastatur (mobil) und integrierte Validierung. Die Verwendung des richtigen Typs verbessert die Benutzerfreundlichkeit und bietet kostenlose Validierung.
html
Das type-Attribut auf <input> ändert seine Benutzeroberfläche, On-Screen-Tastatur (mobil) und integrierte Validierung. Die Verwendung des richtigen Typs verbessert die Benutzerfreundlichkeit und bietet kostenlose Validierung.
Mobile Tastaturen passen sich an — type="email" zeigt die Taste @, type="tel" zeigt ein Nummernpad, type="number" zeigt Ziffern. Das allein ist auf Telefonen ein großer Gewinn für die Benutzerfreundlichkeit.
Kostenlose Validierung — type="email" lehnt not-an-email beim Absenden ab, min/max begrenzen Zahlen, type="url" prüft auf eine gültige URL — kein JavaScript erforderlich.
<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 -->
Die Wahl des richtigen Input-Typs gibt dir bessere Mobile-Tastaturen, native Picker und integrierte Validierung kostenlos – verbessert die Zugänglichkeit und reduziert das JavaScript, das du sonst schreiben müsstest.
Es ist eine kleine Wahl mit großem UX-Gewinn.