Тег 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>
Chrome
Все
Edge
Все
FireFox
Все
IE
6+
iOS Safari
Все
Opera
Все
Safari
Все

Стили по умолчанию

Стили которые браузер применяет к элементу по-умолчанию. В списке ниже приведены стили, которые влияют на внешний вид элемента и изменяются при помощи 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. Указывается целое положительное либо отрицательное число.

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии