Поле со списком

Поле со списком, называемое ещё ниспадающее меню, один из гибких и удобных элементов формы. В зависимости от настроек в списке можно выбирать одно или несколько значений. Преимущество списка в его компактности и универсальности, список может занимать одну или несколько строк, в нём можно выбирать одно или несколько значений. Поле со списком создаётся следующим образом.

<select>
 <option>Пункт 1</option>
 <option>Пункт 2</option> 
</select>

Элемент <select> выступает контейнером для пунктов списка и определяет его вид — будет ли это раскрывающийся список или же список с одним или множественным выбором. Вид зависит от использования атрибута size элемента <select>, который устанавливает высоту списка; ширина списка при этом определяется автоматически исходя из длины текста внутри <option>. Ниже представлен список множественного выбора, в котором пункты выделяются с помощью клавиши Ctrl и Shift, и раскрывающийся список.

Список множественного выбораРаскрывающийся список

Поскольку список формируется двумя элементами <select> и <option>, соответственно, у каждого этого элемента свои атрибуты. В табл. 1 перечислены атрибуты элемента <select>.

Табл. 1. Атрибуты <select>
АтрибутОписание
nameИмя списка для идентификации поля.
disabledБлокирует список для выбора.
formИдентификатор формы для связывания поля с элементом <form>.
sizeЧисло пунктов списка, показываемых пользователю.
multipleПозволяет выбрать несколько пунктов из списка. При наличии этого атрибута вид списка меняется, превращаясь в список множественного выбора.
autofocusЭлемент получает фокус после загрузки документа.
requiredПеред отправкой формы обязательно следует выбрать пункт списка.

Кроме того, есть ряд правил:

  • <select> нельзя вкладывать внутрь ссылок;
  • <select> нельзя вкладывать внутрь кнопок <button>;
  • внутри <select> должен быть хотя бы один элемент <option>.

Атрибуты элемента <option> перечислены в табл. 2.

Табл. 2. Атрибуты <option>
АтрибутОписание
disabledБлокирует пункт списка для выбора.
selectedПозволяет заранее выбрать пункт списка.
labelТекст, который отображается в пункте списка.
valueЗначение выбранного пункта списка, отправляемого на сервер.

Надо понимать, что если вам требуется выделить сразу несколько пунктов списка через атрибут selected, то для <select> следует добавить атрибут multiple, иначе это всё работать не будет.

Создание списка показано в примере 1.

Пример 1. Использование списка

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список</title>
 </head>
 <body>
  <form>
   <select name="day">
    <option value="mon">Понедельник</option>
    <option value="tue">Вторник</option>
    <option value="wed" selected>Среда</option>
    <option value="thu">Четверг</option>
    <option value="fri">Пятница</option>
    <option value="sat">Суббота</option>
    <option value="sun">Воскресенье</option>
   </select>
  </form> 
 </body>
</html>

Результат данного примера показан на рис. 1. Автоматический выделен третий пункт с помощью атрибута selected, поэтому список выходит за края области просмотра браузера.

Вид списка

Рис. 1. Вид списка

Группирование элементов списка

При достаточно обширном списке имеет смысл сгруппировать его элементы по блокам, чтобы обеспечить наглядность списка и удобство работы с ним. Для этой цели применяется элемент <optgroup>. Он представляет собой контейнер, внутри которого располагаются элементы <option>, объединённые в одну группу. Особенностью <optgroup> является то, что он не выделяется как обычный элемент списка, выводится жирным начертанием, а все элементы, входящие в этот контейнер, смещаются вправо от своего исходного положения. Для добавления заголовка группы используется атрибут label, как показано в примере 2.

Пример 2. Группирование элементов списка

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список</title>
 </head>
 <body>
  <form>
   <p><select name="food">
    <optgroup label="Русская кухня">
     <option value="r1">Закуска Барская</option>
     <option value="r2">Раки, фаршированные по-царски</option>
     <option value="r3">Биточки в горшочке</option>
    </optgroup>
    <optgroup label="Украинская кухня">
     <option value="u1">Галушки славянские</option>
     <option value="u2">Пампушки украинские</option>
     <option value="u3">Жаркое по-харьковски</option>
    </optgroup>
   </select></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Результат примера показан на рис. 2.

Группированный список

Рис. 2. Группированный список

Перейти к заданиям

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 10.08.2016
Редакторы: Влад Мержевич