Gebruik van Formulierinvoervelden

Formuliervelden zijn de belangrijkste manier waarop gebruikers informatie invoeren. HTML biedt veel verschillende invoertypen, afhankelijk van welke gegevens nodig zijn.

Veelvoorkomende invoertypen

Tekstinvoer

Ontworpen voor korte tekstuele gegevens, zoals gebruikersnamen, e-mailadressen of korte berichten.

<input type="text" />

Wachtwoordinvoer

Gebruikt voor het invoeren van wachtwoorden, waarbij tekens worden gemaskeerd om veiligheidsredenen.

<input type="password" />

E-mailinvoer

Gebruikt voor het verzamelen van e-mailadressen van gebruikers. Voert client-side validatie uit om te controleren of de ingevoerde waarde een geldig e-mailformaat heeft.

<input type="email" />

Telefoonnummerinvoer

Gebruikt voor het verzamelen van telefoonnummers van gebruikers.

<input type="tel" />

Numeriek invoerveld

Gebruikt voor het verzamelen van numerieke gegevens van gebruikers. Biedt een numeriek toetsenbord op mobiele apparaten.

<input type="number" />

Selectievakje

Maakt het mogelijk voor gebruikers om één of meerdere opties uit een lijst te selecteren. Geschikt voor situaties waarin meerdere selecties zijn toegestaan, zoals het kiezen van meerdere items uit een lijst of het akkoord gaan met voorwaarden.

<input type="checkbox" />

Keuzerondje

Maakt het mogelijk voor gebruikers om één optie uit een lijst van onderling exclusieve keuzes te selecteren. Geschikt voor situaties waarin slechts één optie geselecteerd mag worden, zoals geslachtsselectie of het kiezen van een betaalmethode.

<input type="radio" />

Bestand invoeren

Maakt het mogelijk voor gebruikers om bestanden vanaf hun apparaat te uploaden, te kiezen uit hun lokale bestandssysteem en deze samen met formuliergegevens te verzenden. Deze functie is bijzonder nuttig bij het toevoegen van documenten of afbeeldingen.

<input type="file" />

Datumveld, Tijdveld en DatumTijd-veld

Maakt het mogelijk voor gebruikers om datums, tijden of beide in te voeren. Biedt gebruiksvriendelijke interfaces voor het selecteren van datums en tijden.

<input type="date" />
<input type="time" />
<input type="datetime-local" />

Voer iets in de velden in en er worden verschillende opties voorgesteld. Maak je geen zorgen, er worden geen gegevens verzameld.

Het invullen van het formulier is mogelijk niet erg handig wanneer niet duidelijk is wat er in elk veld wordt gevraagd. Daarom komen labels ons te hulp.