Keuzelijst

HTML

<select>

Je maakt een keuzelijst met het element <select>. Het bevat twee of meer <option>-elementen.

HTML attributen

name

Het attribuut name geeft de naam van het formulierelement dat naar de server wordt verzonden, samen met de waarde die de gebruiker heeft geselecteerd. Die waarde zit in het value attribuut van de <option> elementen.

size

Je kunt een keuzelijst in een vak met meer dan één optie veranderen door het attribuut size toe te voegen. De waarde ervan moet het aantal opties zijn dat tegelijk zichtbaar is.

multiple

Je kunt gebruikers in staat stellen om meerdere opties uit de lijst te selecteren door het attribuut multiple toe te voegen met de waarde multiple. Je moet de gebruikers vertellen dat ze meer dan één optie tegelijk kunnen selecteren. En je moet ook aangeven dat ze op een pc de control-toets ingedrukt moeten houden tijdens het selecteren van meerdere opties en op een Mac de command-toets.

HTML

<option>

Het element <option> wordt gebruikt om de opties waaruit de gebruiker kan kiezen op te geven. De tekst tussen de tags <option> en </option> worden in de keuzelijst getoond.

HTML attributen

value

Het element <select> gebruikt de waarde van het attribuut value van het <option> element om de waarde die naar de server wordt verzonden aan te geven, samen met zijn eigen naam.

selected

Het attribuut selected kan worden gebruikt om aan te geven dat de optie geselecteerd moet zijn als de pagina laadt. De waarde van dit attribuut dient selected te zijn.

Als dit attribuut niet wordt gebruikt, zal de eerste optie worden weergegeven wanneer de pagina wordt geladen. Als de gebruiker geen optie selecteert, dan wordt het eerste item als de waarde voor dit element naar de server verzonden.

Voorbeelden

Als je op het label element klikt wordt de tekst in het select element geselecteerd omdat we het for attribuut hebben ingesteld.

<div>
    <label for="modules">Kies een module</label>
    <select name="modules" id="modules">
        <option value="A4">Multimedia</option>
        <option value="A8">Databanken</option>
        <option value="B1" selected>Programmeren 3</option>
        <option value="B4">Programmeren 4</option>
    </select>
</div>

Je kan meer dan één keuze zichtbaar maken door het size attribuut in te stellen:

<div>
    <label for="modules">Kies een module</label>
    <select name="modules" id="modules" size=4>
        <option value="A4">Multimedia</option>
        <option value="A8">Databanken</option>
        <option value="B1" selected>Programmeren 3</option>
        <option value="B4">Programmeren 4</option>
    </select>
</div>