(Від англ. select - Вибрати) дозволяє створити елемент інтерфейсу у вигляді списку, що розкривається, а також список з одним або множинним вибором.
Демо¶
Синтаксис¶
Закриваючий тег є обов'язковим.
Атрибути¶
Встановлює, що список отримує фокус після завантаження сторінки.
Блокує доступ та зміну елемента.
Пов'язує список із формою.
Дозволяє одночасно вибирати одразу кілька елементів списку.
Ім'я елемента для надсилання на сервер або звернення через скрипти.
Список обов'язковий для вибору перед надсиланням форми.
Кількість рядків списку, що відображаються.
Також для цього елемента є універсальні атрибути.
autofocus¶
Атрибут autofocus встановлює, що список отримує фокус після завантаження сторінки, список стає доступним для вибору пунктів, наприклад, за допомогою клавіатури.
Синтаксис
Значення
Значення за замовчуванням
За замовчуванням цей атрибут вимкнено.
disabled¶
Блокує доступ та зміну елементів списку. Блокований список не може отримати фокус через курсор або клавіатуру, змінюватися, значення такого списку не передається на сервер.
Синтаксис
Значення
Значення за замовчуванням
За замовчуванням цей атрибут вимкнено.
form¶
Зв'язує список із формою за її ідентифікатором. Такий зв'язок необхідний у випадку, коли список знаходиться за межами .
Синтаксис
Значення
Ідентифікатор форми (значення атрибуту id елемента).
Значення за замовчуванням
multiple¶
Наявність атрибута multiple повідомляє браузеру відображати вміст елемента як список множинного вибору. Кінцевий вигляд списку залежить від використовуваного атрибута size та браузера.
Для вибору кількох значень списку використовуються клавіші Ctrl і Shift спільно з курсором миші.
Щоб сервер відправлявся масив даних, значення атрибута name слід писати з квадратними дужками — hero[] , наприклад.
Синтаксис
Значення
Значення за замовчуванням
За замовчуванням цей атрибут вимкнено.
name¶
Визначає унікальне ім'я елемента. Як правило, це ім'я використовується для доступу до даних через скрипти або отримання вибраного значення списку на сервері.
Синтаксис
Значення
Як ім'я використовується набір символів, включаючи числа та літери. JavaScript чутливий до регістру, тому при зверненні до елемента на ім'я дотримуйтесь тієї ж форми написання, що і в атрибуті name .
Значення за замовчуванням
required¶
Встановлює список обов'язковий для вибору перед відправкою форми на сервер. Якщо пункт списку не вибрано, браузер виведе повідомлення, а форма надіслано не буде. Вигляд та зміст повідомлення залежить від браузера і змінюватись користувачем не може.
Синтаксис
Значення
Значення за замовчуванням
За замовчуванням атрибут required вимкнено.
size¶
Встановлює висоту списку. Якщо значення атрибута size дорівнює 1, то список перетворюється на розкривається. При додаванні атрибута multiple до елемента при size="1", список відображається як «крутилка». В інших випадках виходить список з одним або множинним вибором.
Синтаксис
Значення
Будь-яке ціле позитивне число.
Значення за замовчуванням
Залежить від атрибуту multiple. Якщо він присутній, то розмір списку дорівнює кількості елементів. Коли атрибута multiple немає, то за промовчанням значення атрибута size дорівнює 1.
Значення ARIA role¶
- (без атрибуту multiple і без атрибуту size зі значенням більше 1) - role = combobox
- (з атрибутом multiple або з атрибутом size зі значенням більше 1) — role=listbox
Специфікації¶
Як встановити значення за промовчанням для select в HTML?
Я створив вибір у html, який виглядає так . Чи є спосіб встановити значення за промовчанням для select у щось на зразок "вибір значення"? Чи не як варіант, а просто текст вибору.
2 відповіді
Ви можете використовувати атрибут selected всередині опції для вибору відповіді за промовчанням. Якщо ви додасте опцію disabled і hidden , це буде неприпустимою опцією.
Чому просто не мати інший варіант, який не має значення, і дати йому варіант обраного?
Потім у вашому php або будь-якому іншому сервері перевірте, чи не приймаєте ви порожнє значення, або використовуйте js, щоб не дозволити формі відправляти, якщо значення порожнє?
Як встановити значення за промовчанням у select?
Елемент select створює список. Залежно від налаштувань це може бути список, що випадає для вибору одного елемента, або розкритий список, в якому можна вибрати відразу кілька елементів.
Створимо список, що випадає:
Елемент select в HTML5
Всередині елемента select розміщуються елементи option – елементи списку. Кожен елемент option містить атрибут value, який зберігає значення елемента. При цьому значення елемента option не обов'язково повинно збігатися з текстом, який він відображає. Наприклад:
За допомогою атрибута selected ми можемо встановити вибраний за замовчуванням елемент - це необов'язково має бути перший елемент у списку:
За допомогою іншого атрибута disabled можна заборонити вибір певного елемента. Як правило, елементи з цим атрибутом служать для створення заголовків:
Для створення списку з множинним вибором до елемента select треба додати атрибут multiple:
Елемент select в HTML5
Затиснувши клавішу Ctrl, ми можемо вибрати кілька елементів у такому списку:
Select також дозволяє групувати елементи за допомогою тега:
Елемент select в HTML5
Використання груп елементів застосовується як до списку, що випадає, так і до списку з множинним вибором.
