HTML inmatningstyper

Detta kapitel beskriver inmatningstypen för <input>-elementet.

Inmatningstyp: text

<input type="text"> Definiera förTextinmatnings enfaldiga inmatningsfält:

Exempel

<form>
 Förnamn:<br>
<input type="text" name="firstname">
<br>
 Efternamn:<br>
<input type="text" name="lastname">
</form>

Prova själv

Ovanstående HTML-kod kommer att se ut så här i webbläsaren:

Förnamn:


Efternamn:

Inmatningstyp: password

<input type="password"> DefinieraLösenordsfält：

Exempel

<form>
 Användarnamn:<br>
<input type="text" name="username">
<br>
 Användar lösenord:<br>
<input type="password" name="psw">
</form>

Prova själv

Ovanstående HTML-kod kommer att se ut så här i webbläsaren:

Användarnamn:


Användar lösenord:

Kommentar:Tecken i lösenordsfältet kommer att maskeras (visas som stjärnor eller fyllda cirklar).

Inmatningstyp: submit

<input type="submit"> DefinierasubmitFormdata tillFormhanteringsprogramknappen.

Formhanteringsprogrammet (form-handler) är vanligtvis en serverSID som innehåller skript för att hantera inmatningsdata.

Definiera formulärhanteraren (formulärhanterare) i formulärets action-attribut:

Exempel

<form action="action_page.php">
Förnamn:<br>
<input type="text" name="förnamn" value="Mickey">
<br>
Efternamn:<br>
<input type="text" name="efternamn" value="Mus">
<br><br>
<input type="submit" value="Skicka">
</form>

Prova själv

Ovanstående HTML-kod kommer att se ut så här i webbläsaren:

Förnamn:


Efternamn:


Om du hoppar över att ange value-attributet för submit-knappen, kommer knappen att få standardtexten:

Exempel

<form action="action_page.php">
Förnamn:<br>
<input type="text" name="förnamn" value="Mickey">
<br>
Efternamn:<br>
<input type="text" name="efternamn" value="Mus">
<br><br>
<input type="submit">
</form>

Prova själv

Input Typ: radio

<input type="radio"> Definiera radio knapp.

Radio knappar låter en användare välja ENDAST EN av ett begränsat antal alternativ:

Exempel

<form>
<input type="radio" name=" kön" value="man" checked>Man
<br>
<input type="radio" name=" kön" value="kvinna">Kvinna
</form>

Prova själv

Ovanstående HTML-kod kommer att se ut så här i webbläsaren:

Man

Kvinna

Input Typ: kryssruta

<input type="checkbox"> Definiera kryssruta.

Kryssrutor låter användaren välja INGA eller FLERA alternativ av ett begränsat antal alternativ.

Exempel

<form>
<input type="checkbox" name="fordon" value="Cykel">Jag har en cykel
<br>
<input type="checkbox" name="fordon" value="Bil">Jag har en bil 
</form>

Prova själv

Ovanstående HTML-kod kommer att se ut så här i webbläsaren:

Jag har en cykel

Jag har en bil

Input Typ: knapp

<input type="button"> DefinieraKnapp。

Exempel

<input type="button" onclick="alert('Hej Värld!')" value="Klicka mig!">

Prova själv

Ovanstående HTML-kod kommer att se ut så här i webbläsaren:

HTML5 inmatningstyper

HTML5 har lagt till flera nya inmatningstyper:

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

Kommentar:Gamla webbläsare som inte stödjer inmatningstypen kommer att betraktas som textinmatning.

Inmatningstyp: number

<input type="number"> Används för inmatningsfält som bör innehålla ett numeriskt värde.

Du kan begränsa siffror.

Beroende på webbläsarens stöd kan begränsningar tillämpas på inmatningsfältet.

Exempel

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

Prova själv

Inmatningsbegränsningar

Här listas några vanliga inmatningsbegränsningar (vissa är nya i HTML5):

Egenskap Beskrivning
disabled Definiera om inmatningsfältet ska vara inaktiverat.
max Definiera det maximala värdet för inmatningsfältet.
maxlength Definiera det maximala antalet tecken i inmatningsfältet.
min Definiera det minsta värdet för inmatningsfältet.
pattern Definiera det reguljära uttrycket för att kontrollera inmatningsvärdet.
readonly Definiera inmatningsfältet som skrivskyddat (kan inte ändras).
required Definiera om inmatningsfältet är obligatoriskt (måste fyllas i).
size Definiera bredden på inmatningsfältet (i tecken).
step Definiera den giltiga intervallet för numeriska värden i inmatningsfältet.
value Definiera standardvärdet för inmatningsfältet.

