Formuliervelden vormen de belangrijkste methode voor gebruikers om informatie in te voeren. HTML biedt veel verschillende invoertypen, afhankelijk van welke gegevens nodig zijn.

Veelvoorkomende invoertypen

Tekstinvoer

Ontworpen voor het invoeren van 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" />

Telefooninvoer

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 algemene 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 geslachtskeuze of het kiezen van een betaalmethode.

<input type="radio" />

Bestand invoer

Hiermee kunnen gebruikers bestanden uploaden vanaf hun apparaat, kiezen uit hun lokale bestandssysteem en deze samen met formuliergegevens indienen. Deze functie is vooral handig bij het toevoegen van documenten of afbeeldingen.

<input type="file" />

Datum invoer, Tijd invoer en DatumTijd invoer

Hiermee kunnen gebruikers datums, tijden of beide invoeren. 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 je niet begrijpt wat er in elk veld wordt gevraagd. Daarom komen de labels ons te hulp.