HTML-inmatningstyper

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

Inmatningstyp: text

<input type="text"> Definiera förTextinmatnings enradinmatningsfä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 ser 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 ser 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"> DefinieraSkicka inFormdata tillFormhanterareknappen.

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

Definiera formulärhanteraren (formulärhanterare) i formens action-egenskap:

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 ser ut så här i webbläsaren:

Förnamn:


Efternamn:


Om du hoppar över att ange value-egenskapen 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 radioalternativ.

Radioalternativ låter användaren 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 ser 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 ser 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 ser 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, betraktas som textinmatning.

Inmatningstyp: number

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

Du kan begränsa siffror.

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

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 den reguljära uttrycket som kontrollerar 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 för inmatningsfältet (i tecken).
step Definiera den giltiga intervallen för siffror 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 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 före 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Ange ett datum efter 2000-01-01:
  Ange 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 värdeområde.

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

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 igenkänner 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 visar sig 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.

För närvarande stöds endast tel-typ av Safari 8.

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 igenkänner 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