Html5 en css 3: de pijlers van morgen

Krachtiger webformulieren

Met html5 heeft de developer voortaan de mogelijkheid om de <a>-tag, die is bedoeld voor het leggen van hyperlinks, zogenaamde flow content te laten bevatten, zoals meerdere sectioning- en headingelementen. Hierdoor hoeft niet langer per element een link toegevoegd te worden. Verder krijgt deze tag, net als <area> en <link>, het nieuwe attribuut media. Hiermee kan worden aangegeven naar welk soort content wordt gelinkt. Dit attribuut kan gecombineerd worden met het attribuut rel, dat de relatie beschrijft met de bron, en hreflang, dat de taal van het doel beschrijft: <link media="print" rel="stylesheet" hreflang="nl" href="print.css">.

In html5 worden webformulieren krachtiger dankzij nieuwe input types. Zo kan met input type=email bijvoorbeeld gecontroleerd worden of een e-mailadres geldig is en met input type=tel kan een invoerveld voor het invullen van telefoonnummers worden gegenereerd. Een bijzonder input-type is range, waarbij een begin- en eindwaarde meegegeven moet worden. Browsers presenteren dit inputtype veelal als een slider. Enkele browsers kunnen bovendien bij het ingeven van een datum inmiddels ook al een kalender tonen.

De nieuwe input-types worden helaas nog niet door alle browsers volledig ondersteund. Via de Html5 Inputs and attribute-testpagina kan gecontroleerd worden welke input-types in een bepaalde browser te gebruiken zijn.

Naast nieuwe input-types zijn er in html5 ook veel nieuwe form attributes opgenomen. Zo kan met autocomplete worden aangegeven dat een formulier of invoerveld een functie moet aanbieden voor het automatisch aanvullen van data. Een handig nieuw attribuut luistert naar de naam autofocus. Hierbij kan een invoerveld binnen een formulier direct ingevuld worden.

Met het placeholder-attribuut kan in een invoerveld alvast tekst geplaatst worden, bijvoorbeeld om een hint of een voorbeeld te geven. Ook een nuttig nieuw attribuut is required, dat aangeeft dat een formulier niet gesubmit kan worden als een bepaald veld leeg blijft. Een krachtig attribuut luistert naar de naam list. Deze maakt het in combinatie met het <datalist>-inputelement mogelijk om een lijst voorkeuzemogelijkheden aan te bieden.

Door het toepassen van de attributen min, max en steppattern ten slotte kan de input van een formulier met regular expressions worden gevalideerd. De syntax is gelijk aan die van regular expressions in javascript.

• Volgende pagina 7. Rich media in html5