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

Het element <select>

Het <select>-HTML-element stelt een besturingselement voor dat een menu met opties biedt.

Auteur: Maarten Soetens

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

<select name="pets" 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.

autocomplete

Een string die een hint geeft voor de automatisch-aanvullen-functie van een user agent. Zie The HTML autocomplete attribute voor een volledige lijst met waarden en details over het gebruik van autocomplete.

autofocus

Dit Booleaanse attribuut geeft aan dat een formulierbesturingselement invoerfocus moet krijgen wanneer de pagina wordt geladen. Slechts één formulierelement in een document mag het autofocus-attribuut hebben.

disabled

Dit Booleaanse attribuut geeft aan dat de gebruiker niet met het besturingselement kan interageren. Als dit attribuut niet is opgegeven, erft het besturingselement zijn instelling van het omvattende element, bijvoorbeeld <fieldset>; als er geen omvattend element met het disabled-attribuut ingesteld is, dan is het besturingselement ingeschakeld.

form

Het <form>-element waarmee de <select> geassocieerd wordt (de form owner). De waarde van dit attribuut moet de id zijn van een <form> in hetzelfde document. (Als dit attribuut niet is ingesteld, wordt de <select> geassocieerd met het voorouderlijke <form>-element, indien aanwezig.)

Met dit attribuut kun je <select>-elementen associëren met <form>'s die zich overal in het document bevinden, niet alleen binnen een <form>. Het kan ook een voorouderlijk <form>-element overschrijven.

multiple

Dit Booleaanse attribuut geeft aan dat nul of meer opties in de lijst kunnen worden geselecteerd. Indien niet opgegeven, kan slechts één optie tegelijk worden geselecteerd. Meerdere geselecteerde opties worden verzonden volgens de URLSearchParams-arrayconventie, d.w.z. name=value1&name=value2. Als multiple is opgegeven, is de standaardwaarde van size 4 in plaats van 1.

name

Dit attribuut wordt gebruikt om de naam van het besturingselement op te geven.

required

Dit Booleaanse attribuut geeft aan dat de gebruiker minstens één optie moet selecteren voordat het formulier kan worden verzonden. De <select> heeft geen geselecteerde opties als deze geen opties heeft, multiple is opgegeven en de gebruiker alle opties deselecteert, de waarde van de select programmatisch is ingesteld op "", of alleen de placeholder-labeloptie is geselecteerd. Elke optie behalve de placeholder-labeloptie wordt als geldig beschouwd, zelfs als de waarde ervan ook leeg is.

De placeholder-labeloptie is de tekst die wordt getoond in het vak voordat de gebruiker een keuze maakt, zoals de "--Please choose an option--" in de demo Try it hierboven. Semantisch gezien wordt deze gelijkgesteld aan het placeholder-attribuut en wordt niet beschouwd als een echte optie. Ze wordt gedefinieerd als de eerste optie in de optielijst die een direct kind is van de <select> (niet binnen een <optgroup>) en een lege string als waarde heeft. Ze is alleen relevant wanneer size gelijk is aan 1 en multiple niet is opgegeven; in alle andere gevallen is zo'n <option> gewoon een normale optie, vanwege de manier waarop de <select> wordt weergegeven.

size

Dit attribuut geeft het aantal opties aan dat tegelijk wordt getoond, en moet een positief geheel getal zijn. Als de waarde 1 is, geven browsers een dropdown-lijst weer. Als de waarde groter is dan 1, geven browsers een scrollende lijstweergave weer met het opgegeven aantal zichtbare rijen. Als het attribuut niet is opgegeven, is de standaardwaarde 1. Als het multiple-attribuut is opgegeven, is de standaardwaarde 4. Vanwege achterwaartse compatibiliteit geeft de size-eigenschap echter altijd 0 terug als standaardwaarde.

Gebruiksnotities

Zoals bij andere formulierbesturingselementen is een <select>-element doorgaans geassocieerd met een <label> om toegankelijkheidsredenen, evenals een name-attribuut om de naam van het bijbehorende datapunt weer te geven dat naar de server wordt verzonden. Elke menuoptie wordt gedefinieerd door een <option>-element dat genest is binnen de <select>.

Elk <option>-element moet een value-attribuut hebben dat de datawaarde bevat die naar de server verzonden wordt wanneer die optie is geselecteerd. Als er geen value-attribuut is opgenomen, is de standaardwaarde de tekst die binnen het element staat. Je kunt een selected-attribuut opnemen op een <option>-element om deze standaard te selecteren wanneer de pagina voor het eerst wordt geladen. Als er geen selected-attribuut is opgegeven, wordt het eerste <option>-element standaard geselecteerd.