Du kommer att lära dig mer om inmatningsbegränsningar i nästa kapitel.

Exempel

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

Prova själv

Inmatningstyp: date

<input type="date"> Används för inmatningsfält som bör innehålla ett datum.

Baserat på webbläsarens stöd kommer datumväljaren att visas i inmatningsfältet.

Exempel

<form>
  Födelsedag:
  <input type="date" name="bday">
</form>

Prova själv

Du kan lägga till begränsningar för inmatningen:

Exempel

<form>
  Ange ett datum innan 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Ange ett datum efter 2000-01-01:
  Skriv in ett datum efter 2000-01-01:<br>
</form>

Prova själv

Inmatningstyp: color

<input type="color"> Används för inmatningsfält som bör innehålla en färg.

Baserat på webbläsarens stöd kommer färgväljaren att visas i inmatningsfältet.

Exempel

<form>
  Välj din favoritfärg:
  <input type="color" name="favcolor">
</form>

Prova själv

Inmatningstyp: range

<input type="range"> Används för inmatningsfält som bör innehålla ett visst intervall av värden.

Baserat på webbläsarens stöd kan inmatningsfältet visas som en rullgardin.

Exempel

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

Prova själv

Du kan använda följande egenskaper för att specificera begränsningar: min, max, step, value.

Inmatningstyp: month

<input type="month"> Tillåter användaren att välja månad och år.

Baserat på webbläsarens stöd kommer datumväljaren att visas i inmatningsfältet.

Exempel

<form>
  Födelsedag (månad och år):
  <input type="month" name="bdaymonth">
</form>

Prova själv

Inmatningstyp: week

<input type="week"> Tillåter användaren att välja vecka och år.

Baserat på webbläsarens stöd kommer datumväljaren att visas i inmatningsfältet.

Exempel

<form>
  Välj en vecka:
  <input type="week" name="week_year">
</form>

Prova själv

Inmatningstyp: time

<input type="time"> Tillåter användaren att välja tid (utan tidszon).

Baserat på webbläsarens stöd kommer tidsväljaren att visas i inmatningsfältet.

Exempel

<form>
  Välj en tid:
  <input type="time" name="usr_time">
</form>

Prova själv

Inmatningstyp: datetime

<input type="datetime"> Tillåter användaren att välja datum och tid (med tidszon).

Baserat på webbläsarens stöd kommer datumväljaren att visas i inmatningsfältet.

Exempel

<form>
  Födelsedag (datum och tid):
  <input type="datetime" name="bdaytime">
</form>

Prova själv

Inmatningstyp: datetime-local

<input type="datetime-local"> Tillåter användaren att välja datum och tid (utan tidszon).

Baserat på webbläsarens stöd kommer datumväljaren att visas i inmatningsfältet.

Exempel

<form>
  Födelsedag (datum och tid):
  <input type="datetime-local" name="bdaytime">
</form>

Prova själv

Inmatningstyp: email

<input type="email"> Används för inmatningsfält som bör innehålla e-postadresser.

Beroende på webbläsarstöd kan e-postadresser automatiskt verifieras vid inlämning.

Vissa smartphones känner igen email-typ och lägger till ".com" till tangentbordet för att matcha e-postinmatning.

Exempel

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

Prova själv

Inmatningstyp: search

<input type="search"> Används för sökfält (sökfält är liknande vanliga textfält).

Exempel

<form>
  Sök Google:
  <input type="search" name="googlesearch">
</form>

Prova själv

Inmatningstyp: tel

<input type="tel"> Används för inmatningsfält som bör innehålla telefonnummer.

Endast Safari 8 stöder tel-typ för närvarande.

Exempel

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

Prova själv

Inmatningstyp: url

<input type="url"> Används för inmatningsfält som bör innehålla URL-adresser.

Beroende på webbläsarstöd kan url-fältet automatiskt verifieras vid inlämning.

Vissa smartphones känner igen url-typ och lägger till ".com" till tangentbordet för att matcha url-inmatning.

Exempel

<form>
  Lägg till din startsida:
  <input type="url" name="homepage">
</form>

Prova själv