HTML- formulierelementen
Dit hoofdstuk beschrijft alle verschillende HTML-formulierelementen.
De HTML <form> Elementen
Het HTML <form>-element kan een of meer van de volgende formulierelementen bevatten:
-
<input> -
<label> -
<select> -
<textarea> -
<button> -
<fieldset> -
<legend> -
<datalist> -
<output> -
<option> -
<optgroup>
Het <input>-element
Een van de meest gebruikte vormelementen is het <input>element.
Het <input>element kan op verschillende manieren worden weergegeven, afhankelijk van het type
attribuut.
Voorbeeld
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
Alle verschillende waarden van het type
attribuut worden behandeld in het volgende hoofdstuk:
HTML-invoertypen .
Het <label>-element
Het <label>element definieert een label voor verschillende formulierelementen.
Het <label>element is handig voor gebruikers van schermlezers, omdat de schermlezer het label hardop zal voorlezen wanneer de gebruiker zich op het invoerelement concentreert.
Het <label>element helpt ook gebruikers die moeite hebben met het klikken op zeer kleine regio's (zoals keuzerondjes of selectievakjes) - omdat wanneer de gebruiker op de tekst in het <label>element klikt, het keuzerondje/selectievakje wordt omgeschakeld.
Het forattribuut van de <label>tag moet gelijk zijn aan het idattribuut van het <input>
element om ze samen te binden.
Het <select>-element
Het <select>element definieert een vervolgkeuzelijst:
Voorbeeld
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
De <option>elementen definiëren een optie die kan worden geselecteerd.
Standaard is het eerste item in de vervolgkeuzelijst geselecteerd.
Om een vooraf geselecteerde optie te definiëren, voegt u het selectedkenmerk toe aan de optie:
Voorbeeld
<option value="fiat" selected>Fiat</option>
Zichtbare waarden:
Gebruik het sizeattribuut om het aantal zichtbare waarden op te geven:
Voorbeeld
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Meerdere selecties toestaan:
Gebruik het multipleattribuut om de gebruiker meer dan één waarde te laten selecteren:
Voorbeeld
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Het <textarea>-element
Het <textarea>element definieert een invoerveld met meerdere regels (een tekstgebied):
Voorbeeld
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
Het rowsattribuut specificeert het zichtbare aantal regels in een tekstgebied.
Het colsattribuut specificeert de zichtbare breedte van een tekstgebied.
Zo wordt de bovenstaande HTML-code weergegeven in een browser:
U kunt ook de grootte van het tekstgebied definiëren met behulp van CSS:
Voorbeeld
<textarea name="message"
style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>
Het <button>-element
Het <button>element definieert een klikbare knop:
Voorbeeld
<button type="button"
onclick="alert('Hello World!')">Click Me!</button>
Zo wordt de bovenstaande HTML-code weergegeven in een browser:
Opmerking: Specificeer altijd het typeattribuut voor het knopelement. Verschillende browsers kunnen verschillende standaardtypen gebruiken voor het knopelement.
De elementen <fieldset> en <legend>
Het <fieldset>element wordt gebruikt om gerelateerde gegevens in een formulier te groeperen.
Het <legend>element definieert een bijschrift voor het
<fieldset>
element.
Voorbeeld
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<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"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
Zo wordt de bovenstaande HTML-code weergegeven in een browser:
Het <datalist>-element
Het <datalist>element specificeert een lijst met vooraf gedefinieerde opties voor een <input>element.
Gebruikers zien een vervolgkeuzelijst met de vooraf gedefinieerde opties terwijl ze gegevens invoeren.
Het listattribuut van het <input>element, moet verwijzen naar het
idattribuut van het <datalist>element.
Voorbeeld
<form action="/action_page.php">
<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 <output>-element
Het <output>element vertegenwoordigt het resultaat van een berekening (zoals een die wordt uitgevoerd door een script).
Voorbeeld
Voer een berekening uit en toon het resultaat in een <output>element:
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
HTML-oefeningen
HTML-formulierelementen
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
| <textarea> | Defines a multiline input control (text area) |
| <label> | Defines a label for an <input> element |
| <fieldset> | Groups related elements in a form |
| <legend> | Defines a caption for a <fieldset> element |
| <select> | Defines a drop-down list |
| <optgroup> | Defines a group of related options in a drop-down list |
| <option> | Defines an option in a drop-down list |
| <button> | Defines a clickable button |
| <datalist> | Specifies a list of pre-defined options for input controls |
| <output> | Defines the result of a calculation |
Bezoek onze HTML Tag Reference voor een volledige lijst van alle beschikbare HTML-tags .