Тег <select>

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

Самый простой пример использования <select>:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Если вы хотите, чтобы один из элементов был выбран по умолчанию, можно добавить к тегу <option> атрибут selected:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes" selected>Mercedes</option>
  <option value="audi">Audi</option>
</select>

В этом случае при первом отображении списка выберется "Mercedes".

Тег <optgroup> позволяет группировать элементы списка:

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

В этом примере автомобили Volvo и Saab сгруппированы под названием "Swedish Cars", а автомобили Mercedes и Audi - под названием "German Cars".

Также, если вы хотите предоставить возможность выбрать несколько вариантов из списка, можно добавить атрибут multiple к тегу <select>:

<select multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

В этом случае можно выбрать несколько вариантов, удерживая клавишу Control (или Command на Mac) при клике на вариантах списка. Количество видимых элементов списка можно управлять добавлением атрибута size ко внутри <select>.