Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Елемент Select | Forms
Знайомство з HTML

Елемент SelectЕлемент Select

Елемент <select> використовується для створення випадаючого списку опцій, з яких користувач може вибирати. Зазвичай він використовується у формах, де користувачеві потрібно вибрати з попередньо визначеного набору опцій. Він завжди використовується разом з елементами <option>. Елементи <option> визначають окремі елементи у випадаючому списку.

html

index.html

css

index.css

js

index.js

Елемент <select> також має декілька атрибутів, за допомогою яких можна змінювати його поведінку:

  • name - Ім'я елемента вибору, що використовується при відправленні форми;
  • size - Кількість видимих варіантів у випадаючому списку;
  • multiple - Якщо присутній, дозволяє користувачеві вибрати кілька варіантів;
  • disabled - Якщо присутнє, відключає елемент вибору.

Щоб розділити список на окремі, не пов'язані між собою групи, ми можемо використовувати тег <optgroup>. Атрибут label використовується для присвоєння заголовка групі.

html

index.html

css

index.css

js

index.js

Примітка

За замовчуванням у списку вибирається перший елемент <option>. Якщо ми хочемо це змінити, ми можемо додати атрибут selected до будь-якого елемента <option>.

Все було зрозуміло?

Секція 5. Розділ 8
course content

Зміст курсу

Знайомство з HTML

1. Веб Розробка

Світ ВебуЩо таке Інтернет?Розуміння того, як Працює ІнтернетЯк Працює Веб-СайтFrontend проти BackendШлях до Успіху

2. Теги та Атрибути

Розкриття Потенціалу Тегів та Атрибутів HTMLТегиАтрибутиПарні та Одиночні тегиРозмітка ТекстуЧелендж 1: Розмітка ТекстуЧелендж 2: Розмітка ТекстуЧелендж 3: Розмітка ТекстуРозмітка Тексту Спеціального ПризначенняЧелендж: Розмітка Тексту Спеціального ПризначенняВалідація

3. Структура Документа

Секрети Структурних Веб-сторінокСтруктураHead ДокументаПотік ДокументуЧелендж: Структура ДокументаІнструменти Розробника

4. Медіа та Таблиці

Магія Мультимедіа та Динамічних ТаблицьЗображенняЧелендж: ЗображенняЗображення Спеціального ПризначенняГрафічні ФорматиВбудовування Аудіо та ВідеоЧелендж: Аудіо та ВідеоТаблиціЧелендж: Таблиці

5. Форми

Сила Форм: Взаємодійте та ЗалучайтеОснова для Створення ФормиLabel для Input ЕлементаАтрибути Елементу Input Типи Елементу Input Челендж: Input та LabelЕлемент TextareaЕлемент SelectЕлемент DatalistГрупування Елементів Форм

Знайомство з HTML

Елемент SelectЕлемент Select

Елемент <select> використовується для створення випадаючого списку опцій, з яких користувач може вибирати. Зазвичай він використовується у формах, де користувачеві потрібно вибрати з попередньо визначеного набору опцій. Він завжди використовується разом з елементами <option>. Елементи <option> визначають окремі елементи у випадаючому списку.

html

index.html

css

index.css

js

index.js

Елемент <select> також має декілька атрибутів, за допомогою яких можна змінювати його поведінку:

  • name - Ім'я елемента вибору, що використовується при відправленні форми;
  • size - Кількість видимих варіантів у випадаючому списку;
  • multiple - Якщо присутній, дозволяє користувачеві вибрати кілька варіантів;
  • disabled - Якщо присутнє, відключає елемент вибору.

Щоб розділити список на окремі, не пов'язані між собою групи, ми можемо використовувати тег <optgroup>. Атрибут label використовується для присвоєння заголовка групі.

html

index.html

css

index.css

js

index.js

Примітка

За замовчуванням у списку вибирається перший елемент <option>. Якщо ми хочемо це змінити, ми можемо додати атрибут selected до будь-якого елемента <option>.

Все було зрозуміло?

Секція 5. Розділ 8
some-alt