HTML-indgangstyper

Dette kapitel beskriver inputtypen for <input>-elementet.

Indgangstype: text

<input type="text"> definerer tilTekstinputen enkeltindgangsfelt:

Example

<form>
 Fornavn:<br>
<input type="text" name="firstname">
<br>
 Efternavn:<br>
<input type="text" name="lastname">
</form>

Try it yourself

Her er, hvordan ovenstående HTML-kode vil se ud i en browser:

Fornavn:


Efternavn:

Indgangstype: password

<input type="password"> DefinererAdgangskodefelt：

Example

<form>
 Brugernavn:<br>
<input type="text" name="username">
<br>
 Brugeradgangskode:<br>
<input type="password" name="psw">
</form>

Try it yourself

Her er, hvordan ovenstående HTML-kode vil se ud i en browser:

Brugernavn:


Brugeradgangskode:

Bemærk:Karakterer i password-feltet vil blive maskerede (vises som stjerner eller fyldte cirkler).

Indgangstype: submit

<input type="submit"> Definerersubmitformdata tilFormbehandlingsprogramknap.

Formbehandlingsprogram (form-handler) er typisk en server-side side, der indeholder skript til at håndtere inputdata.

Definerer formbehandlingsprogram (form-handler) i formens action attribut:

Example

<form action="action_page.php">
Fornavn:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Efternavn:<br>
<input type="text" name="lastname" value="Mus">
<br><br>
<input type="submit" value="Submit">
</form>

Try it yourself

Her er, hvordan ovenstående HTML-kode vil se ud i en browser:

Fornavn:


Efternavn:


Hvis du undlader at angive værdien for submit knappen, vil knappen få standardteksten:

Example

<form action="action_page.php">
Fornavn:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Efternavn:<br>
<input type="text" name="lastname" value="Mus">
<br><br>
<input type="submit">
</form>

Try it yourself

Input Type: radio

<input type="radio"> Definerer radio knap.

Radio knapper lader en bruger vælge KUN ÉT af et begrænset antal valg:

Example

<form>
<input type="radio" name="sex" value="male" checked>Mand
<br>
<input type="radio" name="sex" value="female">Kvinde
</form>

Try it yourself

Her er, hvordan ovenstående HTML-kode vil se ud i en browser:

Mand

Kvinde

Input Type: checkbox

<input type="checkbox"> Definerer kontrollerboks.

Kontrollerbokse lader brugeren vælge INGEN eller FLERE af et begrænset antal valg.

Example

<form>
<input type="checkbox" name="vehicle" value="Bike">Jeg har en cykel
<br>
<input type="checkbox" name="vehicle" value="Car">Jeg har en bil 
</form>

Try it yourself

Her er, hvordan ovenstående HTML-kode vil se ud i en browser:

Jeg har en cykel

Jeg har en bil

Input Type: button

<input type="button"> DefinererKnap。

Example

<input type="button" onclick="alert('Hello World!')" value="Klik mig!">

Try it yourself

Her er, hvordan ovenstående HTML-kode vil se ud i en browser:

HTML5 inputtyper

HTML5 har tilføjet flere nye inputtyper:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Bemærk:Gamle webbrowserer understøtter ikke disse inputtyper og vil blive behandlet som tekstinput.

Inputtype: number

<input type="number"> Bruges til inputfelter, der skal indeholde et talværdi.

Du kan begrænse talværdier.

Begrænsninger kan anvendes på inputfelter afhængigt af browserens understøttelse.

Example