Een <select>-element wordt in JavaScript vertegenwoordigd door een HTMLSelectElement-object, en dit object heeft een value-eigenschap die de waarde van de geselecteerde <option> bevat.

Je kunt <option>-elementen verder nesten binnen <optgroup>-elementen om afzonderlijke groepen opties binnen de dropdown te maken. Je kunt ook <hr>-elementen opnemen om scheidingstekens te maken die visuele onderbrekingen tussen opties toevoegen.

Zie voor meer voorbeelden The native form widgets: Drop-down content.

Opties binnen wrapper-elementen

Het <select>-element bouwt zijn lijst met opties op uit alle <option>-afstammelingen, niet alleen zijn directe kinderen. Dit betekent dat opties kunnen worden verpakt in andere elementen, zoals <div>-elementen, en dat ze nog steeds als selecteerbare opties in de dropdown verschijnen en worden meegenomen bij het verzenden van het formulier. Wrapper-elementen zijn nuttig voor styling in customizable select elements, maar hebben geen effect op het gedrag van de select: ze maken geen groepen, labels of scheidingstekens. Gebruik een <optgroup> om opties onder een kop te groeperen; een <option> telt als deel van een <optgroup> als de groep een voorouder is, dus wrapper-elementen kunnen ook binnen een groep worden gebruikt zonder de associatie te verbreken.

Opmerking

Browsers met modern parseergedrag behouden alle elementen die binnen een <select> zijn geschreven in de DOM — inclusief wrapper-elementen, <button> en <selectedcontent>. Oudere browsers verwijderen in plaats daarvan niet-toegestane elementen tijdens het parseren, waarbij alleen de structuur van <option>, <optgroup> en <hr> behouden blijft. Als gevolg daarvan werkt styling, opmaak of scripting die afhankelijk is van de verwijderde elementen niet op oudere browsers.

Meerdere opties selecteren

Op een desktopcomputer zijn er verschillende manieren om meerdere opties te selecteren in een <select>-element met een multiple-attribuut en een size-attribuut groter dan 1.

Muisgebruikers kunnen de toets Ctrl, Command of Shift ingedrukt houden (afhankelijk van wat logisch is voor het besturingssysteem) en vervolgens op meerdere opties klikken om ze te selecteren/deselecteren.

Let op

Het mechanisme voor het via het toetsenbord selecteren van meerdere niet-aaneengesloten items dat hieronder wordt beschreven, lijkt momenteel alleen in Firefox te werken.

Op macOS conflicteren de sneltoetsen Ctrl + Up en Ctrl + Down met de standaardsneltoetsen van het besturingssysteem voor Mission Control en Application windows, dus je moet deze uitschakelen voordat het werkt.

Toetsenbordgebruikers kunnen meerdere aaneengesloten items selecteren door:

  • Focus te geven aan het <select>-element (bijvoorbeeld met Tab).
  • Een item te selecteren bovenaan of onderaan het bereik dat ze willen selecteren, met behulp van de cursortoetsen Up en Down om door de opties heen te gaan.
  • De toets Shift ingedrukt te houden en vervolgens de cursortoetsen Up en Down te gebruiken om het bereik van geselecteerde items te vergroten of te verkleinen.

Toetsenbordgebruikers kunnen meerdere niet-aaneengesloten items selecteren door:

  • Focus te geven aan het <select>-element (bijvoorbeeld met Tab).
  • De toets Ctrl ingedrukt te houden en vervolgens de cursortoetsen Up en Down te gebruiken om de "gefocuste" selectoptie te wijzigen, d.w.z. degene die geselecteerd wordt als ze daarvoor kiezen. De "gefocuste" selectoptie wordt gemarkeerd met een gestippelde omlijning, op dezelfde manier als een via het toetsenbord gefocuste link.
  • Op Space te drukken om "gefocuste" selectopties te selecteren/deselecteren.

Styling met CSS

Het <select>-element was historisch gezien lastig om effectief te stylen met CSS. De volgende handleidingen bevatten informatie over functies die volledig aanpasbare select-elementen mogelijk maken:

Legacy select-styling

In browsers die de moderne aanpassingsfuncties niet ondersteunen (of in legacy codebases waar ze niet kunnen worden gebruikt), ben je beperkt tot het manipuleren van het boxmodel, het weergegeven lettertype, enz. Je kunt ook de appearance-eigenschap gebruiken om de standaard systeem-appearance te verwijderen.

Het is echter lastig om een consistent resultaat te krijgen tussen browsers met traditionele <select>-elementen. Als je volledige controle wilt, kun je overwegen een library te gebruiken met goede voorzieningen voor het stylen van formulierwidgets, of je eigen dropdownmenu te bouwen met behulp van niet-semantische elementen, JavaScript en WAI-ARIA om semantiek te bieden.

