Теги <select>, <optgroup> и <option> | HTML

Тег <select> и его атрибуты

Тег <select> [w3.org] создаёт список с вложенными выпадающими пунктами <option> [w3.org], которые можно группировать с помощью <optgroup> [w3.org].

<select>
  <option>Арбуз</option>
  <option>Дыня</option>
  <option>Тыква</option>
</select>

Ширина <select> равна ширине самого широкого <option> или определяется CSS.

<select>
  <option>Арбуз</option>
  <option>Длинный-предлинный пункт</option>
  <option>Дыня</option>
  <option>Тыква</option>
</select>

Атрибут size (значение по умолчанию: 0) определяет количество одновременно показанных строк.

<select size="3">
  <option>Арбуз</option>
  <option>Дыня</option>
  <option>Тыква</option>
  <option>Кабачок</option>
  <option>Баклажан</option>
  <option>Патиссон</option>
  <option>Огурец</option>
</select>

Атрибут multiple позволяет выбирать несколько пунктов списка.

  1. Вначале указывается первый пункт, затем с зажатой клавишей клавиатуры Ctrl второй и более.
  2. Вначале указывается первый пункт, затем с зажатой клавишей клавиатуры Shift последний. Пункты, находящиеся между ними также будут выделены.

Тут не имеет смысла устанавливать атрибут size меньше 4, так как выбирать несколько пунктов становится не удобно.

Значение атрибута name при этом пишется с квадратными скобками, что говорит о передачи данных на сервер в виде массива.

<select multiple name="vegetables[]">
  <option>Арбуз</option>
  <option>Дыня</option>
  <option>Тыква</option>
  <option>Кабачок</option>
  <option>Баклажан</option>
  <option>Патиссон</option>
  <option>Огурец</option>
</select>

Статья по теме: input type="file" multiple

Чтобы отправить форму на сервер, у <select> с атрибутом required должен быть обязательно выбран пункт. 

<form>
  <select required>
    <option></option>
    <option>Дыня</option>
    <option>Тыква</option>
    <option>Кабачок</option>
    <option>Баклажан</option>
    <option>Патиссон</option>
    <option>Огурец</option>
  </select>
  <input type="submit" value="Отправить"/>
</form>
<form>
  <select required>
    <option value="">Выбрать</option>
    <option>Дыня</option>
    <option>Тыква</option>
    <option>Кабачок</option>
    <option>Баклажан</option>
    <option>Патиссон</option>
    <option>Огурец</option>
  </select>
  <input type="submit" value="Отправить"/>
</form>
<form>
  <select required>
    <option value="" hidden>Выбрать</option>
    <option>Дыня</option>
    <option>Тыква</option>
    <option>Кабачок</option>
    <option>Баклажан</option>
    <option>Патиссон</option>
    <option>Огурец</option>
  </select>
  <input type="submit" value="Отправить"/>
</form>
<form>
  <select multiple name="vegetables[]" required>
    <option>Арбуз</option>
    <option>Дыня</option>
    <option>Тыква</option>
    <option>Кабачок</option>
    <option>Баклажан</option>
    <option>Патиссон</option>
    <option>Огурец</option>
  </select>
  <input type="submit" value="Отправить"/>
</form>

При отправке формы будет передано значение тега <select> несмотря на то, что он расположен вне её, так как он имеет атрибут form с тем же значением, что значение атрибута id у формы. 

<!-- форма не будет отправлена, пока не будет выбран пункт <select>, который размещён вне её -->

<form id="raz">
  <input type="submit" value="Отправить"/>
</form>
<select form="raz" required>
  <option></option>
  <option>Дыня</option>
  <option>Тыква</option>
  <option>Кабачок</option>
  <option>Баклажан</option>
  <option>Патиссон</option>
  <option>Огурец</option>
</select>

Атрибут disabled блокирует доступ к <select>, игнорируется required. 

<form>
  <select required disabled>
    <option></option>
    <option>Дыня</option>
    <option>Тыква</option>
    <option>Кабачок</option>
    <option>Баклажан</option>
    <option>Патиссон</option>
    <option>Огурец</option>
  </select>
  <input type="submit" value="Отправить"/>
