HTML <optie> Tag
Voorbeeld
Een vervolgkeuzelijst met vier opties:
<label for="cars">Choose a car:</label>
<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De <option>tag definieert een optie in een selectielijst.
<option>elementen gaan binnen een <select> ,
<optgroup> of <datalist> element.
Opmerking: de <option>tag kan zonder attributen worden gebruikt, maar u hebt meestal het value -attribuut nodig, dat aangeeft wat er naar de server wordt verzonden bij het indienen van het formulier.
Tip: Als je een lange lijst met opties hebt, kun je gerelateerde opties groeperen binnen de <optgroup> -tag.
Browserondersteuning
| Element | |||||
|---|---|---|---|---|---|
| <option> | Yes | Yes | Yes | Yes | Yes |
attributen
| Attribute | Value | Description |
|---|---|---|
| disabled | disabled | Specifies that an option should be disabled |
| label | text | Specifies a shorter label for an option |
| selected | selected | Specifies that an option should be pre-selected when the page loads |
| value | text | Specifies the value to be sent to a server |
Algemene kenmerken
De <option>tag ondersteunt ook de Global Attributes in HTML .
Gebeurteniskenmerken
De <option>tag ondersteunt ook de Event Attributes in HTML .
Meer voorbeelden
Voorbeeld
Gebruik van <optie> in een <datalist> element:
<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Voorbeeld
Gebruik van <optie> in <optgroup> elementen:
<label for="cars">Choose a car:</label>
<select id="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
Gerelateerde pagina's
HTML DOM-referentie: Optie Object
Standaard CSS-instellingen
Geen.