Тег select
Выпадающий список для выбора опций. Используется с тегом option при создании форм (form).
<form action="/" method="post">
<label for="country">Выберите страну:</label>
<select name="country" id="country">
<option value="russia">Россия</option>
<option value="latvia">Латвия</option>
</select>
</form>
Стили по умолчанию
Стили которые браузер применяет к элементу по-умолчанию. В списке ниже приведены стили, которые влияют на внешний вид элемента и изменяются при помощи CSS.
select {
color: black;
display: inline-block;
white-space: pre;
background-color: white;
cursor: default;
font: 400 13.3333px Arial;
border-width: 1px;
border-style: solid;
border-color: rgb(169, 169, 169);
}Атрибуты
name=""
Задает уникальное имя выпадающего списка для последующей обработки на сервере.
required
Указывает что поле обязательно для заполнения. Браузерная проверка.
disabled
Поле недоступно для выбора значений.
<form action="/" method="post">
<label for="country2">Выберите страну:</label>
<select name="country2" id="country2" disabled>
<option value="russia">Россия</option>
<option value="latvia">Латвия</option>
</select>
</form>autofocus
Устанавливает фокус в данное поле по умолчанию при загрузке страницы.
multiple
Дает возможность выбрать несколько вариантов. Чтобы выбрать несколько вариантов зажмите клавишу Ctrl и щелкайте по вариантам
<form action="/" method="post">
<label for="skills">Ваши навыки:</label><br>
<select name="skills" id="skills" multiple>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">Javascript</option>
</select>
</form>size=""
Задает сколько вариантов для выбора будет видно в окне до появления скролла. Доступен, если используется атрибут multiple
<form action="/" method="post">
<label for="skills2">Ваши навыки:</label><br>
<select name="skills2" id="skills2" multiple size="3">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">Javascript</option>
<option value="php">PHP</option>
<option value="mysql">MySQL</option>
</select>
</form>tabindex=""
Указывает последовательность перехода по полям формы при нажатии на кнопку tab. Указывается целое положительное либо отрицательное число.