Het HTML-element <input> is het basiscomponent voor het vastleggen van gebruikersinvoer in webformulieren.
Invoertypen
Tekstuele en Semantische Typen
| Type | Beschrijving |
|---|---|
text |
Platte tekst op een enkele regel |
password |
Gemaskeerd wachtwoordveld |
email |
E-mailadres met automatische browservalidatie |
url |
Invoer van absolute URL |
tel |
Telefoonnummer (opent cijfertoetsenbord op mobiel) |
search |
Zoekveld met wisknop |
Numerieke en Kwantitatieve Typen
| Type | Beschrijving |
|---|---|
number |
Nummerveld met stapgrootte (min, max, step) |
range |
Schuifregelaar voor geschatte waarde |
Datum- en Tijdtypen
| Type | Beschrijving |
|---|---|
date |
Kalenderdatumkiezer (jaar, maand, dag) |
time |
Tijdkiezer (uren, minuten) |
datetime-local |
Lokale datum en tijd zonder tijdzone |
month |
Kiezer voor jaar en maand |
week |
Kiezer voor jaar en ISO-weeknummer |
Selectie en Acties
| Type | Beschrijving |
|---|---|
checkbox |
Selectievakje of meervoudige keuze |
radio |
Exclusieve keuze binnen een radiogroep |
color |
Kleurkiezer-palet |
file |
Bestandsupload (accept, multiple) |
hidden |
Verborgen waarde die met het formulier meegaat |
submit |
Knop om formulier te verzenden |
reset |
Zet alle velden terug naar standaardwaarden |
button |
Algemene klikbare knop |
Belangrijke Validatie-attributen
| Attribuut | Gedrag |
|---|---|
required |
Verhindert verzenden als het veld leeg is |
pattern="[A-Za-z0-9]+" |
Reguliere expressie waaraan invoer moet voldoen |
min="1" max="100" |
Minimum- en maximumlimieten voor getallen of datums |
step="0.5" |
Geldige stapgrootte voor getallen |
minlength="5" maxlength="20" |
Minimale en maximale tekenlengte |
placeholder="..." |
Tijdelijke instructietekst |
readonly |
Verhindert bewerken maar verzendt de waarde |
disabled |
Schakelt veld uit en verzendt waarde niet |
autofocus |
Focust veld direct bij het laden |
Volledig Formuliervoorbeeld
<form action="/api/submit" method="POST">
<label for="user-email">E-mailadres:</label>
<input type="email" id="user-email" name="email" required placeholder="[email protected]" />
<label for="user-password">Wachtwoord (min. 8 tekens):</label>
<input type="password" id="user-password" name="password" required minlength="8" />
<label for="user-age">Leeftijd:</label>
<input type="number" id="user-age" name="age" min="18" max="120" step="1" />
<label>
<input type="checkbox" name="terms" required />
Ik accepteer de voorwaarden
</label>
<input type="submit" value="Registreren" />
</form>