HTML <select> Tag
Voorbeeld
Maak een vervolgkeuzelijst met vier opties:
<label for="cars">Choose a car:</label>
<select
name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
Het <select>element wordt gebruikt om een vervolgkeuzelijst te maken.
Het <select>element wordt meestal gebruikt in een formulier om gebruikersinvoer te verzamelen.
Het nameattribuut is nodig om te verwijzen naar de formuliergegevens nadat het formulier is ingediend (als u het
nameattribuut weglaat, worden er geen gegevens uit de vervolgkeuzelijst ingediend).
Het idattribuut is nodig om de vervolgkeuzelijst te koppelen aan een label.
De <option> -tags in het <select>element definiëren de beschikbare opties in de vervolgkeuzelijst.
Tip: voeg altijd de <label> -tag toe voor de beste toegankelijkheidspraktijken!
Browserondersteuning
| Element | |||||
|---|---|---|---|---|---|
| <select> | Yes | Yes | Yes | Yes | Yes |
attributen
| Attribute | Value | Description |
|---|---|---|
| autofocus | autofocus | Specifies that the drop-down list should automatically get focus when the page loads |
| disabled | disabled | Specifies that a drop-down list should be disabled |
| form | form_id | Defines which form the drop-down list belongs to |
| multiple | multiple | Specifies that multiple options can be selected at once |
| name | name | Defines a name for the drop-down list |
| required | required | Specifies that the user is required to select a value before submitting the form |
| size | number | Defines the number of visible options in a drop-down list |
Algemene kenmerken
De <select>tag ondersteunt ook de Global Attributes in HTML .
Gebeurteniskenmerken
De <select>tag ondersteunt ook de Event Attributes in HTML .
Meer voorbeelden
Voorbeeld
Gebruik <select> met <optgroup> tags:
<label for="cars">Choose a car:</label>
<select
name="cars" id="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
Gerelateerde pagina's
HTML DOM-referentie: Object selecteren
CSS-zelfstudie: Formulieren opmaken
Standaard CSS-instellingen
Geen.