HTML -invoerkenmerken
Dit hoofdstuk beschrijft de verschillende attributen voor het HTML- <input>element.
Het waardekenmerk
Het valueinvoerkenmerk specificeert een beginwaarde voor een invoerveld:
Voorbeeld
Invoervelden met initiële (standaard) waarden:
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
Het alleen-lezen kenmerk
Het invoerkenmerk readonlygeeft aan dat een invoerveld alleen-lezen is.
Een alleen-lezen invoerveld kan niet worden gewijzigd (een gebruiker kan er echter naartoe gaan, het markeren en de tekst ervan kopiëren).
De waarde van een alleen-lezen invoerveld wordt verzonden bij het verzenden van het formulier!
Voorbeeld
Een alleen-lezen invoerveld:
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
Het uitgeschakelde kenmerk
Het invoerkenmerk disabledgeeft aan dat een invoerveld moet worden uitgeschakeld.
Een uitgeschakeld invoerveld is onbruikbaar en niet aanklikbaar.
De waarde van een uitgeschakeld invoerveld wordt niet verzonden bij het verzenden van het formulier!
Voorbeeld
Een uitgeschakeld invoerveld:
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
Het maatkenmerk:
Het sizeinvoerkenmerk specificeert de zichtbare breedte, in tekens, van een invoerveld.
De standaardwaarde voor sizeis 20.
Opmerking: het sizeattribuut werkt met de volgende invoertypen: tekst, zoeken, tel, url, e-mail en wachtwoord.
Voorbeeld
Stel een breedte in voor een invoerveld:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" size="50"><br>
<label
for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin"
size="4">
</form>
Het kenmerk maxlength
Het maxlengthinvoerkenmerk specificeert het maximum aantal toegestane tekens in een invoerveld.
Opmerking: Als a maxlengthis ingesteld, accepteert het invoerveld niet meer dan het opgegeven aantal tekens. Dit kenmerk geeft echter geen feedback. Dus als u de gebruiker wilt waarschuwen, moet u JavaScript-code schrijven.
Voorbeeld
Stel een maximale lengte in voor een invoerveld:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" size="50"><br>
<label
for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin"
maxlength="4" size="4">
</form>
De min en max attributen
De invoer minen maxattributen specificeren de minimum- en maximumwaarden voor een invoerveld.
De minen maxattributen werken met de volgende invoertypes: nummer, bereik, datum, datetime-local, maand, tijd en week.
Tip: Gebruik de kenmerken max en min samen om een reeks wettelijke waarden te maken.
Voorbeeld
Stel een maximale datum, een minimale datum en een reeks wettelijke waarden in:
<form>
<label for="datemax">Enter a date before
1980-01-01:</label>
<input type="date" id="datemax" name="datemax"
max="1979-12-31"><br><br>
<label for="datemin">Enter a date
after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin"
min="2000-01-02"><br><br>
<label for="quantity">Quantity
(between 1 and 5):</label>
<input type="number" id="quantity"
name="quantity" min="1" max="5">
</form>
Het meervoudige attribuut
Het invoerkenmerk multiplegeeft aan dat de gebruiker meer dan één waarde in een invoerveld mag invoeren.
Het multiplekenmerk werkt met de volgende invoertypen: e-mail en bestand.
Voorbeeld
Een veld voor het uploaden van bestanden dat meerdere waarden accepteert:
<form>
<label for="files">Select files:</label>
<input
type="file" id="files" name="files" multiple>
</form>
Het patroonkenmerk:
Het patterninvoerkenmerk specificeert een reguliere expressie waarmee de waarde van het invoerveld wordt gecontroleerd wanneer het formulier wordt verzonden.
Het patternattribuut werkt met de volgende invoertypen: tekst, datum, zoeken, url, tel, e-mail en wachtwoord.
Tip: gebruik het attribuut globale titel om het patroon te beschrijven om de gebruiker te helpen.
Tip: Leer meer over reguliere expressies in onze JavaScript-tutorial.
Voorbeeld
Een invoerveld dat slechts drie letters mag bevatten (geen cijfers of speciale tekens):
<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>
Het placeholder-attribuut
Het placeholderinvoerkenmerk specificeert een korte hint die de verwachte waarde van een invoerveld beschrijft (een voorbeeldwaarde of een korte beschrijving van het verwachte formaat).
De korte hint wordt weergegeven in het invoerveld voordat de gebruiker een waarde invoert.
Het placeholderattribuut werkt met de volgende invoertypen: tekst, zoeken, url, tel, e-mail en wachtwoord.
Voorbeeld
Een invoerveld met een tijdelijke aanduiding-tekst:
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
Het vereiste attribuut
Het invoerkenmerk requiredgeeft aan dat een invoerveld moet worden ingevuld voordat het formulier wordt verzonden.
Het requiredattribuut werkt met de volgende invoertypen: tekst, zoeken, url, tel, e-mail, wachtwoord, datumkiezers, nummer, selectievakje, radio en bestand.
Voorbeeld
Een verplicht invoerveld:
<form>
<label for="username">Username:</label>
<input
type="text" id="username" name="username" required>
</form>
Het stapkenmerk
Het stepinvoerkenmerk specificeert de wettelijke nummerintervallen voor een invoerveld.
Voorbeeld: als step = "3", kunnen wettelijke getallen -3, 0, 3, 6, enz. zijn.
Tip: Dit kenmerk kan samen met de kenmerken max en min worden gebruikt om een reeks wettelijke waarden te creëren.
Het stepattribuut werkt met de volgende invoertypes: nummer, bereik, datum, datetime-local, maand, tijd en week.
Voorbeeld
Een invoerveld met gespecificeerde wettelijke nummerintervallen:
<form>
<label for="points">Points:</label>
<input
type="number" id="points" name="points" step="3">
</form>
Opmerking: invoerbeperkingen zijn niet onfeilbaar en JavaScript biedt vele manieren om illegale invoer toe te voegen. Om de invoer veilig te beperken, moet deze ook door de ontvanger (de server) worden gecontroleerd!
Het autofocuskenmerk
Het invoerkenmerk autofocusgeeft aan dat een invoerveld automatisch de focus moet krijgen wanneer de pagina wordt geladen.
Voorbeeld
Laat het invoerveld "Voornaam" automatisch de focus krijgen wanneer de pagina wordt geladen:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
De hoogte en breedte Attributen:
De invoer heighten widthattributen specificeren de hoogte en breedte van een <input
type="image">element.
Tip: Geef altijd zowel de hoogte- als de breedte-attributen voor afbeeldingen op. Als hoogte en breedte zijn ingesteld, wordt de benodigde ruimte voor de afbeelding gereserveerd wanneer de pagina wordt geladen. Zonder deze attributen kent de browser de grootte van de afbeelding niet en kan hij er niet de juiste ruimte voor reserveren. Het effect is dat de pagina-indeling verandert tijdens het laden (terwijl de afbeeldingen worden geladen).
Voorbeeld
Definieer een afbeelding als de verzendknop, met de kenmerken hoogte en breedte:
<form>
<label for="fname">First name:</label>
<input
type="text" id="fname" name="fname"><br><br>
<label for="lname">Last
name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
Het lijstkenmerk
Het input - listattribuut verwijst naar een <datalist>element dat vooraf gedefinieerde opties voor een <input>-element bevat.
Voorbeeld
Een <input> element met vooraf gedefinieerde waarden in een <datalist>:
<form>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Het automatisch aanvullen-kenmerk
Het invoerkenmerk autocompletegeeft aan of een formulier of een invoerveld autocomplete aan of uit moet hebben.
Met Autocomplete kan de browser de waarde voorspellen. Wanneer een gebruiker in een veld begint te typen, moet de browser opties weergeven om het veld in te vullen, gebaseerd op eerder getypte waarden.
Het autocompleteattribuut werkt met <form>en de volgende <input>typen: tekst, zoeken, url, tel, e-mail, wachtwoord, datepickers, bereik en kleur.
Voorbeeld
Een HTML-formulier met automatisch aanvullen aan en uit voor één invoerveld:
<form action="/action_page.php" autocomplete="on">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname"
name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>
Tip: In sommige browsers moet u mogelijk een autocomplete-functie activeren om dit te laten werken (kijk onder "Voorkeuren" in het browsermenu).
HTML-oefeningen
HTML-formulier en invoerelementen
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
Bezoek onze HTML Tag Reference voor een volledige lijst van alle beschikbare HTML-tags .