HTML giver forskellige <input> elementer, der gør det muligt at indfange forskellige typer data fra brugere. Lad os udforske nogle almindeligt anvendte inputtyper:

email og password

• type="email": bruges til email inputfelter, der kræver en gyldig emailadresse. Browseren validerer automatisk emailadressen og beder brugeren om at rette ugyldige indtastninger;
• type="password": bruges til passwordfelter, hvor den indtastede tekst maskeres for sikkerhed. Du kan også angive minLength og maxLength attributter for at sætte krav til passwordlængde.

nummer

type="number": bruges til numerisk input. Du kan definere et specifikt interval med min og max attributterne og angive en specifik trinværdi med step attributten.

telefon

type="tel": beregnet til indtastning af telefonnumre, men det udfører ikke nogen validering af inputtet. Det er op til udvikleren at validere inputtet og sikre, at det er et gyldigt telefonnummer.

afkrydsningsfelt

type="checkbox": giver brugeren mulighed for at vælge en eller flere muligheder fra foruddefinerede valg. Attributten checked gør et afkrydsningsfelt markeret som standard.

radio

type="radio": opretter et sæt af muligheder, hvor kun én mulighed kan vælges. En radioknap repræsenterer hver mulighed, og valg af én fravælger automatisk de andre. Hver radioknap skal have en unik value attribut for at identificere den.

range

type="range": opretter en skyderkontrol, der giver brugerne mulighed for at vælge en værdi inden for et specifikt interval. Du kan anvende min, max, step og value attributter for at definere dens adfærd.

Bemærk

JavaScript er ikke fokus for dette kursus, så logikken bag det vil blive udeladt.

dato og tid

• type="date": tillader brugere at vælge en dato fra en kalender-popup;
• type="time": tillader brugere at indtaste et tidspunkt i 24-timers format;
• type="datetime-local": kombinerer tid og dato input.

Eksempel:

Bemærk

For ensartet styling på tværs af forskellige enheder, bruges færdiglavede løsninger ofte til popup-kalendere og tidsinput.