Zoals we eerder hebben gezien, is het krachtigste element van een formulier de input. Dit element verwacht gegevens van de gebruiker. Laten we ons hierop richten.

Typen invoervelden

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. Waarborgt privacy door de ingevoerde tekens te verbergen.

<input type="password" />

E-mailinvoer

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

<input type="email" />

Telefooninvoer

Gebruikt voor het verzamelen van telefoonnummers van gebruikers. Staat gebruikers toe om telefoonnummers in verschillende formaten in te voeren, inclusief internationale nummers.

<input type="tel" />

Numerieke invoer

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

<input type="number" />

Selectievakje

Maakt het mogelijk voor gebruikers om één of meer opties uit een lijst te selecteren. Geschikt voor situaties waarin meerdere selecties zijn toegestaan, zoals het selecteren 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 te selecteren uit een lijst van onderling exclusieve keuzes. Geschikt voor situaties waarin slechts één optie geselecteerd mag worden, zoals geslachtskeuze of het kiezen van een betaalmethode.

<input type="radio" />

Bestand invoeren

Maakt het mogelijk voor gebruikers om bestanden van hun apparaat te uploaden, te kiezen uit hun lokale bestandssysteem en deze samen met formuliergegevens te verzenden. Deze functie is vooral handig 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. Nuttig voor het vastleggen van geboortedata, afspraakmomenten of evenementenschema's.

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

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

Het valt wellicht op dat het invullen van het formulier niet erg gebruiksvriendelijk is wanneer niet duidelijk is wat er in elk veld wordt gevraagd. Daarom bieden de labels uitkomst.

Labels

Labels (<label>) zijn essentieel voor het koppelen van tekstlabels aan formulierinvoervelden, waardoor toegankelijkheid en gebruiksvriendelijkheid worden verbeterd. Het is van groot belang dat het for-attribuut van het <label> -element overeenkomt met het id -attribuut van het bijbehorende input -element.
Voorbeeld:

<label for="username">Username:</label>
<input type="text" id="username" />

In het bovenstaande voorbeeld:

• Wanneer je op het label Username: klikt, wordt automatisch het bijbehorende invoerveld geselecteerd;
• Het label en de input zijn met elkaar verbonden via respectievelijk de for- en id-attributen;
• Beide attributen, for en id, hebben dezelfde waarde (username).

Het invullen van het formulier vereenvoudigen door labels toe te voegen aan de invoervelden uit het vorige voorbeeld.
Voorbeeld:

Videotutorial