HTML biedt verschillende <input> elementen waarmee je verschillende soorten gegevens van gebruikers kunt vastleggen. Laten we enkele veelgebruikte invoertypen verkennen:

email en wachtwoord

• type="email": gebruikt voor e-mailinvoervelden die een geldig e-mailadres vereisen. De browser valideert automatisch het e-mailadres en vraagt de gebruiker om ongeldige invoer te corrigeren;

• type="password": gebruikt voor wachtwoordvelden waarbij de ingevoerde tekst om veiligheidsredenen wordt gemaskeerd. Je kunt ook de attributen minLength en maxLength specificeren om wachtwoordlengtevereisten in te stellen.

nummer

type="number": gebruikt voor numerieke invoer. Je kunt een specifiek bereik definiëren met de min en max attributen en een specifieke stapwaarde instellen met het step attribuut.

telefoon

type="tel": bedoeld voor het invoeren van telefoonnummers, maar het voert geen validatie uit op de invoer. Het is aan de ontwikkelaar om de invoer te valideren en ervoor te zorgen dat het een geldig telefoonnummer is.

checkbox

type="checkbox": stelt de gebruiker in staat om een of meer opties uit vooraf gedefinieerde keuzes te selecteren. Het attribuut checked maakt een selectievakje standaard aangevinkt.

radio

type="radio": maakt een reeks opties waarbij slechts één optie kan worden geselecteerd. Een keuzerondje vertegenwoordigt elke optie, en het kiezen van één deselecteert automatisch de anderen. Elk keuzerondje moet een unieke value-attribuut hebben om het te identificeren.

range

type="range": maakt een schuifregelaar waarmee gebruikers een waarde binnen een specifiek bereik kunnen selecteren. Je kunt min, max, step en value attributen toepassen om het gedrag te definiëren.

Opmerking

JavaScript is niet het onderwerp van deze cursus, dus de logica erachter zal worden overgeslagen.

datum en tijd

• type="date": stelt gebruikers in staat een datum te selecteren uit een kalenderpopup;

• type="time": stelt gebruikers in staat een tijd in te voeren in een 24-uurs formaat;

• type="datetime-local": combineert tijd- en datum invoer.

Voorbeeld:

Opmerking

Voor consistente styling op verschillende apparaten worden vaak kant-en-klare oplossingen gebruikt voor popupkalenders en tijdinvoer.