OptionElementen

optionElementen zijn HTML-elementen die de opties van een select- of een datalist-element definiëren. Ze vormen de items waaruit een gebruiker kan kiezen in een formulier. In een formulier bepalen de geselecteerde optie(s) wat naar de server wordt verzonden wanneer het formulier wordt ingediend. In een gewone select-subsectie toont de tekst van het option-element de optie aan de gebruiker, terwijl de value-attribuut wordt meegestuurd bij het verzenden.

Gebruik en plaatsen

optionElementen staan altijd binnen een select- of een datalist-element. Binnen een select kunnen ze meerdere keren voorkomen en kunnen ze met behulp van het selected-attribuut worden gemarkeerd als standaardkeuze (voor een enkelvoudige selectie geldt: meestal slechts één optie heeft selected). Met disabled kan een optie onbruikbaar worden gemaakt zonder deze uit de lijst te verwijderen. Opties kunnen ook binnen optgroup-elementen worden gegroepeerd voor betere toegankelijkheid en leesbaarheid.

Attributen en gedragingen

Belangrijke attributen zijn value, label, selected en disabled. value bepaalt wat wordt verzonden bij formele indiening; als er geen value-attribuut is, wordt de zichtbare tekstinhoud van het option meegestuurd. Het label-attribuut geeft een alternatief label weer voor de optie in sommige browsers. In een multi-select kunnen meerdere opties tegelijk zijn geselecteerd en worden meerdere waarden onder dezelfde formuliernaam verzonden.

Overwegingen en toegankelijkheid

Zorg voor een duidelijke, beknopte tekst voor elke optie en gebruik indien nodig optgroup voor categorisering. Koppel het select-element aan een label zodat screenreaders de context begrijpen. Houd rekening met keyboard-navigatie en vermijd het verwijderen van belangrijke opties zonder duidelijke alternatieven.

Voorbeeld

<select name="fruit">

<option value="apple">Appel</option>

<option value="banana" selected>Banaan</option>

<option value="orange" disabled>Sinaasappel</option>

</select>