Je kunt de pseudoklasse :open gebruiken om <select>-elementen te stylen in de geopende toestand, dat wil zeggen wanneer de lijst met dropdown-opties wordt weergegeven. Dit is niet van toepassing op meerregelige <select>-elementen (die met het multiple-attribuut ingesteld) — deze worden doorgaans weergegeven als een scrollende lijstweergave in plaats van een dropdown, en hebben dus geen geopende toestand.

Zie voor meer informatie over legacy <select>-styling:

  • De field-sizing-eigenschap, die bepaalt hoe <select>-elementen worden geformatteerd in verhouding tot hun bevatte opties.

Toegankelijkheid

De <hr> binnen een <select> moet als puur decoratief worden beschouwd, omdat deze momenteel niet wordt blootgesteld in de toegankelijkheidsboom en daardoor niet aan hulptechnologieën wordt blootgesteld.

Voorbeelden

Eenvoudige select

Het volgende voorbeeld maakt een dropdownmenu met drie waarden. De tweede optie bevat het selected-attribuut, waardoor die optie standaard geselecteerd is.

HTML
<select name="choice">
  <option value="first">First Value</option>
  <option value="second" selected>Second Value</option>
  <option value="third">Third Value</option>
</select>

Resultaat

Resultaat in de browser

Select met gegroepeerde opties

Het volgende voorbeeld maakt een dropdownmenu met groepering met behulp van <optgroup> en <hr> om het voor de gebruiker gemakkelijker te maken de inhoud van de dropdown te begrijpen.

HTML
<label for="hr-select">Your favorite food</label> <br />

<select name="foods" id="hr-select">
  <option value="">Choose a food</option>
  <hr />
  <optgroup label="Fruit">
    <option value="apple">Apples</option>
    <option value="banana">Bananas</option>
    <option value="cherry">Cherries</option>
    <option value="damson">Damsons</option>
  </optgroup>
  <hr />
  <optgroup label="Vegetables">
    <option value="artichoke">Artichokes</option>
    <option value="broccoli">Broccoli</option>
    <option value="cabbage">Cabbages</option>
  </optgroup>
  <hr />
  <optgroup label="Meat">
    <option value="beef">Beef</option>
    <option value="chicken">Chicken</option>
    <option value="pork">Pork</option>
  </optgroup>
  <hr />
  <optgroup label="Fish">
    <option value="cod">Cod</option>
    <option value="haddock">Haddock</option>
    <option value="salmon">Salmon</option>
    <option value="turbot">Turbot</option>
  </optgroup>
</select>

Resultaat

Resultaat in de browser

Geavanceerde select met meerdere functies

Het volgende voorbeeld is complexer en toont meer functies die je kunt gebruiken op een <select>-element:

  • Het multiple-attribuut maakt het mogelijk om meer dan één optie te selecteren.
  • Het size-attribuut is ingesteld op 4, wat betekent dat er 4 regels tegelijk worden weergegeven. Gebruikers kunnen scrollen om alle opties te bekijken.
  • Er zijn twee <optgroup>-elementen opgenomen, die twee visuele groeperingen creëren, waarbij de groepsnaam meestal vetgedrukt is en geneste opties worden ingesprongen.
  • Het disabled-attribuut is toegevoegd aan de optie "Hamster", waardoor die optie niet selecteerbaar is.
HTML
<label>
  Please choose one or more pets:
  <select name="pets" multiple size="4">
    <optgroup label="4-legged pets">
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
      <option value="hamster" disabled>Hamster</option>
    </optgroup>
    <optgroup label="Flying pets">
      <option value="parrot">Parrot</option>
      <option value="macaw">Macaw</option>
      <option value="albatross">Albatross</option>
    </optgroup>
  </select>
</label>

Resultaat

Resultaat in de browser

Technische samenvatting

Inhoudscategorieën Flow-inhoud, phrasing-inhoud, interactieve inhoud, listed, labelable, resettable, en submittable form-associated element
Toegestane inhoud
Weglaten van tags Geen, zowel de begin- als de eindtag zijn verplicht.
Toegestane ouders Elk element dat phrasing-inhoud accepteert.
Impliciete ARIA-rol combobox met geen multiple-attribuut en geen size-attribuut groter dan 1, anders listbox.
Toegestane ARIA-rollen menu met geen multiple-attribuut en geen size-attribuut groter dan 1, anders is combobox toegestaan maar niet aanbevolen.
DOM-interface HTMLSelectElement

Zie ook

Verwante elementen

<button> <datalist> <fieldset> <form> <input> <label> <legend> <meter>