13. Formuliervelden

We bespreken hier de meest voorkomende formuliervelden en de wijze waarop je deze toegankelijk maakt.

Omslag van ''

13.1 Tekstregel

Voorbeeld van een tekstinvoerveld

Doel

Invoer van 1 regel tekst

Voorbeeld

<label for="fname">Voornaam: <input type="text" id="fname" name="firstname">

Een andere mogelijkheid is om het label om de hele code te plaatsen (je gebruikt dan geen label en id):

<label>Voornaam: <input type="text" name="firstname"></label>

Uitleg

Via een for-id-koppeling koppel je het invoerveld aan het label. Dit geeft het invoerveld een toegankelijke naam, namelijk 'Voornaam'.

Fout gebruik

Een veel voorkomende fout is dat het invoerveld te kort is. Zo kan de gebruiker niet goed zijn input controleren.

13.2 Checkbox

Voorbeeld van een checkbox

Functie

Keuzelijst met meerdere antwoorden

Codevoorbeeld

<h2>Uw interesses </h2> <fieldset> <legend>Voor welke e-zines wilt u zich aanmelden? <input id="organisaties" type="checkbox" name="e-zines" value="organisaties"> <label for="organisaties">Kinderopvang (kinderopvangorganisaties)</label> <input id="gemeenten-ggd" type="checkbox" name="e-zines" value="gemeenten-ggd" checked> <label for="gemeenten-ggd">Kinderopvang (gemeenten en GGD</label> <input id="primair" type="checkbox" name="e-zines" value="primair" checked> <label for="primair">Primair onderwijs</label> <input id="vo" type="checkbox" name="e-zines" value="vo"> <label for="vo">Voortgezet onderwijs</label> </fieldset>

Toelichting

  • De verschillende input-mogelijkheden koppel je aan elkaar door een fieldset om de inputs te plaatsen en deze allemaal dezelfde 'name' te geven.
  • De legend gebruik je om een kop boven de keuzes te plaatsen.
  • 'checked' betekent dat de optie is aangevinkt.
  • De standaardlay-out is een vierkant. (Een rondje is voor radiobuttons)
  • Ook hier gebruik je for-id-koppeling om het invoerveld te koppelen aan het label en zo te zorgen voor een toegankelijke naam.

13.3 Radiobutton

Voorbeeld van een radiobutton

Functie

Keuzelijst met maximaal 1 antwoord

Codevoorbeeld

<fieldset> <legend>Gebruik je een rolstoel?</legend> <input type="radio" id="rolstoel-nee" name="rolstoel" value="0" checked /> <label for="rolstoel-nee">Nee <input type="radio" id="rolstoel-ja" name="rolstoel" value="1" /> <label for="rolstoel-ja">Ja</label> </fieldset>

Toelichting

  • Techniek is hier ook: fieldset met legend, for-id-koppeling en checked.
  • Alternatief is dropdown, maar dropdown vraagt iets meer inspanning (extra klik) van de gebruiker.
  • Als een gebruiker eenmaal een keuze heeft gemaakt, kan die deze niet 'unchecken', behalve door een andere keuze te maken. Houd hier rekening mee met het ontwerpen.
    Verkeerde implementatie radiobutton: als niets van toepassing is en je per ongeluk al eentje hebt gekozen, kun je dat niet ongedaan maken

13.4 Dropdown

Voorbeeld van een dropdown
(Bron: Nielsen Norman)

Functie

Selectie van 1 antwoord. Handig bij meer dan 4 opties.

Codevoorbeeld

<fieldset> <legend>All UX Certification Specialties </legend> <input id="interaction" type="radio" name="UCS" value="Interaction"> <label for="interaction">Interaction</label> <input id="management" type="radio" name="UCS" value="Management"> <label for="management">Management</label> <input id="research" type="radio" name="UCS" value="Research"> <label for="research">Research</label> </fieldset>

Toelichting

  • Techniek weer vergelijkbaar met checkbox en radio.
  • Dropdown is pas handig bij 4 of meer opties. Bij minder opties is de radiobutton handiger. Zelfs bij meer dan 4 kan de radiobutton de betere keuze zijn.
  • Het is mogelijk om de opties te bundelen via <optgroup>, maar die functie wordt niet goed ondersteund door screenreaders.

13.5 Datum-invoer met input

Voorbeeld van een datepicker

Functie

Selecteren van een datum

Codevoorbeeld

<input type="date" value="2024-09-24" />

Toelichting

  • Zorg dat deze toetsenbordtoegankelijk is
  • Zorg dat handmatige invoer ook mogelijk is

13.6 Submit

Voorbeeld van submit-veld

Functie

Voor het versturen van een formulier

Codevoorbeeld

<input type="submit" name="bericht_versturen" value="Bericht versturen">

Toelichting

  • Het onderscheid met een gewone link (<a>) is belangrijk: een gewone link is alleen bedoeld om te navigeren en wijzigt niet de front- of back-end van een site
  • Functie is vergelijkbaar met <button>.
  • De 'value' is de tekst die zichtbaar is in de button en is tevens de toegankelijke naam.

13.7 Button

Voorbeeld van een button

Functie

Een button gebruik je om een actie te laten uitvoeren die een verandering geeft in de website. Bijvoorbeeld het toevoegen van een product aan een winkelwagentje.

Codevoorbeeld

<label for="input_discount">Kortingscode</label> <input type="text" id="input_discount" name="discount" size="10" maxlength="255" value="" /> <button type="button" id="discount">Toepassen</button>

Toelichting

  • Voor toegankelijkheid is het verschil tussen een link (<a>) en een button belangrijk. Bij een button verandert er iets aan de front end en/of de back end, bijvoorbeeld het versturen van een formulier. Een link brengt je naar een nieuwe pagina (of andere content op dezelfde pagina).
  • De tekst in het button-element is de toegankelijke naam van de button.
Naar boven