Тег <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>.