HTML <select> tag

Definitie en gebruik

<select> Element wordt gebruikt om een keuzelijst te maken.

<select> Element wordt vaak gebruikt in formulieren om gebruikersinvoer te verzamelen.

Na het indienen van het formulier moet de name-eigenschap worden gebruikt om formuliergegevens te refereren (indien de name-eigenschap wordt weggelaten, worden de gegevens in de keuzelijst niet ingediend).

<select> Element binnen <option> Tag Definieer de beschikbare opties in de keuzelijst.

Gebruik de id-eigenschap om de keuzelijst met het label (label) te koppelen.

Tip:Voeg altijd toe <label> Tag Voor de beste toegankelijkheidspraktijken!

Zie ook:

HTML DOM Referentiemanual:Select Object

CSS Handleiding:Stel formulierstijl in

Voorbeeld

Voorbeeld 2

Maak een keuzelijst met vier opties aan:

<label for="cars">Kies een automerk:</label>
<select name="cars" id="cars">
  <option value="audi">Audi</option>
  <option value="byd">BYD</option>
  <option value="geely">Geely</option>
  <option value="volvo">Volvo</option>
</select>

Probeer het zelf uit

Voorbeeld 1

Voorbeeld 2 <select> Gebruik samen met de <optgroup> tag:

<label for="cars">Kies een automerk:</label>
<select name="cars" id="cars">
  <optgroup label="Chinese auto's">
    <option value="byd">BYD</option>
    <option value="geely">Geely</option>
  </optgroup>
  <optgroup label="Duitse auto's">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Probeer het zelf uit

Eigenschap

Eigenschap Waarde Beschrijving
autofocus autofocus Definieer dat de keuzelijst automatisch focus krijgt bij het laden van de pagina.
disabled disabled Definieer dat de keuzelijst moet worden uitgeschakeld.
form Formulier id Definieer het formulier waar de keuzelijst toebehoren.
multiple multiple Kies meerdere opties in één keer.
name Name Define the name of the dropdown list.
required required Specify that the user must select a value before submitting the form.
size Number Define the number of visible options in the dropdown list.

Global attributes

<select> The tag also supports Global attributes in HTML.

Event attributes

<select> The tag also supports Event attributes in HTML.

Default CSS Settings

None.

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support