Form
Technische opmerkingen:
Een formulier begint altijd met een form
-element. Als een form
-element ongewenst is kan een element met de class .form
worden ingezet. Elke textuele input
en select
zit in een .form-group
. Elk formulier onderdeel is een groep met een label
.
Alle elementen zitten in een fieldset
met een legend
. De legend kan verborgen worden met een .sr-only
. De form submit (en eventueel een form reset) staat buiten de fieldset
.
- Een eventuele toelichting zit in een
p.dso-help-block
. Als er een toelichting is, dient deze met een@aria-describedby
aan de werkvorm gekoppeld te worden. - Een label bij een textuele
input
ofselect
eindigt altijd met een dubbele punt.
Buttons worden uitgelijnd afhankelijk van de context:
- Buttons worden gesorteerd op belangrijkheid van rechts naar links, met de primaire actie aan de rechterkant. Wanneer knoppen gebruikt worden om door een reeks schermen te navigeren, wordt de primaire knop rechts uitgelijnd en de 'terug' actie helemaal links om de navigatie visueel te ondersteunen.
- Uitgezonderd zijn formulieren met één pagina en gerichte taken, buttons links uitlijnen en sorteren op belangrijkheid van links naar rechts.
De uitzonderingen worden met de modifier .dso-single-page
ingezet (op het bovenliggende form
of .form
, of op .dso-form-buttons
zelf).
Zie ook: H91: Using HTML form controls and links
Formuliervalidatie
Het kan zijn dat de gebruiker fouten maakt tijdens het invullen van het formulier. We laten het de gebruiker op twee momenten weten als hij fouten maakt of een verplicht invoerveld overslaat.
Ten eerste wordt een invoerveld gevalideerd als de focus wordt verplaatst. Er verschijnt dan een instructie direct onder het invoerveld. En als tweede op het moment dat de gebruiker op de "submit"-button klikt. Zet dan een samenvatting in een alert boven het formulier. Voorzie tegelijk de fout ingevulde invoervelden van inline validatie. Zet de focus in het eerste foutieve invoerveld. Om snel te kunnen navigeren, wordt er in de alert/samenvatting een lijst met anchor links opgenomen naar de betreffende invoervelden.