U bent hier:

  1. Handleiding
  2. Ontwikkeling
  3. Formulieren
  4. Invoervelden en labels

Formulieren: Invoervelden en labels

In formulieren gaan invoervelden regelmatig vergezeld van ‘labels’: tekstuele verklaringen van wat voor soort informatie voor een specifiek invoerveld van de bezoeker wordt verwacht.

Dit gaat ook op voor andere elementen in een formulier, zoals selectiemenu’s, checkboxes, grote tekstvelden, enzovoort. Voor het gemak worden deze hier allemaal invoervelden genoemd.

Labels associëren met formuliervelden

Sommige schermleesprogramma’s en brailleleesregels hebben moeite met het associëren van aangrenzende teksten met invoervelden. Deze teksten worden door webontwikkelaars namelijk niet expliciet in verband gebracht met invoervelden in de markup: de bezoeker moet dat zelf visueel doen.

Deze schermleesprogramma’s dragen de teksten weliswaar voor in een lineaire volgorde, gevolgd door de invoervelden, maar de gebruiker zal ernaar moeten raden welk veld voor welke soort invoer staat. Het navigeren tussen deze velden in een niet-lineaire volgorde maakt begrip van het formulier soms zelfs onmogelijk.

Voor deze situatie is het label element bedacht. Dankzij deze markup kan de webontwikkelaar in een formulier een tekst (of afbeelding) expliciet met een invoerveld associëren. Dit kan op twee manieren.

Het invoerveld binnen de label-markup (HTML)

<label>Uw naam: <input type="text" ...></label>

Het invoerveld en de label-markup van elkaar gescheiden (HTML)

<label for="naam">Uw naam:</label>
  <input id="naam" type="text" ...>

Deze laatste manier is erg praktisch wanneer de inhoud van het formulier in een tabel is geplaatst en de label-tekst en het invoerveld in aparte cellen voorkomen.

Gebruik het label element om tekst expliciet met een invoerveld in een formulier te associëren.

Richtlijn R-pd.13.1

De webontwikkelaar moet erop letten dat het tekstlabel alleen met het invoerveld geassocieerd kan worden door het gebruik van het for attribuut op de <label> tag. Op het invoerveld gebruikt de webontwikkelaar dan een id attribuut met een unieke waarde (elk id attribuut in de broncode van een pagina moet een unieke waarde hebben).

Label-teksten zijn klikbaar

Bovendien maakt het gebruik van label markup de linktekst in een aantal moderne browsers de linktekst klikbaar. Zodra een bezoeker op de linktekst klikt, wordt de cursor op het geassocieerde invoerveld geplaatst. Bezoekers hoeven hierdoor minder precies te ‘richten’ met hun muispijl.

Deze functionaliteit werkt net als het eigen besturingssysteem: ook daar kan op label-tekst geklikt worden om de cursor in invoervelden te plaatsen of check-boxes af te vinken.

(uitleg)


 Webrichtlijnen versie 1.3, november 2007.