Hoewel de HTML5-formulieren aanzienlijk meer functies bieden dan hun voorgangers, kunnen ze net zo eenvoudig worden gedefinieerd.
HTML5 biedt eigenlijk veel nieuwe veldtypen. De ondersteuning door de huidige browsers is al behoorlijk goed. Hoe dan ook zal ik jullie op dit punt alleen veldtypen laten zien die praktisch bruikbaar zijn.
Kleurkiezer
U kunt uw bezoekers de mogelijkheid geven om een kleur te kiezen.
Als men zo'n veld aanklikt, wordt er een typische kleurkiezer geopend.
Via de kiezer kan de gewenste kleur worden geselecteerd. Zo'n kleurkiezer wordt gedefinieerd met <input type="color" />.
Kies je favoriete kleur: <input type="color" name="lf" />
Er moet altijd een waarde aan het veld worden toegewezen. Als dit ontbreekt of ongeldig is, wordt automatisch #000 (zwart) aangenomen.
Datum en tijd
Vooral wat betreft veldtypen voor datum- en tijdnotaties zijn er talrijke vernieuwingen in HTML5. En deze veldtypen hebben eigenlijk wel wat in petto. Denk bijvoorbeeld aan de stappen die nodig zijn als je je bezoekers een datumkiezerveld wilt aanbieden. Normaal gesproken is dat zonder JavaScript (of zelfs Flash) niet mogelijk. Dankzij HTML5 is dit vanaf nu veel gemakkelijker. Hier hoef je alleen maar een invoerveld van het type date te definiëren.
<input type="date" />
Voor de weergave en implementatie van de kalender is uitsluitend de browser verantwoordelijk. De browser zou een passend widget moeten tonen voor de kalenderweergave. In Google Chrome ziet een toepassing er als volgt uit:
Met date wordt een kalender gedefinieerd waarop gebruikers de gewenste datum kunnen selecteren. Na de selectie wordt de datum automatisch overgenomen in het tekstveld.
Ook gemakkelijk is het aanmaken van een tijdveld. Hiervoor wordt een veld van het type time gebruikt.
<input type="time" />
Met time moeten de browsers bedieningselementen tonen om een tijd te selecteren.
Vergelijkbaar eenvoudig werkt week. Hiermee wordt een veld weergegeven om de week te selecteren.
<input type="week" />
Ook kan een veld voor maanden worden weergegeven.
<input type="month" />
Beide veldtypen tonen besturingselementen waarmee de gewenste gegevens kunnen worden ingesteld.
Terwijl time en date ofwel alleen de datumselectie of alleen de tijdselectie toestaan, maken datetime en datetime-local een combinatie van beide varianten mogelijk.
Met datetime worden naast elkaar een datumveld en een tijdselectieveld weergegeven. (datetime wordt momenteel alleen ondersteund door Safari en Opera).
Er is al gesuggereerd dat de formulierelementen die in dit gedeelte zijn gepresenteerd momenteel nog niet door alle browsers worden ondersteund. Als je ze toch wilt gebruiken, kun je terugvallen op bijpassende JavaScript-oplossingen. De belangrijkste JavaScript-frameworks zoals jQuery en Dojo bieden geschikte scripts aan. Bij jQuery UI ziet dat er als volgt uit:
<!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>Zo ben je dus goed beschermd, zelfs als de browser het klassieke date niet ondersteunt.
Velden voor getallen
Met number wordt een veld aangeboden dat specifiek bedoeld is voor het invoeren van getallen.
In het eenvoudigste geval ziet de definitie van een number-veld er als volgt uit:
<input type="number" />
De getallen kunnen op twee manieren worden ingevoerd in deze velden:
• via het toetsenbord
• via besturingselementen
Door het opgeven van extra attributen kunnen number-velden gedetailleerder worden beschreven. Ten eerste zijn er de twee attributen min en max, waarmee de waardebereiken van de velden bepaald kunnen worden.
• min - de kleinste waarde
• max - de grootste waarde
Deze twee attributen hebben echter alleen betrekking op de besturingselementen van de browser. De handmatige invoer door gebruikers via het toetsenbord kan hierdoor niet worden beïnvloed.
Aan beide attributen kunnen gehele en decimale getallen worden toegewezen.
Met het attribuut step kan de stapgrootte worden ingesteld die door de browserbesturingselementen moet worden gevolgd.
<input type="number" min="0" max="8" step="2" />
In dit geval kunnen via de browserbesturingselementen alleen de waarden 0, 2, 4, 6 en 8 worden geselecteerd.
Schuifregelaar
Velden van het type range stellen de gebruiker in staat een waarde te selecteren binnen een gedefinieerd bereik.
De browsers interpreteren het bereiksveld via een schuifregelaar.
<input type="range" min="0" max="10" step="2" value="6">
De kleinste mogelijke waarde wordt aangegeven met het min-attribuut. max beschrijft de grootste waarde. Als de attributen min en max ontbreken, gaan browsers uit van de waarden 0 en 100.
Met step kan de stapgrootte worden gedefinieerd.
Zoekvelden maken
search heeft in eerste instantie geen functie. Dit veldtype wordt eerder gezien als een aanvulling op het klassieke tekstveld. Het doel van search-velden is om zich alleen optisch te onderscheiden van eenvoudige tekstvelden. Doorgaans moeten browsers de weergave van de search-velden overnemen.
<input type="search" />
Hoe dit uiteindelijk wordt geïmplementeerd, is aan de fabrikanten overgelaten. Een goede combinatie is het toevoegen van het results-attribuut.
<input type="search" results="5" placeholder="Zoeken..." />
Met results wordt bepaald hoeveel van de vorige zoekopdrachten in het veld moeten worden weergegeven.
Let op: Het results-attribuut maakt geen deel uit van de HTML5-specificatie.
