Het type-attribuut op <input> verandert de UI, het toetsenbord op het scherm (mobiel) en ingebouwde validatie. Het juiste type gebruiken verbetert de bruikbaarheid en geeft gratis validatie.
html
Het type-attribuut op <input> verandert de UI, het toetsenbord op het scherm (mobiel) en ingebouwde validatie. Het juiste type gebruiken verbetert de bruikbaarheid en geeft gratis validatie.
Mobiele toetsenborden passen zich aan — type="email" toont de @-toets, type="tel" toont een nummerpad, type="number" toont cijfers. Dit alleen is al een groot gebruiksvriendelijk voordeel op telefoons.
Gratis validatie — type="email" verwerpt not-an-email bij indiening, min/max begrenzen getallen, type="url" controleert op een geldige URL — geen JavaScript nodig.
<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 -->
Het kiezen van het juiste invoertype geeft je gratis betere mobiele toetsenborden, native kiezers en ingebouwde validatie — wat de toegankelijkheid verbetert en de JavaScript die je anders zou schrijven vermindert.
Het is een kleine keuze met een buitengewoon UX-voordeel.