Invulveld

Eén veld van een formulier, compleet met label, hulptekst en automatische controle: verplichte velden, e-mailadressen en getallen worden vanzelf gecontroleerd voordat het formulier verstuurd kan worden. De technische naam is FormField.

Gebruik dit block voor elk los invoerveld binnen een Form: tekst, e-mail, getallen of een keuzeveld. De combinatie van label, hulptekst en validatie in één component voorkomt dat je deze drie dingen los moet synchroniseren wanneer een veld wijzigt.

Een veelgemaakte fout is een verplicht veld zonder hulptekst: de bezoeker ziet dan pas bij het versturen dat er iets ontbreekt. Zet daarom bij velden met een specifiek format, zoals een postcode of telefoonnummer, altijd een helperText die het gewenste formaat toont vóórdat er een foutmelding nodig is.

Gebruiksscenario's per site-type

Op een webshop gebruik je FormField voor zowel simpele velden (naam, e-mail) als velden met een specifiek format, zoals een postcode of een ordernummer bij een retouraanvraag. Een portfolio-site houdt het intakeformulier vaak bewust kort: naam, e-mail en een tekstveld voor de projectomschrijving, elk als los FormField. Bij een zakelijke dienstverlener met een uitgebreider offerteformulier worden meerdere FormField-elementen gecombineerd tot een formulier met bedrijfsnaam, kvk-nummer, contactpersoon en een vrij tekstveld voor de aanvraag.

Toegankelijkheid en validatie

Elk veld krijgt automatisch een gekoppeld label, wat essentieel is voor schermlezers: zonder correcte koppeling weet een screenreader-gebruiker niet welk veld hij invult. Zet required alleen op velden die echt noodzakelijk zijn voor de afhandeling — elk extra verplicht veld is een drempel die de kans op een afgeronde inzending verlaagt, zeker op mobiel waar typen meer moeite kost.

Een veelgemaakte fout is het type van een veld niet laten overeenkomen met de invoer: een telefoonnummer als los tekstveld in plaats van met type='tel' zorgt ervoor dat mobiele bezoekers niet automatisch het numerieke toetsenbord krijgen. Combineer dit block altijd binnen een Form-element — buiten die context wordt de validatie niet uitgevoerd en komt een inzending nergens terecht. Zie ook de kennisbank over formulieren en validatie voor de volledige lijst ondersteunde veldtypes.

Voorbeeld

De prompt voor dit voorbeeld

Voeg aan het formulier een verplicht e-mailveld toe met de hulptekst 'We gebruiken dit alleen om te antwoorden.'