Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære Utforsker Forskjellige Inndatatyper i HTML | HTML-Skjemaer og Brukerinput
Ultimate HTML

book
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.
html

index.html

copy
<form onsubmit="return false">
<!-- Email input -->
<label for="mail">Email</label>
<input type="email" id="mail" />
<!-- Password input -->
<label for="password">Password</label>
<input type="password" id="password" />
<button type="submit">Submit</button>
</form>

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.

html

index.html

copy
<form onsubmit="return false">
<label for="year">Year of birth</label>
<input type="number" min="1900" max="2023" id="year" />

<label for="height">Height with 0.1 step</label>
<input type="number" id="height" step="0.1" min="0.1" max="10.0" />

<button type="submit">Submit</button>
</form>

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.

html

index.html

copy
<form onsubmit="return false">
<label for="phone">Phone number:</label>
<input type="tel" id="phone" />

<button type="submit">Submit</button>
</form>

avkrysningsboks

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

html

index.html

copy
<form onsubmit="return false">
<p>What is your favorite season?</p>
<label>
Winter
<input type="checkbox" name="winter" value="winter" checked />
</label>
<label>
Spring
<input type="checkbox" name="spring" value="spring" />
</label>
<label>
Summer
<input type="checkbox" name="summer" value="summer" />
</label>
<label>
Fall
<input type="checkbox" name="fall" value="fall" />
</label>
</form>

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.

html

index.html

copy
<form onsubmit="return false">
<p>What is your favorite food?</p>
<label>
<input type="radio" name="dish" value="pasta" checked />
Pasta
</label>
<label>
<input type="radio" name="dish" value="pizza" />
Pizza
</label>
<label>
<input type="radio" name="dish" value="burger" />
Burger
</label>
<label>
<input type="radio" name="dish" value="steak" />
Steak
</label>
</form>

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.

html

index.html

js

index.js

copy
<form onsubmit="return false">
<label for="day">Day of the week</label>
<input id="day" type="range" value="5" min="1" max="7" step="1" />
</form>
<p>Selected value: <span class="selected-value">5</span></p>
<script src="index.js"></script>

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:

html

index.html

copy
<form onsubmit="return false">
<!-- Date input -->
<label for="date">Date</label>
<input type="date" min="1970-01-01" max="2070-01-01" id="date" />

<!-- Time input -->
<label for="time">Time</label>
<input type="time" id="time" />

<!-- Date and Time input -->
<label for="full-time">Date and Time</label>
<input type="datetime-local" min="1900-01-01T00:00" max="2000-01-01T00:00" id="full-time" />
</form>

Merk

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

question mark

Hva er hovedforskjellen mellom type="email" og type="password" input-feltene?

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 5. Kapittel 5
some-alt