Znacznik HTML <wybierz>
Przykład
Utwórz listę rozwijaną z czterema opcjami:
<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>
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Element <select>służy do tworzenia listy rozwijanej.
Element <select>jest najczęściej używany w formularzu, aby zebrać dane wejściowe użytkownika.
Atrybut jest namepotrzebny do odniesienia się do danych formularza po przesłaniu formularza (jeśli pominiesz
nameatrybut, żadne dane z listy rozwijanej nie zostaną przesłane).
Atrybut jest idpotrzebny do powiązania listy rozwijanej z etykietą.
Znaczniki <option> wewnątrz <select>elementu definiują dostępne opcje na liście rozwijanej.
Wskazówka: zawsze dodawaj tag <label> , aby uzyskać najlepsze praktyki ułatwień dostępu!
Obsługa przeglądarki
| Element | |||||
|---|---|---|---|---|---|
| <select> | Yes | Yes | Yes | Yes | Yes |
Atrybuty
| 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 |
Atrybuty globalne
Znacznik <select>obsługuje również atrybuty globalne w HTML .
Atrybuty wydarzenia
Tag <select>obsługuje również Atrybuty Zdarzeń w HTML .
Więcej przykładów
Przykład
Użyj <select> z tagami <optgroup>:
<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>
Powiązane strony
Dokumentacja HTML DOM: Wybierz obiekt
Samouczek CSS: stylizowanie formularzy
Domyślne ustawienia CSS
Nic.