Även om HTML5-formulären har betydligt fler funktioner än sina föregångare är de lika enkla att definiera.
HTML5 erbjuder faktiskt många nya fälttyper. Stödet från moderna webbläsare är redan relativt bra. I vilket fall kommer jag dock bara presentera fälttyper som är praktiskt användbara här.
Färgväljare
Ni kan ge era besökare möjligheten att välja en färg.
När man klickar på ett sådant fält öppnas en typisk färgväljare.
Genom den kan önskad färg väljas. En sådan färgväljare definieras med <input type="color" />.
Välj din favoritfärg: <input type="color" name="lf" />
Ett värde måste alltid tilldelas fältet. Om detta saknas eller är ogiltigt antas automatiskt #000 (alltså svart).
Datum och tid
Särskilt med tanke på fälttyper för datum- och tidsangivelser finns det många nyheter i HTML5. Och dessa fälttyper är delvis verkligt betydelsefulla. Tänk till exempel på vilka steg som krävs för att erbjuda era besökare ett datumväljarsfält. Normalt sett är det ingenting som går att göra utan JavaScript (eller till och med Flash). Tack vare HTML5 är det nu mycket enklare. Här behöver man bara definiera ett inmatningsfält av typen date.
<input type="date" />
För visning och implementering av kalendern ansvarar enbart webbläsaren. Webbläsarna bör visa en motsvarande widget för att visa kalendern. Inom Google Chrome ser en applikation ut på följande sätt:
Genom date definieras en kalender där användarna kan välja önskat datum. Efter urvalet tas datumet automatiskt in i textfältet.
På samma sätt kan man enkelt skapa ett tidfält. Där används ett fält av typen time.
<input type="time" />
Genom time ska webbläsarna visa styrelement för att välja en tidpunkt.
Samma enkelt fungerar week. Genom detta visas ett fält för veckoval.
<input type="week" />
Det går också att visa ett månadsfält.
<input type="month" />
Båda fälttyperna visar kontrollfunktioner för att ställa in önskade inställningar.
Medan time och date endast tillåter val av datum eller tid, möjliggör datetime och datetime-local en kombination av båda varianter.
I datetime visas ett datumfält och ett fält för tidval bredvid varandra. (datetime stöds för närvarande endast av Safari och Opera).
Det har redan antytts att de formulärfält som presenteras i den här avsnittet för närvarande ännu inte stöds av alla webbläsare. Om ni ändå vill använda dem kan ni använda lämpliga JavaScript-lösningar. De stora JavaScript-ramverken som jQuery och Dojo erbjuder lämpliga skript. Med jQuery UI skulle det se ut så här:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
/* <![CDATA[ */
$(document).ready(function() {
$("#datepicker").datepicker();
});
/* ]]> */
</script>
</head>
<body>
<input type="text" id="datepicker" />
</body>
</html>Därmed är ni på den säkra sidan även om webbläsaren inte stöder det klassiska date.
Fält för nummer
Genom number erbjuds ett fält som är speciellt avsett för inmatning av siffror.
I det enklaste fallet ser definitionen av ett number-fält ut så här:
<input type="number" />
Talen kan skrivas in i sådana fält på två sätt:
• via tangentbordet
• via kontrollfält
Genom att ange ytterligare attribut kan number-fält beskrivas ännu mer detaljerat. Först och främst finns de två attributen min och max, över vilka områdena för fälten kan bestämmas.
• min – det minsta värdet
• max – det största värdet
Dessa två attribut påverkar dock bara kontrollfälten i webbläsarna. Användarnas manuella inmatningar via tangentbordet påverkas inte av dem.
Båda attributen kan tilldelas heltal och decimaltal.
Med attributet step kan stegen som ska följas av webbläsarens kontrollfält sättas.
<input type="number" min="0" max="8" step="2" />
I detta fall kan man alltså bara välja värdena 0, 2, 4, 6 och 8 via webbläsarens kontrollfält.
Skjutreglage
Fält av typen range gör det möjligt att välja ett värde inom ett definierat värdeområde.
Webbläsarna tolkar range-fältet genom en skjutreglage.
<input type="range" min="0" max="10" step="2" value="6">
Det minsta möjliga värdet anges med attributet min. max beskriver det största möjliga värdet. Om attributen min och max saknas antar webbläsarna att värdena är 0 och 100.
Med step kan stegföljden definieras.
Skapa sökfält
search har inte någon funktion till att börja med. Istället ska denna fälttyp ses som ett komplement till det klassiska textinmatningsfältet. Syftet med search-fälten är endast att de visuellt skiljer sig från enkla textfält. Vanligtvis bör webbläsarna ta hand om utseendet för search-fälten.
<input type="search" />
Hur detta implementeras lämnas åt tillverkarna. En bra kombination är att lägga till attributet results.
<input type="search" results="5" placeholder="Sök..." />
Genom results bestäms hur många av de tidigare sökningarna som ska visas i fältet.
Men var försiktig: results-attributet ingår inte i HTML5-specifikationen.
