HTML <select> -Tag
Beispiel
Erstellen Sie eine Dropdown-Liste mit vier Optionen:
<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>
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Das <select>Element wird verwendet, um eine Dropdown-Liste zu erstellen.
Das <select>Element wird am häufigsten in einem Formular verwendet, um Benutzereingaben zu sammeln.
Das nameAttribut wird benötigt, um auf die Formulardaten zu verweisen, nachdem das Formular gesendet wurde (wenn Sie das
nameAttribut weglassen, werden keine Daten aus der Dropdown-Liste gesendet).
Das idAttribut wird benötigt, um die Dropdown-Liste mit einem Label zu verknüpfen.
Die <option> -Tags innerhalb des <select>Elements definieren die verfügbaren Optionen in der Dropdown-Liste.
Tipp: Fügen Sie immer das <label> -Tag hinzu, um optimale Zugänglichkeitspraktiken zu erhalten!
Browser-Unterstützung
| Element | |||||
|---|---|---|---|---|---|
| <select> | Yes | Yes | Yes | Yes | Yes |
Attribute
| 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 |
Globale Attribute
Das <select>Tag unterstützt auch die globalen Attribute in HTML .
Ereignisattribute
Das <select>Tag unterstützt auch die Ereignisattribute in HTML .
Mehr Beispiele
Beispiel
Verwenden Sie <select> mit <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>
Verwandte Seiten
HTML-DOM-Referenz: Objekt auswählen
CSS-Tutorial: Formulare gestalten
Standard-CSS-Einstellungen
Keiner.