HTML <input> tag

Definitie en gebruik

<input> De tag definieert een invoerveld waar de gebruiker gegevens kan invoeren.

<input> Het element is de belangrijkste formulierelement.

<input> De weergave van het element kan op meerdere manieren zijn, afhankelijk van type eigenschap.

Hier zijn verschillende types invoer:

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">(Standaardwaarde)
  • <input type="time">
  • <input type="url">
  • <input type="week">

Raadpleeg type eigenschapOm te bekijken welke voorbeelden er zijn voor elk type invoer!

Voorbeeld

HTML formulier dat drie invoervelden bevat; twee tekstvelden en een indieningsknop:

<form action="/action_page.php">
  <label for="fname">Voornaam：</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Achternaam：</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Indienen">
</form>

Probeer het zelf uit

Tips en opmerkingen

Tip:Gebruik altijd de <label> tag om de volgende elementen te labelen:

<input type="text">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="password">

Eigenschap

Eigenschap Waarde Beschrijving
accept
  • Bestandsextensie
  • audio/*
  • video/*
  • image/*
  • Media type

Bepaalt het type bestand dat wordt ingediend via het bestandsupload.

Bepaalt welke bestandstypen de gebruiker kan kiezen uit het bestandsselectie dialoogvenster (alleen van toepassing op type="file").
alt Tekst Bepaalt de alternatieve tekst voor het beeld (alleen van toepassing op type="image").
autocomplete
  • on
  • off
 Bepaalt of het <input> element automatische voltooiing moet inschakelen.
autofocus autofocus Bepaalt dat het <input> element automatisch moet worden gefocust bij het laden van de pagina.
checked checked Bepaalt dat het <input> element vooraf moet worden geselecteerd bij het laden van de pagina (van toepassing op type="checkbox" of type="radio").
dirname inputname.dir Bepaalt de tekstrichting die moet worden ingediend.
disabled disabled Bepaalt dat het <input> element moet worden uitgeschakeld.
form Formulier id Bepaalt het formulier waarvan het <input> element deel uitmaakt.
formaction URL Bepaalt de URL die wordt gebruikt om de bestanden van de invoercontrole elementen te verwerken bij het indienen van het formulier (van toepassing op type="submit" en type="image").
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
 Bepaalt hoe de formuliergegevens moeten worden gecodeerd wanneer ze naar de server worden verzonden (van toepassing op type="submit" en type="image").
formmethod
  • get
  • post
 Definieert de HTTP-methode die wordt gebruikt om gegevens naar de actie-URL te verzenden (van toepassing op type="submit" en type="image").
formnovalidate formnovalidate Definieert dat het formulier niet moet worden geverifieerd bij het indienen van het formulier.
formtarget
  • _blank
  • _self
  • _parent
  • _top
Naam van het kader 		Bepaalt waar de reactie na het indienen van het formulier wordt weergegeven (van toepassing op type="submit" en type="image").
height Pixel Bepaalt de hoogte van het <input>-element (alleen van toepassing op type="image").
list datalist_id Citeert de <datalist>-element die de vooraf gedefinieerde opties van het <input>-element bevat.
max
  • cijfers
  • Datum
 Bepaalt de maximale waarde van het <input>-element.
maxlength cijfers Bepaalt het maximale aantal tekens dat het <input>-element mag bevatten.
min
  • cijfers
  • Datum
 Bepaalt de minimale waarde van het <input>-element.
minlength cijfers Bepaalt het minimaal aantal tekens dat nodig is in het <input>-element.
multiple multiple Bepaalt dat meerdere waarden kunnen worden ingevoerd in het <input>-element.
name Tekst Bepaalt de naam van het <input>-element.
pattern Reguliere expressie Bepaalt de reguliere expressie om de waarde van het <input>-element te controleren.
placeholder Tekst Bepaalt een korte tip voor de verwachte waarde van het <input>-element.
popovertarget Element id Bepaalt het element dat moet worden opgeroepen (alleen van toepassing op type="button").
popovertargetaction
  • hide
  • show
  • toggle
 Bepaalt wat er gebeurt wanneer je op de knop klikt (alleen van toepassing op type="button").
readonly readonly Bepaalt dat het invoerveld alleen-lezen is.
required required Bepaalt dat de invoervelden moeten worden ingevuld voordat het formulier wordt ingediend.
size cijfers Bepaalt de breedte van het <input>-element (in tekens).
src URL URL van het afbeelding die wordt gebruikt als knop (alleen van toepassing op type="image").
step
  • cijfers
  • any
 Bepaalt de afstand tussen geldige getallen in het invoerveld.
type
  • button
  • checkbox
  • color
  • date
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
  • password
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week
 Bepaalt het type van het <input>-element dat moet worden weergegeven.
value Tekst Bepaalt de waarde van het <input>-element.
width Pixel Bepaalt de breedte van het <input>-element (alleen van toepassing op type="image").

Algemene eigenschappen

<input> De tag ondersteunt ook Algemene eigenschappen in HTML.

Evenementen-eigenschappen

<input> De tag ondersteunt ook Evenementen-eigenschappen in HTML.

Standaard CSS-instellingen

Geen.

Browserondersteuning

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Ondersteuning Ondersteuning Ondersteuning Ondersteuning Ondersteuning

Gerelateerde pagina's

HTML-tutorial:

HTML DOM-referencegids: