Welke soorten input-elementen zijn er in HTML?

De volgende typen input-elementen bestaan:

• text: Enkelregelig tekstveld.
• password: Veld voor het invoeren van wachtwoord, tekens zijn verborgen.
• submit: Knop om het formulier te verzenden.
• reset: Knop om het formulier te resetten.
• radio: Keuzeknop (één uit meerdere).
• checkbox: Selectievakje (één of meerdere uit meerdere).
• button: Gewone knop.
• file: Veld om een bestand te selecteren.
• hidden: Verborgen veld, niet zichtbaar voor de gebruiker, maar wordt meegezonden met het formulier.
• image: Afbeeldingsknop om het formulier te verzenden.

De HTML5-specificatie heeft nieuwe types toegevoegd:

• email: Veld voor het invoeren van een e-mailadres.
• url: Veld voor het invoeren van een URL.
• number: Veld voor het invoeren van een getal.
• range: Schuifregelaar om een numerieke waarde binnen een gegeven bereik te kiezen.
• date: Veld om een datum te selecteren.
• month: Veld om een maand en jaar te selecteren.
• week: Veld om een week en jaar te selecteren.
• time: Veld om een tijd te selecteren.
• datetime-local: Veld om datum en tijd zonder tijdzone te selecteren.
• search: Zoekveld.
• color: Kleurkeuzeknop.
• tel: Veld voor het invoeren van een telefoonnummer.

Voorbeeld van gebruik:

<!-- Enkelregelig tekstveld -->
<input type="text" placeholder="Naam">

<!-- Veld voor het invoeren van wachtwoord -->
<input type="password" placeholder="Wachtwoord">

<!-- Knop om het formulier te verzenden -->
<input type="submit" value="Verzenden">

<!-- Knop om het formulier te resetten -->
<input type="reset" value="Reset">

<!-- Keuzeknoppen -->
<input type="radio" name="gender" value="male"> Man
<input type="radio" name="gender" value="female"> Vrouw

<!-- Selectievakjes -->
<input type="checkbox" name="interests" value="music"> Muziek
<input type="checkbox" name="interests" value="sports"> Sport

<!-- Gewone knop -->
<input type="button" value="Klik mij">

<!-- Bestandsselectieveld -->
<input type="file">

<!-- Verborgen veld -->
<input type="hidden" name="userId" value="123">

<!-- Afbeeldingsknop -->
<input type="image" src="submit.png" alt="Verzenden">

<!-- E-mailveld -->
<input type="email" placeholder="E-mail">

<!-- URL-veld -->
<input type="url" placeholder="Website">

<!-- Nummerveld -->
<input type="number" min="1" max="10">

<!-- Schuifregelaar -->
<input type="range" min="0" max="100">

<!-- Datum -->
<input type="date">

<!-- Maand -->
<input type="month">

<!-- Week -->
<input type="week">

<!-- Tijd -->
<input type="time">

<!-- Datum en tijd (lokaal) -->
<input type="datetime-local">

<!-- Zoeken -->
<input type="search" placeholder="Zoek">

<!-- Kleur kiezen -->
<input type="color">

<!-- Telefoonnummer -->
<input type="tel" placeholder="+31 (xxx) xxx-xx-xx">