Som vi har sett tidligere, er det mest kraftfulle elementet i et skjema input. Dette elementet forventer data fra brukeren. La oss se nærmere på det.

Typer av input

Tekstfelt

Utformet for innskriving av kort tekstdata, som brukernavn, e-postadresser eller korte meldinger.

<input type="text" />

Passordfelt

Brukes for innskriving av passord, der tegnene skjules av sikkerhetsmessige årsaker. Sikrer personvern ved å skjule de innskrevne tegnene.

<input type="password" />

E-postfelt

Brukes for å samle inn e-postadresser fra brukere. Utfører validering på klientsiden for å sikre at den innskrevne verdien har gyldig e-postformat.

<input type="email" />

Telefoninnput

Brukes for å samle inn telefonnumre fra brukere. Tillater brukere å skrive inn telefonnumre i ulike formater, inkludert internasjonale numre.

<input type="tel" />

Tallinnput

Brukes for å samle inn numeriske data fra brukere. Gir et numerisk tastatur på mobile enheter for enkel inntasting.

<input type="number" />

Avkrysningsboks

Lar brukere velge ett eller flere alternativer fra en liste med valg. Egnet for situasjoner hvor flere valg er tillatt, som å velge flere elementer fra en liste eller godkjenne vilkår og betingelser.

<input type="checkbox" />

Radioknapp

Lar brukere velge ett alternativ fra en liste med gjensidig utelukkende valg. Egnet for situasjoner der kun ett alternativ skal velges, for eksempel kjønn eller valg av betalingsmetode.

<input type="radio" />

Filopplasting

Lar brukere laste opp filer fra enheten sin, velge fra det lokale filsystemet, og sende dem inn sammen med skjemadata. Denne funksjonen er spesielt nyttig ved vedlegg av dokumenter eller bilder.

<input type="file" />

Dato-, tids- og dato/tids-inndata

Lar brukere angi datoer, klokkeslett eller begge deler. Gir brukervennlige grensesnitt for valg av dato og tid. Nyttig for å registrere fødselsdato, avtaletidspunkt eller arrangementsplaner.

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

Eksempel: Skriv inn noe i feltene, og de vil foreslå ulike alternativer. Ingen data vil bli samlet inn.

Du har kanskje lagt merke til at det ikke er særlig praktisk å fylle ut skjemaet når du ikke forstår hva som skal fylles inn i hvert felt. Det er derfor etikettene hjelper oss.

Etiketter

Etiketter (<label>) er avgjørende for å knytte tekstetiketter til skjemainndataelementer, noe som forbedrer tilgjengelighet og brukervennlighet. Det er viktig at for-attributtet til <label> -taggen samsvarer med id -attributtet til det tilknyttede input -elementet.
Eksempel:

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

I eksemplet ovenfor:

• Når du klikker på etiketten Username:, vil det automatisk fokusere på det tilhørende inndatafeltet;
• label og input er koblet sammen ved hjelp av henholdsvis for- og id-attributtene;
• Både for- og id-attributtene har samme verdi (username).

Gjør utfylling av skjemaet enklere ved å legge til etiketter til inndatafeltene fra forrige eksempel.
Eksempel:

Videoveiledning