HTML tilbyr ulike <input> elementer som gjør det mulig å fange opp forskjellige typer data fra brukere. La oss utforske noen vanlige inputtyper:

email og password

• type="email": brukes for e-postfelt som krever en gyldig e-postadresse. Nettleseren validerer automatisk e-postadressen og ber brukeren rette opp ugyldige oppføringer;

• type="password": brukes for passordfelt der den inntastede teksten maskeres for sikkerhet. Du kan også spesifisere minLength og maxLength attributter for å sette krav til passordlengde.

nummer

type="number": brukes for numerisk inndata. Du kan definere et spesifikt område med min og max attributtene og sette en spesifikk trinnverdi med step attributtet.

telefon

type="tel": ment for å skrive inn telefonnumre, men det utfører ingen validering av inndataene. Det er opp til utvikleren å validere inndataene og sikre at det er et gyldig telefonnummer.

avkrysningsboks

type="checkbox": lar brukeren velge ett eller flere alternativer fra forhåndsdefinerte valg. Attributtet checked gjør en avkrysningsboks avkrysset som standard.

radio

type="radio": oppretter et sett med alternativer der bare ett alternativ kan velges. En radioknapp representerer hvert alternativ, og ved å velge ett, fjernes automatisk valget fra de andre. Hver radioknapp bør ha en unik value-attributt for å identifisere den.

range

type="range": oppretter en skyvekontroll som lar brukere velge en verdi innenfor et spesifikt område. Du kan bruke min, max, step og value-attributter for å definere dens oppførsel.

Merk

JavaScript er ikke fokus for dette kurset, så logikken bak det vil bli utelatt.

dato og tid

• type="date": lar brukere velge en dato fra en kalender-popup;

• type="time": lar brukere angi en tid i 24-timers format;

• type="datetime-local": kombinerer tid og dato input.

Eksempel:

Merk

For konsekvent styling på tvers av forskjellige enheter, brukes ofte ferdige løsninger for popup-kalendere og tidsinnstillinger.