De autocompletiefunctie is inmiddels een veelgebruikte functie op internet. Wanneer je iets invoert in een formulier, bieden de browsers - indien de functie is ingeschakeld en door de browser wordt ondersteund - een lijst met woorsuggesties aan.
Dergelijke toepassingen kunnen nu zeer eenvoudig worden geïmplementeerd. Hiervoor wijs je het input-element het attribuut autocomplete toe.
<input type="text" autocomplete="on" />
Met de waarde on wordt de autocompletie voor dit veld geactiveerd. Vanaf dat moment onthoudt de browser de waarden die zijn ingevoerd in het veld en biedt deze later aan via een vervolgkeuzelijst. Zo kunnen formulieren aanzienlijk sneller worden ingevuld.
Nu is dit gedrag niet altijd gewenst voor elk veld. In zulke gevallen kan de autocompletie expliciet worden uitgeschakeld. Hiervoor wijs je het attribuut autocomplete de waarde off toe.
<input type="text" autocomplete="off" />
Als alternatief kan ook het form-element het autocomplete-attribuut bevatten. Afhankelijk van de waarde on of off wordt de autocompletiefunctie voor het hele formulier ingeschakeld of uitgeschakeld.
<form autocomplete="on"> .. </form>
Als tegenstrijdige informatie wordt verstrekt binnen het formulier, dan overrulen deze.
<form autocomplete="on"> Naam: <input type="text" name="vname" autocomplete="off" /><br /> Voornaam: <input type="text" name="nname" /><br /> Postcode: <input type="text" name="plz" /><br /> Plaats: <input type="text" name="ort" /> </form>
In dit voorbeeld zou de autocompletie op alle formulierenvelden worden toegepast, omdat in het inleidende form-element de waarde van autocomplete is ingesteld op on. De uitzondering is hier alleen het vname-veld. Want voor dit veld is het automatisch aanvullen expliciet uitgeschakeld.
Om de autocompletiefunctie te laten werken, moet deze functie worden ondersteund door de specifieke browser en mag deze niet zijn uitgeschakeld. Bovendien worden in de suggestielijst alleen waarden weergegeven die eerder zijn ingevoerd.
Om daadwerkelijk invloed te kunnen uitoefenen op de waarden in de suggestielijst, is met HTML5 het datalist-element geïntroduceerd. Dit element heeft geen visuele uitvoer in de browser. Met de onderliggende option-elementen kunnen waarden voor de suggestielijsten worden gedefinieerd. Een voorbeeld:
<div> Taal: <br /> <input type="text" autocomplete="on" list="sprache" /> </div> <datalist id="sprache"> <option value="HTML5"></option> <option value="XHTML"></option> <option value="PHP"></option> <option value="JavaScript"></option> </datalist>
Met het list-attribuut van het input-element wordt een logische verbinding gemaakt tussen het invoerveld en het datalist-element. Hiervoor moeten dezelfde waarden worden gebruikt bij list en bij het id-attribuut van het datalist-element.
De focus instellen
Een formulierenveld kan automatisch de focus krijgen bij het laden van de pagina. Een dergelijke functie kom je bijvoorbeeld tegen op de startpagina van Google. Wanneer deze pagina wordt geladen, kun je meteen de zoekterm invoeren, zonder eerst de cursor handmatig in het zoek-/invoerveld te hebben geplaatst.
Voor dergelijke gevallen biedt HTML5 het autofocus-attribuut. Dit attribuut zorgt ervoor dat het formulierenveld dat hiermee is uitgerust automatisch de focus krijgt bij het laden van de pagina.
Een voorbeeld:
<form> <input name="suchfeld" autofocus="autofocus" /> <input type="submit" value="Zoeken" /> </form>
Browsers die het autofocus-attribuut niet kennen, negeren het eenvoudig. Dit negeren heeft geen negatieve gevolgen (waarbij het veld dan vanzelfsprekend niet gefocust wordt).
Invoer controleren
Tot dusver zijn formulierinput met HTML-standaardmiddelen alleen niet te controleren. Als je bijvoorbeeld wilde controleren of een gebruiker daadwerkelijk een e-mailadres heeft ingevoerd in een formulier, moest je meestal terugvallen op JavaScript of PHP. In HTML5 zijn dergelijke "kunstgrepen" niet langer nodig. Want vanaf nu bevat HTML een validatie-API. En die is zeker de moeite waard. Met zeer weinig inspanning kunnen formulierinput vanaf nu worden gecontroleerd.
HTML5 heeft enkele regels waarmee wordt bepaald op welke manier velden worden gevalideerd. Zo worden bijvoorbeeld invoervelden van het type email gecontroleerd op een syntactisch correct e-mailadres.
• url - controleert op URL
• email - controleert op e-mailadres
• range - controleert op zwevendekommagetallen
• number - controleert op zwevendekommagetallen
Om een veld als verplicht veld aan te duiden, wordt het attribuut required eraan toegewezen.
<input id="vname" name="vname" type="text" required="required" />
Een veld dat op deze manier is gemarkeerd, moet worden ingevuld en mag dus niet leeg zijn.
Maar let op: om velden te valideren, moeten bepaalde voorwaarden worden vervuld.
• Het element moet de attribuutnaam name toegewezen krijgen.
• Het element moet binnen een form-element staan, dus zich binnen een HTML-formulier bevinden. Als alternatief kan de verbinding met het formulier ook worden gemaakt via het attribuut form.
• Het element mag niet de attributen readonly of disabled hebben.
Het correcte gebruik zou er dus als volgt uit zien:
<form action="form.php">
<input id="vname" name="vname" type="text" required="required" />
<input type="submit" />
</form>
Hier zou de browser controleren of het veld is ingevuld. Als het veld leeg is en er toch wordt geprobeerd het formulier te verzenden, zou de browser nu een foutmelding moeten geven.
In deze reeks is al meerdere malen gewezen op de formulier veldtypen email, range, number, tel en url. Deze velden worden niet alleen gecontroleerd op het bevatten van een waarde, maar ook op de juistheid van de ingevoerde waarde.
<form action="form.php">
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Bij velden van het type email wordt bijvoorbeeld gecontroleerd of de ingevoerde waarde daadwerkelijk een syntactisch correct e-mailadres is. Als dat niet het geval is, geeft de browser een foutmelding.
De browsers zijn verantwoordelijk voor het weergeven van de foutmeldingen.
Velden niet automatisch laten controleren
Niet in alle gevallen is automatische validatie van de invoer wenselijk. Als u de validatie van het hele formulier wilt uitschakelen, kent u het inleidende form-element het attribuut novalidate toe.
<form action="form.php" novalidate>
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Als alternatief kan het attribuut formnovalidate aan een verzendknop worden toegevoegd. Dit is bijvoorbeeld interessant als u naast een verzendknop ook een knop voor het tussentijds opslaan van het formulier aanbiedt.
<form action="form.cgi" method="post">
<input id="email" name="email" type="email" />
<input type="submit" name="submit" value="Verzenden" />
<input type="submit"
formnovalidate="formnovalidate" value="Opslaan" />
<input type="submit"
formnovalidate="formnovalidate" value="Uitloggen" />
</form>
In dit geval wordt het formulier alleen gevalideerd via de eerste verzendknop. De andere twee dienen voor het opslaan en uitloggen. Validatie is in deze gevallen niet nodig.
