Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Udforskning af Forskellige Inputtyper i HTML | HTML-Formularer og Brugerinput
Ultimativ HTML

book
Udforskning af Forskellige Inputtyper i HTML

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.

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": bruges til numerisk input. Du kan definere et specifikt interval med min og max attributterne og angive en specifik trinværdi med step attributten.

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": 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.

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>

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.

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": 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.

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": 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.

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>

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:

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>

Bemærk

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

question mark

Hvad er den største forskel mellem type="email" og type="password" inputfelterne?

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 5. Kapitel 5

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

We use cookies to make your experience better!
some-alt