Input-typer, radio og checkbox

Hvis du kun husker én ting: Vælg form-control efter opgaven, for ét valg er ikke det samme som flere valg.

Input-typer

type-attributten er vigtig, fordi den hjælper browseren med at forstå feltets formål.

Det giver bedre hjælp til brugeren:

• det rigtige tastatur på mobil
• bedre validering
• mere mening i koden

<input type="email" />
<input type="password" />
<input type="date" />

Hvis du bare bruger type="text" til alt, mister du noget af den hjælp browseren ellers kan give dig gratis.

Prøv at sætte forskellige type-attributter på input-feltet herunder og se, hvordan det ændrer oplevelsen:

Brug de rigtige typer

Her er nogle af de mest almindelige typer i begyndelsen:

• text til almindelig tekst
• email til mailadresser
• password til adgangskoder
• checkbox til afkrydsning
• radio til ét valg i en gruppe

Et godt spørgsmål at stille sig selv er: “Hvilken slags data skal brugeren indtaste eller vælge?”

Prøv en lille samlet øvelse. Sæt de rigtige typer på input-felterne:

Radio eller checkbox?

Mange bliver usikre på forskellen i starten, men tommelfingerreglen er enkel:

• brug radio, når brugeren kun må vælge én mulighed
• brug checkbox, når brugeren må vælge flere muligheder eller bare sige ja/nej

Eksempel:

<input type="radio" />
<input type="checkbox" />

Sammenlign radio buttons og checkboxes i praksis:

Det ser måske simpelt ud, men valget af type ændrer selve adfærden i formularen.