<form>
  Antal (mellem 1 og 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

Try it yourself

Inputbegrænsninger

Her er nogle almindelige inputbegrænsninger (nogle af dem er nye i HTML5):

Egenskab Beskrivelse
disabled Definerer, om inputfeltet skal være deaktiveret.
max Definerer det maksimale tilladte værdi for inputfeltet.
maxlength Definerer det maksimale antal tegn i inputfeltet.
min Definerer det mindste tilladte værdi for inputfeltet.
pattern Definerer den regulære udtryk, der bruges til at kontrollere inputværdien.
readonly Definerer inputfeltet som skrivebeskyttet (kan ikke ændres).
required Definerer, om inputfeltet er obligatorisk (skal udfyldes).
size Definerer bredden på inputfeltet (i tegn).
step Definerer den gyldige interval for tal i inputfeltet.
value Definerer standardværdien for inputfeltet.

Du vil lære mere om inputbegrænsninger i det næste kapitel.

Example

<form>
  Antal:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

Try it yourself

Inputtype: date

<input type="date"> Bruges til inputfelter, der skal indeholde en dato.

Afhængigt af browserens understøttelse vil datovælgeren vises i inputfeltet.

Example

<form>
  Fødselsdag:
  <input type="date" name="bday">
</form>

Try it yourself

Du kan tilføje begrænsninger til inputfeltet:

Example

<form>
  Indtast en dato før 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Indtast en dato efter 2000-01-01:
  Indtast en dato efter 2000-01-01:<br>
</form>

Try it yourself

Inputtype: color

<input type="color"> Bruges til inputfelter, der skal indeholde farver.

Afhængigt af browserens understøttelse vil farvevælgeren vises i inputfeltet.

Example

<form>
  Vælg din favoritfarve:
  <input type="color" name="favcolor">
</form>

Try it yourself

Inputtype: range

<input type="range"> Bruges til inputfelter, der skal indeholde værdier inden for et bestemt interval.

Afhængigt af browserens understøttelse kan inputfeltet vises som en gliderkontrol.

Example

<form>
  <input type="range" name="points" min="0" max="10">
</form>

Try it yourself

Du kan bruge følgende egenskaber til at specificere begrænsninger: min, max, step, value.

Inputtype: month

<input type="month"> Tillader brugeren at vælge måned og år.

Afhængigt af browserens understøttelse vil datovælgeren vises i inputfeltet.

Example

<form>
  Fødselsdag (måned og år):
  <input type="month" name="bdaymonth">
</form>

Try it yourself

Inputtype: week

<input type="week"> Tillader brugeren at vælge uge og år.

Afhængigt af browserens understøttelse vil datovælgeren vises i inputfeltet.

Example

<form>
  Vælg en uge:
  <input type="week" name="week_year">
</form>

Try it yourself

Inputtype: time

<input type="time"> Tillader brugeren at vælge tid (uden tidszone).

Afhængigt af browserens understøttelse vil tidsvælgeren vises i inputfeltet.

Example

<form>
  Vælg en tid:
  <input type="time" name="usr_time">
</form>

Try it yourself

Inputtype: datetime

<input type="datetime"> Tillader brugeren at vælge dato og klokkeslæt (med tidszone).

Afhængigt af browserens understøttelse vil datovælgeren vises i inputfeltet.

Example

<form>
  Fødselsdag (dato og klokkeslæt):
  <input type="datetime" name="bdaytime">
</form>

Try it yourself

Inputtype: datetime-local

<input type="datetime-local"> Tillader brugeren at vælge dato og klokkeslæt (uden tidszone).

Afhængigt af browserens understøttelse vil datovælgeren vises i inputfeltet.

Example

<form>
  Fødselsdag (dato og klokkeslæt):
  <input type="datetime-local" name="bdaytime">
</form>

Try it yourself

Input type: email

<input type="email"> Used for input fields that should contain email addresses.

According to browser support, email addresses can be automatically verified when submitted.

Some smartphones will recognize email type and add ".com" to the keyboard to match email input.

Example

<form>
  E-mail:
  <input type="email" name="email">
</form>

Try it yourself

Input type: search

<input type="search"> Used for search fields (search fields behave like regular text fields).

Example

<form>
  Search Google:
  <input type="search" name="googlesearch">
</form>

Try it yourself

Input type: tel

<input type="tel"> Used for input fields that should contain phone numbers.

Currently only Safari 8 supports tel type.

Example

<form>
  Telephone:
  <input type="tel" name="usrtel">
</form>

Try it yourself

Input type: url

<input type="url"> Used for input fields that should contain URL addresses.

According to browser support, the url field can be automatically verified when submitted.

Some smartphones recognize url type and add ".com" to the keyboard to match url input.

Example

<form>
  Add your homepage:
  <input type="url" name="homepage">
</form>

Try it yourself