</form>

Атрибут autofocus устанавливает фокус на элементе при загрузке страницы: пункты можно менять с помощью клавиатуры. 

<select autofocus>
  <option></option>
  <option>Дыня</option>
  <option>Тыква</option>
</select>

Тег <optgroup> и его атрибуты

Заголовок группы из <option> задаётся атрибутом label у тега <optgroup>. Блокировать доступ к группе пунктов можно с помощью атрибута disabled.

<select>
  <option value="" hidden>Выбрать</option>
  <optgroup label="Семейство «Тыквенные»">
    <option>Арбуз</option>
    <option>Дыня</option>
    <option>Тыква</option>
    <option>Огурец</option>
    <option>Кабачок</option>
    <option>Патиссон</option>
  </optgroup>
  <optgroup label="Семейство «Паслёновые»">
    <option>Баклажан</option>
    <option>Картофель</option>
    <option>Томат</option>
    <option>Перец стручковый</option>
  </optgroup>
  <optgroup label="Семейство «Амариллисовые»" disabled>
    <option>Лук</option>
    <option>Чеснок</option>
  </optgroup>
</select>

Закрывающийся тег у <option> и <optgroup> не обязателен.

<select>
  <option value="" hidden>Выбрать
  <optgroup label="Семейство «Тыквенные»">
    <option>Арбуз
    <option>Дыня
    <option>Тыква
    <option>Огурец
    <option>Кабачок
    <option>Патиссон
  <optgroup label="Семейство «Паслёновые»">
    <option>Баклажан
    <option>Картофель
    <option>Томат
    <option>Перец стручковый
  <optgroup label="Семейство «Амариллисовые»" disabled>
    <option>Лук
    <option>Чеснок
</select>

Тег <option> и его атрибуты

Атрибут selected устанавливает сразу (изначально) выбранный вариант ответа.

<select>
  <option>Арбуз</option>
  <option>Дыня</option>
  <option selected>Тыква</option>
  <option>Кабачок</option>
</select>
<select multiple name="vegetables[]">
  <option>Арбуз</option>
  <option>Дыня</option>
  <option selected>Тыква</option>
  <option selected>Кабачок</option>
  <option selected>Баклажан</option>
  <option>Патиссон</option>
  <option>Огурец</option>
</select>

Можно сказать, что <option> имеет два значения:

  1. то, что видит человек (значение атрибута label или если оно пусто содержимое тега <option>),
  2. то, что отправляется на сервер (значение атрибута value или если оно пусто содержимое тега <option>).

Человек видит тот же текст, что оправляется на сервер.

<select onchange="alert(this.value)">
  <option>Арбуз</option>
  <option>Дыня</option>
  <option>Тыква</option>
</select>

Человек видит содержимое тега <option>, а на сервер отправляется значение value.

<select onchange="alert(this.value)">
  <option value="Citrúllus lanátus">Арбуз</option>
  <option value="Cucumis melo">Дыня</option>
  <option value="Cucurbita">Тыква</option>
</select>

Атрибут disabled блокирует доступ к пункту.

<select>
  <option>Арбуз</option>
  <option>Дыня</option>
  <option disabled>Тыква</option>
  <option>Кабачок</option>
</select>
в f t
наверх ↑

3 комментария:

Космо Мизраил Горыныч
option value="" hidden Выбрать /option

Круто! Не знал про такое.
В мозилке можно без shift выбрать несколько пунктов, просто протягивая зажатую кнопку мыши по опшнам.
А вообще, multiple лучше заменять на выпадающий набор checkbox-ов =.="
NMitra
Ага, на placeholder похоже получается. Методом проб и ошибок :)

Согласна, только те, кто давно с компьютером на "ты" знают про Shift и Ctrl.
Космо Мизраил Горыныч
Селекты с multiple могут заменять списки с чекбоксами на телефонах. У меня на виндофоне показывается такой селект на странице примерно так же, как и на компе (но с большими отбивками и ярко-жёлтым фоном выделенного), а при нажатии показывается стандартный, полноэкранный, крупный и удобный... список чекбоксов :D с работающими disabled и optgroup.