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
Lär dig koda webbsidor
Lär dig bygga och koda professionella webbsidor. Lär dig från grunden och uppåt att bygga professionella och interaktiva webbsidor.
Köp den nu