Lære Utforsker Forskjellige Inndatatyper i HTML

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.

index.html

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.

index.html

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.

index.html

avkrysningsboks

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

index.html

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.

index.html

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.

index.html

index.js

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:

index.html

Merk

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

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 5. Kapittel 5

Spør AI

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Suggested prompts:

Can you explain more about how browser validation works for these input types?

What are some best practices for using these different input types in forms?

Can you show examples of how to use these input types in an HTML form?

Awesome!

Completion rate improved to 2.56

Sveip for å vise menyen

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.

index.html

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.

index.html

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.

index.html

avkrysningsboks

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

index.html

radio

index.html

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.

index.html

index.js

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:

index.html

Merk

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

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 5. Kapittel 5