Naar de inhoud
Gratis naslagwerk over HTML
HTML leren en naslaan
Naslag / Formulieren

Het element <option>

Het HTML-element <option> wordt gebruikt om een item te definiëren dat is opgenomen in een <select>-, <optgroup>- of <datalist>-element. Als zodanig kan <option> menu-items in pop-ups en andere lijsten met items in een HTML-document voorstellen.

Code
<label for="pet-select">Choose a pet:</label>

<select id="pet-select">
  <option value="">--Please choose an option--</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster">Hamster</option>
  <option value="parrot">Parrot</option>
  <option value="spider">Spider</option>
  <option value="goldfish">Goldfish</option>
</select>
Resultaat in de browser

Attributen

Dit element bevat de globale attributen.

disabledAls dit booleaanse attribuut is ingesteld, kan deze optie niet worden aangevinkt. Browsers geven een dergelijk besturingselement vaak grijs weer, en het ontvangt geen enkele navigatiegebeurtenis, zoals muiskliks of focusgerelateerde gebeurtenissen. Als dit attribuut niet is ingesteld, kan het element toch worden uitgeschakeld als een van zijn voorouders een uitgeschakeld <optgroup>-element is.
labelDit attribuut is de tekst voor het label dat de betekenis van de optie aangeeft. Als het label-attribuut niet is gedefinieerd, is de waarde ervan gelijk aan de tekstinhoud van het element.
selectedIndien aanwezig, geeft dit booleaanse attribuut aan dat de optie in eerste instantie is geselecteerd. Als het <option>-element een afstammeling is van een <select>-element waarvan het multiple-attribuut niet is ingesteld, mag slechts één enkele <option> van dit <select>-element het selected-attribuut hebben.
valueDe inhoud van dit attribuut stelt de waarde voor die met het formulier moet worden ingediend, mocht deze optie worden geselecteerd. Als dit attribuut wordt weggelaten, wordt de waarde overgenomen uit de tekstinhoud van het option-element.

Stylen met CSS

Het stylen van <option>-elementen was van oudsher sterk beperkt. Aanpasbare select-elementen legt nieuwere functies uit die volledige aanpassing ervan mogelijk maken, net als bij elk gewoon DOM-element.

Verouderde option-styling

In browsers die de moderne aanpassingsfuncties niet ondersteunen (of in verouderde codebases waar deze niet kunnen worden gebruikt), hangt de beschikbare styling voor <option>-elementen af van de browser en het besturingssysteem. Afhankelijk van het besturingssysteem wordt de font-size van de eigenaar-<select> gerespecteerd in Firefox en Chromium. Chromium staat mogelijk ook toe dat color, background-color, font-family, font-variant en text-align worden ingesteld.

U vindt meer details over de verouderde <option>-styling in onze handleiding voor geavanceerde formulierstyling.

Voorbeelden

Zie <select> voor voorbeelden.

Technische samenvatting

Contentcategorieën Geen.
Toegestane inhoud In traditionele <select>-elementen is alleen tekstinhoud toegestaan, eventueel met escapetekens (zoals &eacute;). In aanpasbare select-elementen kunnen `
Weglaten van tags De begintag is verplicht. De eindtag is optioneel als dit element direct wordt gevolgd door een ander <option>-element of een <optgroup>, of als het bovenliggende element geen verdere inhoud heeft.
Toegestane bovenliggende elementen Een <select>-, <optgroup>- of <datalist>-element.
Impliciete ARIA-rol option
Toegestane ARIA-rollen Geen role toegestaan
DOM-interface HTMLOptionElement

Zie ook

Verwante elementen