Form field

Gebruik het form field component om een alle onderdelen van een formulierveld in te verzamelen: het label, de form control, eventueel een extra beschrijving of de status en eventueel een validatiemelding of foutmelding.

De volgende componenten zijn vaak onderdeel van een form field:

• form label component
• form field description component met extra beschrijving
• form field description component met een validatiemelding
• een form control component zoals bijvoorbeeld:
  • textbox component
  • textarea component
  • checkbox component
  • radio button component
  • form select component
  • etcetera
• form field description component met een foutmelding
• form field description component status van component

HTML

Gebruik een element <div> element voor formuliervelden met één form control. Een formulierveld moet meerdere <p> elementen kunnen bevatten, gebruik daarom geen <p> element voor de form field. Je moet geen landmark role gebruiken voor een formulierveld (dus geen <section>) element.

Voor formuliervelden met meerdere form controls mag je een <fieldset> element gebruiken, bijvoorbeeld voor: jaar, maand en dag. Voor CSS is het handig om dan nog steeds een <div> om de fieldset heen te hebben: <div><fieldset>...</fieldset></div>.

Gebruikte termen

• form komt van <form> in HTML en role="form" in WAI-ARIA.
• field komt van <fieldset> in HTML.
• invalid komt van aria-invalid in WAI-ARIA.
• radio komt van <input type="radio"> in HTML.
• checkbox komt van <input type="checkbox"> in HTML.
• label komt van <label> in HTML en aria-labelledby in WAI-ARIA.
• description komt van aria-describedby in WAI-ARIA.

Relevante WCAG regels

• WCAG eis 2.4.6: de tekst van het label moet duidelijk zijn
• WCAG eis 3.3.9: gebruik niet een formulierveld voor informatie die de gebruiker eerder al heeft ingevuld.
  • Vraag gebruikers niet twee keer achter elkaar identieke gegevens in te vullen, bijvoorbeeld om typfouten te herkennen en daarmee fouten te voorkomen. Bied liever een mogelijkheid aan om de gegevens te controleren als laatste stap.
  • Vul bestaande gegevens in als standaardwaarde wanneer je de gegevens al hebt maar je graag zeker wilt weken of de oude gegevens nog juist zijn.