Select selected

Предназначен для создания списка предложенных пунктов, из которого пользователь может выбрать один или несколько. Ограничивается тегами <select>…</select>.

Атрибуты тега <select>
autofocus
Автоматическое получение фокуса при загрузке страницы. Значение можно задать тремя способами:

<select autofocus>...</select> <select autofocus="">...</select> <select autofocus="autofocus">...</select>
disabled
Блокирует выбор из списка. Значение можно задать тремя способами:

<select disabled>...</select> <select disabled="">...</select> <select disabled="disabled">...</select>
multiple
Позволяет выбрать несколько пунктов списка одновременно.
едует обратить внимание, что при множественном выборе в потоке данных от одной формы может присутствовать несколько переменных с одним и тем же именем. Ваша программа обработки должна предусматривать подобные ситуации и корректно их обрабатывать.
name
Имя списка. Обязательный атрибут.
required
Обязательно должен быть выбран пункт с непустым значением. Если это не выполнено, то браузер выведет сообщение, а форма на сервер отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может (не работает в IE и Safari).
size
Вертикальный размер окна списка. Если атрибут опущен или его значение равно 1, выводится всплывающий список пунктов. Если указано число больше 1, то пункты списка выводятся в окне с полосой прокрутки. Если значение атрибута больше, чем фактическое количество пунктов списка, то добавляются пустые пункты. При их выборе пользователем возвращаются пустые поля.

Для тега <select> также доступны общие атрибуты и атрибуты обработки событий.

Пункт списка <option>

Каждый пункт списка ограничивается тегами <option>…</option>. Закрывающий тег необязателен.

Атрибуты тега <option>
disabled
Блокирует выбор пункта списка.
label
Метка пункта списка. Если указан атрибут label, то в списке выводится его значение вместо текста внутри тега <option> (в Firefox не работает).
selected
Пункт списка, выбранный по умолчанию.
value
Значение, передаваемое сценарию в случае выбора пользователем определенного пункта. Если этот атрибут отсутствует, то в сценарий будет отослан текст, расположенный сразу после тега <option>.

Любые теги,помещенные внутри тега option, будут проигнорированы.


Для тега <option> также доступны общие атрибуты и атрибуты обработки событий.

Пример выпадающего списка
<form>  <select name="s1">  <option value="tea">Чай</option>  <option value="coffee">Кофе</option>  <option value="milk">Молоко</option>  <option value="ham">Ветчина</option>  <option value="cheese">Сыр</option>  </select> </form>
Пример списка с множественным выбором
<form>  <select name="s2" size="5" multiple>  <option value ="tea">Чай</option>  <option value ="coffee" selected>Кофе</option>  <option value ="milk">Молоко</option>  <option value ="ham">Ветчина</option>  <option value ="cheese">Сыр</option>  </select> </form>    

Группа пунктов списка <optgroup>

Контейнер <optgroup>…</optgroup> позволяет группировать пункты списка. В этом случае названия каждой группы будут выделены жирным, а некоторые браузеры еще добавляют отступы, так что пользователю при выборе необходимого пункта ориентироваться гораздо проще.

Для тега <optgroup> доступны общие атрибуты и атрибуты обработки событий.

Пример группировки пунктов списка
<form>  <select name="s3" size="10">  <optgroup label="HTML">  <option value="h3">HTML3.2</option>  <option value="h4">HTML4.0</option>  <option value="h5">HTML5</option>  </optgroup>  <optgroup label="CSS">  <option value="css1">CSS1</option>  <option value="css2">CSS2</option>  <option value="css3">CSS3</option>  </optgroup>  <option value="js">JavaScript</option>  <option value="dhtml">DHTML</option>  </select> </form>

Более того, для дополнительной наглядности каждую группу с помощью CSS можно раскрасить в свой цвет.

htmlweb.ru

Поддержка браузерами


Описание

HTML тег <select> используется для создания раскрывающегося (выпадающего) списка, который появляется при щелчке мышью по элементу формы и позволяет посетителю сайта выбрать один из предопределенных вариантов.

Элемент <select> может содержать два и более тегов <option>, определяющих доступные варианты выбора в раскрывающемся списке. Текст первого дочернего элемента <option> будет изначально отображаться в выпадающем списке, то есть будет являться значением по умолчанию для списка. Изменить или задать значение по умолчанию для <select> можно прописав атрибут selected к нужному варианту:

<select>   <option value="volvo">Volvo</option>   <option value="saab">Saab</option>   <option value="vw">VW</option>   <option selected="" value="audi">Audi</option>  </select>  

Ширина раскрывающегося списка будет определяться самым длинным текстом, указанным в теге <option>.

Атрибуты

autofocus:
Указывает, что элемент должен автоматически получить фокус при загрузке веб-страницы. Возможные значения логического атрибута autofocus
:

  <select autofocus>  <select autofocus="autofocus">  <select autofocus="">  

Пример »

Примечание: атрибут autofocus не поддерживается в IE9 и более ранних версиях, и в Firefox.

disabled:
Указывает, что элемент неактивен, то есть пользователь не сможет взаимодействовать с элементом. Возможные значения логического атрибута disabled:

  <select disabled>  <select disabled="disabled">  <select disabled="">  

Пример »

form:
Определяет форму с которой связан элемент. В качестве значения атрибута выступает идентификатор элемента <form>. Этот атрибут позволяет размещать элемент <select> в произвольном месте документа, а не только в качестве потомка элемента <form>.

Примечание: атрибут form не поддерживается в Firefox.

multiple:
Указывает, что за один раз можно выбрать несколько вариантов. Выбор нескольких вариантов различается в зависимости от операционной системы:

  • Windows: удерживайте нажатой клавишу CTRL для выбора нескольких вариантов.
  • Mac: удерживайте нажатой клавишу CMD для выбора нескольких вариантов.

Возможные значения логического атрибута multiple:

  <select multiple>  <select multiple="multiple">  <select multiple="">  

Пример »

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

name:
Определяет имя для раскрывающегося списка. Оно может быть использовано для доступа к данным формы после ее отправки или для ссылки на элемент в JavaScript.
size:
Указывает количество видимых вариантов в раскрывающимся списке. Если значение атрибута size больше 1, но меньше общего количества вариантов списка, то браузер автоматически добавит полосу прокрутки, чтобы указать, что есть еще варианты для просмотра. Пример »

Тег <select> так же поддерживает Глобальные атрибуты и События

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

Нет.

Пример

  <select>   <option value="volvo">Volvo</option>   <option value="saab">Saab</option>   <option value="opel">Opel</option>   <option value="audi">Audi</option>  </select>   

Результат данного примера в окне браузера:

Пример использования тега <select>

puzzleweb.ru


You May Also Like

About the Author: admind

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector