De input-tag

De tag input creëert verschillende elementen van een HTML-formulier: een gewoon invoerveld, een veld voor het invoeren van een wachtwoord, een checkbox (vinkje), radioknoppen (radio), een knop.

De tag input moet binnen de tag form staan. Dit is niet strikt verplicht, maar wel nodig voor het verzenden van gegevens naar de server en de daaropvolgende verwerking via PHP.

Vereist geen sluitende tag.

Attributen

Attribuut	Beschrijving
type	Specificeert het type invoerveld. Zie opties hieronder.
value	Standaardwaarde in het invoerveld. In het geval van een knop specificeert het de tekst ervan. Zie voor meer details het attribuut value.
placeholder	Hint in het invoerveld, zie voor meer details het attribuut placeholder.
name	Naam van het invoerveld. Nodig om de gegevens van het invoerveld in PHP op te halen. Voor een correcte werking van het formulier mogen de namen van de invoervelden niet samenvallen met elkaar (in één formulier). Als ze samenvallen - komen in PHP de gegevens van het invoerveld dat lager in de HTML-code staat aan.
disabled	Blokkeert een formulierelement (niet alleen input, maar vrijwel elk element), zie voor meer details het attribuut disabled.

Waarden van het type-attribuut

Waarde	Beschrijving
text	Creëert een gewoon tekstinvoerveld.
password	Creëert een tekstinvoerveld voor een wachtwoord. Probeer er tekst in te voeren - het wordt weergegeven als sterretjes.
checkbox	Creëert een checkbox (vinkje). Zie voor meer details checkbox.
radio	Creëert een radioknop. Zie voor meer details radio.
hidden	Creëert een verborgen input, die niet zichtbaar is op het scherm, maar wel de gegevens in het attribuut value naar de server zal verzenden.
button	Creëert een knop. Klikken op deze knop zal het formulier niet naar de server verzenden. Het kan worden gebruikt binnen een link of via JavaScript. Standaard heeft de knop geen tekst (voorbeeld knop zonder tekst: ), de tekst wordt ingesteld met value. Zie ook de tag button, die ook een knop maakt.
submit	Creëert een knop die gegevens naar de server zal verzenden. De knoptekst is afhankelijk van de browser, deze kan worden gewijzigd met value. Zie ook de tag button, die ook een knop maakt.
reset	Creëert een knop die het ingevulde formulier wist. De knoptekst is afhankelijk van de browser, deze kan worden gewijzigd met value.
file	Creëert een knop voor bestandsselectie. Het is verboden het ontwerp van deze knop te wijzigen via CSS (hoewel er sluwe manieren zijn). Als u zo'n veld in een formulier nodig heeft, dan moet de tag form het attribuut enctype hebben met de waarde multipart/form-data.

Nieuwe waarden voor het type-attribuut in HTML5

Deze waarden voor het attribuut zijn nieuw, ze verschenen pas in HTML5, daarom werken ze in sommige browsers mogelijk niet of werken ze verschillend in verschillende browsers.

In het geval dat de browser de inhoud van het attribuut type niet kan begrijpen (bijvoorbeeld als het niet wordt ondersteund of verkeerd is ingevoerd), zal het het element beschouwen als een gewoon tekst input-veld, alsof in type de waarde text staat.

Bekijk de onderstaande voorbeelden in verschillende browsers. Probeer tekst in te voeren in de inputs en klik op de verzendknop. Als de tekst onjuist is of het veld leeg is - geeft de browser een foutmelding. Als u bijvoorbeeld in een veld van het type email een onjuist e-mailadres invoert - laat de browser het formulier niet verzenden en geeft een foutmelding (de tekst van de foutmelding en het uiterlijk ervan kan niet worden gewijzigd via html css). Als het veld leeg is - geeft de browser ook een foutmelding, dit wordt bereikt met het attribuut required:

Waarde	Beschrijving
email
number
url
tel
search
color
date
month
week
datetime
datetime-local
range

Zie ook