Множинний вибір і списки

5.1 Елемент <select>

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

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

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

    
      <label for="country">Виберіть країну:</label>
      <select id="country" name="country">
        <option value="us">Сполучені Штати</option>
        <option value="ca">Канада</option>
        <option value="mx">Мексика</option>
      </select>
    
  

Основні атрибути <select>

Атрибут name: встановлює ім'я елемента форми, яке буде відправлене на сервер разом із вибраним значенням.

    
      <select name="country"></select>
    
  

Атрибут id: встановлює унікальний ідентифікатор елемента, який використовується для зв'язку із елементом <label>.

    
      <select id="country" name="country"></select>
    
  

Атрибут multiple: дозволяє користувачу вибрати декілька варіантів одночасно. Зовні список буде відображатися як багаторядковий.

    
      <select name="fruits" id="fruits" multiple>
        <option value="apple">Яблуко</option>
        <option value="banana">Банан</option>
        <option value="cherry">Вишня</option>
      </select>
    
  

Атрибут size: встановлює кількість видимих рядків у випадаючому списку. Це корисно для створення списків із прокруткою.

    
      <select name="cities" size="4">
        <option value="ny">Нью-Йорк</option>
        <option value="la">Лос-Анджелес</option>
        <option value="chicago">Г'юстон</option>
      </select>
    
  

5.2 Елемент <option>

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

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

    
      <select name="color">
        <option value="red">Червоний</option>
        <option value="green">Зелений</option>
        <option value="blue">Синій</option>
      </select>
    
  

Основні атрибути <option>:

Атрибут value: встановлює значення, яке буде відправлене на сервер, якщо цей варіант обрано.

    
      <option value="red">Червоний</option>
    
  

Атрибут selected: визначає, чи має цей варіант бути обраним за замовчуванням.

    
      <option value="green" selected>Зелений</option>
    
  

Атрибут disabled: робить цей варіант недоступним для вибору.

    
      <option value="blue" disabled>Синій</option>
    
  

5.3 Елемент <optgroup>

Елемент <optgroup> використовується для групування пов'язаних варіантів всередині елемента <select>. Він дозволяє логічно розділити варіанти на категорії, що робить випадаючий список більш організованим і зрозумілим.

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

    
      <select name="car">
        <optgroup label="Німецькі автомобілі">
          <option value="mercedes">Мерседес</option>
          <option value="audi">Ауді</option>
          <option value="bmw">BMW</option>
        </optgroup>
        <optgroup label="Японські автомобілі">
          <option value="toyota">Тойота</option>
          <option value="honda">Хонда</option>
          <option value="nissan">Ніссан</option>
        </optgroup>
      </select>
    
  

Основні атрибути <optgroup>:

Атрибут label: встановлює заголовок групи варіантів.

    
      <optgroup label="Німецькі автомобілі"></optgroup>
    
  

Атрибут disabled: робить усі варіанти всередині цієї групи недоступними для вибору.

    
      <select name="car">
        <optgroup label="Німецькі автомобілі">
          <option value="mercedes">Мерседес</option>
          <option value="audi">Ауді</option>
          <option value="bmw">BMW</option>
        </optgroup>
        <optgroup label="Японські автомобілі" disabled>
          <option value="toyota">Тойота</option>
          <option value="honda">Хонда</option>
          <option value="nissan">Ніссан</option>
        </optgroup>
      </select>
    
  

Корисні поради з використання <select>, <option> і <optgroup>

1. Логічне групування: використовуйте <optgroup> для логічного групування пов'язаних варіантів: це зробить форму більш зручною для користувачів.
2. Множинний вибір: якщо потрібно надати користувачу можливість вибрати декілька варіантів, використовуйте атрибут multiple у <select>.
3. Доступність: використовуйте атрибути id і label для покращення доступності елементів форми. Правильне використання label покращує взаємодію з формою для всіх користувачів, включаючи тих, хто використовує допоміжні технології.
4. Стилизування: використовуйте CSS для покращення зовнішнього вигляду випадаючих списків і списків із множинним вибором. Наприклад:

    
      select {
        width: 200px;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
      }