Som vi har set tidligere, er det mest kraftfulde element i en formular input. Dette element forventer data fra brugeren. Lad os fokusere på det.

Typer af input

Tekstinput

Designet til indtastning af kort tekstdata, såsom brugernavne, e-mailadresser eller korte beskeder.

<input type="text" />

Passwordinput

Anvendes til indtastning af adgangskoder, hvor tegn maskeres af sikkerhedsmæssige årsager. Sikrer fortrolighed ved at skjule de indtastede tegn.

<input type="password" />

E-mailinput

Anvendes til indsamling af e-mailadresser fra brugere. Udfører klientvalidering for at sikre, at den indtastede værdi har gyldigt e-mailformat.

<input type="email" />

Telefoninput

Anvendes til indsamling af telefonnumre fra brugere. Giver mulighed for indtastning af telefonnumre i forskellige formater, herunder internationale numre.

<input type="tel" />

Numerisk input

Anvendes til indsamling af numeriske data fra brugere. Viser et numerisk tastatur på mobile enheder for nem indtastning.

<input type="number" />

Afkrydsningsfelt

Giver brugere mulighed for at vælge en eller flere muligheder fra en liste. Velegnet til situationer, hvor flere valg er tilladt, såsom valg af flere elementer fra en liste eller accept af vilkår og betingelser.

<input type="checkbox" />

Radioknap

Giver brugerne mulighed for at vælge én mulighed fra en liste af gensidigt udelukkende valg. Velegnet til situationer, hvor kun én mulighed skal vælges, såsom valg af køn eller valg af betalingsmetode.

<input type="radio" />

Filinput

Giver brugerne mulighed for at uploade filer fra deres enhed, vælge fra deres lokale filsystem og indsende dem sammen med formularens data. Denne funktion er især nyttig ved vedhæftning af dokumenter eller billeder.

<input type="file" />

Datoinput, Tidsinput og DatoTid-input

Giver brugerne mulighed for at indtaste datoer, tidspunkter eller begge dele. Tilbyder brugervenlige grænseflader til valg af datoer og tidspunkter. Anvendes til indsamling af fødselsdatoer, aftaletidspunkter eller tidsplaner for begivenheder.

<input type="date" />
<input type="time" />
<input type="datetime-local" />

Eksempel: Indtast noget i felterne, og de vil foreslå forskellige muligheder. Bare rolig; ingen data bliver indsamlet.

Du har måske bemærket, at det ikke er særlig praktisk at udfylde formularen, når du ikke forstår, hvad der bliver spurgt om i hvert felt. Derfor hjælper etiketter os.

Labels

Labels (<label>) er afgørende for at forbinde tekstetiketter med formularinputelementer, hvilket forbedrer tilgængelighed og brugervenlighed. Det er vigtigt, at for-attributten i <label> -tagget matcher id -attributten for det tilknyttede input -element.
Eksempel:

<label for="username">Username:</label>
<input type="text" id="username" />

I eksemplet ovenfor:

• Når du klikker på etiketten Username:, vil fokus automatisk blive sat i det tilsvarende inputfelt;
• label og input er forbundet ved hjælp af henholdsvis for- og id-attributterne;
• Både for- og id-attributterne har samme værdi (username).

Gør det nemmere at udfylde formularen ved at tilføje etiketter til inputfelterne fra det forrige eksempel.
Eksempel:

Videovejledning