Множественный выбор и списки

5.1 Элемент <select>

Элементы <select>, <option> и <optgroup> используются для создания выпадающих списков и списков с множественным выбором в HTML-формах. Благодаря этим элементами пользователи могут выбирать один или несколько вариантов из заранее определенного набора значений.

Элемент <select> используется для создания выпадающего списка. Он содержит один или несколько элементов <option>, которые представляют возможные варианты для выбора.

Пример использования:

    
      <label for="country">Choose a country:</label>
      <select id="country" name="country">
        <option value="us">United States</option>
        <option value="ca">Canada</option>
        <option value="mx">Mexico</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">Apple</option>
        <option value="banana">Banana</option>
        <option value="cherry">Cherry</option>
      </select>
    
  

Атрибут size: устанавливает количество видимых строк в выпадающем списке. Это полезно для создания списков с прокруткой.

    
      <select name="cities" size="4">
        <option value="ny">New York</option>
        <option value="la">Los Angeles</option>
        <option value="chicago">Houston</option>
      </select>
    
  

5.2 Элемент <option>

Элемент <option> используется внутри <select> для определения каждого варианта, который пользователь может выбрать.

Пример использования:

    
      <select name="color">
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
      </select>
    
  

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

Атрибут value: устанавливает значение, которое будет отправлено на сервер, если этот вариант выбран.

    
      <option value="red">Red</option>
    
  

Атрибут selected: определяет, должен ли этот вариант быть выбранным по умолчанию.

    
      <option value="green" selected>Green</option>
    
  

Атрибут disabled: делает этот вариант недоступным для выбора.

    
      <option value="blue" disabled>Blue</option>
    
  

5.3 Элемент <optgroup>

Элемент <optgroup> используется для группировки связанных вариантов внутри элемента <select>. Он позволяет логически разделить варианты на категории, что делает выпадающий список более организованным и понятным.

Пример использования:

    
      <select name="car">
        <optgroup label="German Cars">
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
          <option value="bmw">BMW</option>
        </optgroup>
        <optgroup label="Japanese Cars">
          <option value="toyota">Toyota</option>
          <option value="honda">Honda</option>
          <option value="nissan">Nissan</option>
        </optgroup>
      </select>
    
  

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

Атрибут label: устанавливает заголовок группы вариантов.

    
      <optgroup label="German Cars"></optgroup>
    
  

Атрибут disabled: делает все варианты внутри этой группы недоступными для выбора.

    
      <select name="car">
        <optgroup label="German Cars">
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
          <option value="bmw">BMW</option>
        </optgroup>
        <optgroup label="Japanese Cars" disabled>
          <option value="toyota">Toyota</option>
          <option value="honda">Honda</option>
          <option value="nissan">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;
      }
    
  

1

Задача

Модуль 1: Web Core, 5 уровень, 4 лекция

Недоступна

Выбор страны

Выбор страны

Открыть

1

Задача

Модуль 1: Web Core, 5 уровень, 4 лекция

Недоступна

Выбор автомобиля

Выбор автомобиля

Открыть