HTML5 Formulär Nya input-typer i HTML5

HTML5 erbjuder en uppsjö av nya input typer för dina formulär. Genom att använda rätt input-typer så förenklar du för dina användare och ökar chansen för att få in bättre data. I den här sektionen går vi genom de olika nya input-typer du kan använda i HTML5 och även argument för varför de är bättre än gamla lösningar.

Input-typ för email

Ofta när man skapar formulär på sin webbsida så använder man fält där man vill att användaren fyller i en e-postadress. Idag finns det en standard för input-fält där man kan specificera att ett fält ska innehålla en e-postadress. Vad ska detta vara bra för? Fler skäl, men det främsta är att man kan låta webbläsaren verifiera att det är en korrekt e-postadress. Ett annan bra sak med att specificera vilken typ av input det är, är att exempelvis smartphones och tablets med virtuella tangentbord kan anpassa sina tangentbord till den aktuella input-typen. Du har säkert märkt detta om du använt en iPhone, iPad eller en Android-baserad telefon. Nedan ett exempel på hur input typen för epost kan se ut i markup:

  <input type="email" name="emailAddress" id="myEmailAddress">

Input-typ för search

<input type="search" name="query" >

Input-typ för tel

<input type="tel" name="phoneNr" >

Input-typ för url

<input type="url" name="url" >

Input-typ för datetime

<input type="datetime" name="when" >

Input-typ för date

<input type="date" name="whatDay" >

Input-typ för month

<input type="month" name="whatMonth" >

Input-typ för week

<input type="week" name="whatWeek" >

Input-typ för time

<input type="time" name="whatTime" >

Input-typ för datetime-local

<input type="datetime-local" name="whatLocalDateTime" >

Input-typ för number

<input type="number" name="nrOfItems" >

Input-typ för range

<input type="range" min="0" max="100" name="mortgagePercentage" >

Input-typ för color

<input type="color" name="backgroundColor" >

Dela

Köp HTML och CSS-boken

html5 och css3 bok

Lär dig HTML5 och CSS3. Den sjunde upplagan av HTML och CSS-boken täcker in HTML5, XHTML och CSS. Boken börjar från grunden och innehåller allt du behöver veta för att skriva webbsidor.

Köp den nu

Ställ en fråga

Bli en expert på HTML5 och CSS3

Få gratis tips i brevlådan om hur du bygger en bättre webbsida.