Використання елемента Select для випадаючих меню

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

index.html

<option value="tomato">tomato</option>

<option value="cucumber">cucumber</option>

<option value="lettuce">lettuce</option>

</select>

<button type="submit">Submit</button>

</form>

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

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

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

index.html

<label for="sport">Favorite Sport</label>

<option value="soccer">soccer</option>

<option value="basketball">basketball</option>

<option value="hockey">hockey</option>

</optgroup>

<option value="boxing">boxing</option>

<option value="swimming">swimming</option>

<option value="skiing">skiing</option>

</optgroup>

</select>

<button type="submit">Submit</button>

</form>

Примітка

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

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

Дякуємо за ваш відгук!

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

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат