Тег <select>

Тег <select> (укр. – “вибір”) в HTML використовується для створення випадаючих списків, які дозволяють користувачеві вибирати один або кілька варіантів із попередньо визначеного списку. Це зручний елемент для форм, де необхідно запропонувати обмежений набір опцій.

Атрибути

Специфічні атрибути

  • multiple — дозволяє вибирати кілька варіантів із списку. Якщо цей атрибут присутній, користувач може вибирати більше ніж один елемент. Наприклад:
<select multiple>
    <option value="apple">Яблуко</option>
    <option value="banana">Банан</option>
    <option value="cherry">Вишня</option>
</select>
  • size — визначає кількість видимих елементів у списку, що без прокручування. Якщо значення цього атрибута більше 1, елемент <select> перетворюється на спискове меню, а не на випадаючий список. Наприклад:
<select size="3">
    <option value="apple">Яблуко</option>
    <option value="banana">Банан</option>
    <option value="cherry">Вишня</option>
</select>

Глобальні атрибути

Тег <select> підтримує всі глобальні атрибути HTML, зокрема:

  • id — унікальний ідентифікатор для елемента. Наприклад:
<select id="fruit">
    <option value="apple">Яблуко</option>
    <option value="banana">Банан</option>
</select>
  • class — задає клас для застосування стилів через CSS. Наприклад:
<select class="fruit-list">
    <option value="apple">Яблуко</option>
    <option value="banana">Банан</option>
</select>
  • style — дозволяє додавати інлайн-стилі до елемента. Наприклад:
<select style="width: 200px;">
    <option value="apple">Яблуко</option>
    <option value="banana">Банан</option>
</select>
  • title — текстовий опис для елемента, який може відображатися при наведенні курсора. Наприклад:
<select title="Оберіть фрукт">
    <option value="apple">Яблуко</option>
    <option value="banana">Банан</option>
</select>

Приклад використання

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Приклад використання <select></title>
</head>
<body>
    <label for="fruit">Оберіть фрукт:</label>
    <select id="fruit" name="fruit">
        <option value="apple">Яблуко</option>
        <option value="banana">Банан</option>
        <option value="cherry">Вишня</option>
    </select>
</body>
</html>

Додаткові моменти

  • Тег <select> зазвичай використовується в формах для вибору опцій, таких як список країн, мов, продуктів тощо.
  • Атрибут multiple дає можливість вибору кількох варіантів із списку. Це корисно, якщо потрібно дозволити користувачеві вибрати кілька значень.
  • Атрибут size корисний для великих списків, оскільки дозволяє показати більше варіантів без прокручування.