Главная → HTML → Тег <select>

Тег <select>

Общая информация

Тег <select> позволяет создавать списки внутри веб-документа. Нередко используется внутри форм или для организации навигации по сайту. Списки могут оформлены по-разному. Это может быть выпадающий список, когда видно одно значение, остальные открываются при клике. Либо же список с несколькими видимыми значениями. Определяется это атрибутом size. В зависимости от целей, из списка можно выбирать одно значение или несколько. Задается это соответствующим атрибутом multiple.

Синтаксис

<select атрибуты_элемента>
<option>Первый элемент списка</option>
<option>Второй элемент списка</option>
<option>Третий элемент списка</option>
</select>

<select атрибуты_элемента>
    <option>Первый элемент списка</option>
    <option>Второй элемент списка</option>
    <option>Третий элемент списка</option>
</select>

Наличие закрывающего тега обязательно.

Атрибуты

name - имя (идентификатор), под которым будет обработан этот элемент.
size - размер видимых строк в списке (по умолчанию size="1")
multiple - делает выбор нескольких значений из списка
required - делает выбор из списка обязательным перед отправкой всей формы
disabled - запрещает изменение выбор в списке
autofocus - после загрузки страниц задает автофокус на данном списке
form - связь списка с формой по имени, например, если он за её пределами
accesskey - задает сочетание "горячих" клавиш для перехода к списку

Примеры

Пример 1.

html:

Сколько длилась столетняя война?
<select>
<option disabled>Варианты ответов:</option>
<option value="75">75 лет</option>
<option value="100">100 лет</option>
<option value="116">116 лет</option>
</select>

Сколько длилась столетняя война?
<select атрибуты_элемента>
    <option disabled>Варианты ответов:</option>
    <option value="1">75 лет</option>
    <option value="2">100 лет</option>
    <option value="3">116 лет</option>

</select>

результат:

Сколько длилась столетняя война?

списки

Добавить комментарий