HTML-indgangstyper

Dette kapitel beskriver inputtypen for <input>-elementet.

Indgangstype: text

<input type="text"> definerer tilTekstinputens en-linje inputfelt:

Example

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

Try It Yourself

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

Fornavn:


Etternavn:

Indgangstype: password

<input type="password"> definererAdgangskodefelt：

Example

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

Try It Yourself

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

Brugernavn:


Bruger adgangskode:

Bemærkning: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 scripts til at håndtere inputdata.

Definerer formbehandlingsprogrammet (form-handler) i action-egenskapen til skjemaet:

Example

<form action="action_page.php">
Fornavn:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Etternavn:<br>
<input type="text" name="lastname" value="Mouse">
<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:


Etternavn:


Hvis du utelater submit-knappens value-egenskap, vil knappen få standardtekst:

Example

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

Try It Yourself

Input Type: radio

<input type="radio"> definerer en radio-knapp.

Radio-knapper lar en bruker velge KUN EN av et begrenset antall alternativer:

Example

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

Try It Yourself

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

Mann

Kvinne

Input Type: checkbox

<input type="checkbox"> definerer en kontrollerboks.

Kontrollerbokser lader brukeren velge null eller flere av et begrenset antall alternativer.

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="Click Me!">

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ærkning:Gamle webbrowser understøtter ikke disse inputtyper og vil blive behandlet som tekstdata.

Inputtype: number

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

Du kan begrænse tal.

Begrænsninger kan anvendes på inputfelter baseret på 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 Angiver, at inputfeltet skal være deaktiveret.
max Angiver den maksimale værdi for inputfeltet.
maxlength Angiver maksimalt antal tegn i inputfeltet.
min Angiver den mindste værdi for inputfeltet.
pattern Angiver det regulære udtryk, der bruges til at kontrollere inputværdien.
readonly Angiver, at inputfeltet er skrivebeskyttet (kan ikke ændres).
required Angiver, om inputfeltet er obligatorisk (skal udfyldes).
size Angiver bredden på inputfeltet (i tegn).
step Angiver den gyldige interval for tal i inputfeltet.
value Angiver standardværdi 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 vises datovælgeren i inputfeltet.

Example

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

Try It Yourself

Du kan tilføje begrænsninger til input:

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 vises farvevælgeren 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 vises datovælgeren 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 vises datovælgeren 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 vises tidsvælgeren 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 vises datovælgeren 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 vises datovælgeren 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"> For input fields that should contain email addresses.

Based on browser support, email addresses can be automatically validated at submission time.

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"> 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"> For input fields that should contain phone numbers.

Currently only Safari 8 supports the tel type.

Example

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

Try It Yourself

Input Type: url

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

Based on browser support, the URL field can be automatically validated at submission time.

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