HTML Тег <select>
Приклад
Створіть розкривний список із чотирма параметрами:
<label for="cars">Виберіть автомобіль:</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>
Спробуйте самі »
Більше прикладів "Спробуйте самі" далі.
Визначення та використання
Елемент <select> використовується для створення розкривного (спадного) списку.
Елемент <select> найчастіше використовується у формі для збору даних, введених користувачем.
Атрибут name потрібен для посилання на дані форми після надсилання форми (якщо ви опустите атрибут name, дані зі спадного списку не надсилатимуться).
Атрибут id потрібний для пов’язування розкривного списку з міткою.
Теги <option> всередині елемента <select> визначають доступні параметри в розкривному списку.
Підказка: Завжди додавайте тег <label> для найкращих практик доступності!
Підтримка браузерами
| Елемент | |||||
|---|---|---|---|---|---|
| <select> | Так | Так | Так | Так | Так |
Атрибути
| Атрибут | Значення | Опис |
|---|---|---|
| autofocus | autofocus | Визначає, щоб розкривний список автоматично отримував фокус під час завантаження сторінки |
| disabled | disabled | Визначає, що розкривний список має бути вимкнено |
| form | form_id | Визначає, до якої форми належить розкривний список |
| multiple | multiple | Визначає, що можна вибрати одночасно кілька параметрів |
| name | name | Визначає назву для розкривного списку |
| required | required | Визначає, що користувач має вибрати значення перед надсиланням форми |
| size | number | Визначає кількість видимих параметрів у розкривному списку |
Глобальні атрибути
Тег <select> також підтримує Глобальні атрибути в HTML.
Атрибути подій
Тег <select> також підтримує Атрибути подій в HTML.
Більше прикладів
Приклад
Використовуйте <select> разом з тегами <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>
Спробуйте самі »
Пов’язані сторінки
HTML DOM довідник: Об’єкт Select
CSS підручник: Стилізація форм
CSS налаштування за замовчуванням
Немає.
