Тег HTML | HTML/xHTML
Пример
Создание HTML раскрывающегося списка с четырьмя пунктами:
<select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>
Элемент <select> используется для создания выпадающего списка.
Теги <option> внутри элемента <select> определяют доступные варианты для выбора из списка.
Элемент | Chrome | IE | Firefox | Safari | Opera |
<select> | Да | Да | Да | Да | Да |
Элемент <select> является элементом управления формы, и может быть использован в ней для получения данных от пользователя с помощью раскрывающегося списка HTML.
В HTML5 было добавлено несколько новых атрибутов.
* введен в HTML5.
Атрибут | Значение | Описание |
autofocus * | autofocus | Определяет то, что выпадающий список автоматически попадает в фокус ввода при загрузке страницы. |
Disabled | disabled | Определяет то, что выпадающий список должен быть отключен. |
form * | form_id | Идентифицирует одну или несколько форм, которым принадлежит выпадающий список. |
Multiple | multiple | Задает возможность выбора сразу нескольких вариантов из списка. |
Name | name | название HTML раскрывающегося списка. |
required * | required | Устанавливает обязательный выбор одного из пунктов списка перед отправкой данных формы. |
Size | number | Устанавливает число видимых пунктов в выпадающем списке. |
Тег <select> также поддерживает глобальные атрибуты в HTML.
Тег <select> также поддерживает атрибуты событий.
Нет.
Данная публикация представляет собой перевод статьи «HTML select Tag» , подготовленной дружной командой проекта Интернет-технологии.ру
Тег — Справочник html
Общая информация
Тег <select> позволяет создавать списки внутри веб-документа. Нередко используется внутри форм или для организации навигации по сайту. Списки могут оформлены по-разному. Это может быть выпадающий список, когда видно одно значение, остальные открываются при клике. Либо же список с несколькими видимыми значениями. Определяется это атрибутом size. В зависимости от целей, из списка можно выбирать одно значение или несколько. Задается это соответствующим атрибутом multiple.
Синтаксис
- <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>
результат:
Сколько длилась столетняя война? Варианты ответов:75 лет100 лет116 летАтрибут selected | htmlbook.ru
Internet Explorer | Chrome | Opera | Firefox | Android | iOS | |
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Делает текущий пункт списка выделенным. Если у тега <select> добавлен атрибут multiple, то можно выделять более одного пункта.
Синтаксис
HTML |
|
XHTML |
|
Значения
Нет.
Значение по умолчанию
По умолчанию этот атрибут выключен.
Пример
HTML5IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег OPTION, атрибут selected</title>
</head>
<body>
<form action="option1.php">
<p><select name="hero">
<option>Выберите героя</option>
<option value="t1">Чебурашка</option>
<option value="t2">Крокодил Гена</option>
<option value="t3">Шапокляк</option>
<option selected value="t4">Крыса Лариса</option>
</select>
<input type="submit" value="Отправить"></p>
</form>
</body>
</html>
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Создание раскрывающего списка с четырьмя параметрами:
Пример
<select>
<option value=»Вольво»>Вольво</option>
<option value=»Мерседес»>Мерседес</option>
<option value=»Ауди»>Ауди</option>
</select> Попробуйте сами »
Определение и использование
Tег <select>
используется для создания раскрывающегося списка.
Tеги <option>
внутри тега <select>
определяет доступные параметры в списке.
Поддержка браузеров
Элемент | |||||
---|---|---|---|---|---|
<select> | Да | Да | Да | Да | Да |
Советы и примечания
Совет: Элемент <select>
является элементом управления формы и может использоваться в форме для сбора пользовательского ввода.
Различия между HTML 4.01 и HTML5
HTML5 добавил несколько новых атрибутов.
Атрибуты
= Новый в HTML5.
Атрибут | Значение | Описание |
---|---|---|
autofocus | autofocus | Указывает, что выпадающий список должен автоматически получать фокус при загрузке страницы |
disabled | disabled | Указывает, что раскрывающийся список должен быть отключен |
form | form_id | Определяет одну или несколько форм, к которым принадлежит поле выбора |
multiple | multiple | Указывает, что одновременно можно выбрать несколько параметров |
name | name | Определяет имя для раскрывающегося списка |
required | required | Указывает, что пользователь должен выбрать значение перед отправкой формы |
size | number | Определяет количество видимых опций в раскрывающемся списке |
Глобальные атрибуты
Tег <select>
также поддерживает Глобальные атрибуты в HTML.
Атрибуты событий
Tег <select>
также поддерживает Атрибуты событий в HTML.
Связанные страницы
Справочник HTML DOM: Объект Select
Учебник CSS: CSS Формы
Настройки CSS по умолчанию
Нет.
HTML тег select
Тег <select> используется для создания выпадающего списка.
Теги <option> внутри тега <select> определяют доступные варианты выбора в выпадающем списке.
Тег <select> является контрольным элементом формы и может использоваться для сбора пользовательских данных.
Разница между HTML 4.01 и HTML5
В HTML5 тегу <select> были добавлены новые атрибуты.Атрибуты тега <select>
Атрибут | Описание |
---|---|
autofocus | Автоматически передает фокус элементу |
disabled | Отключает выпадающий список |
form | Определяет к какой форме относится выпадающий список |
multiple | Позволяет выбирать больше одного пунктов выпадающего списка |
name | Определяет имя выпадающего списка |
required | Определяет выпадающий список, как обязательный для выбора |
size | Определяет количество одновременно видимых пунктов списка |
Общие атрибуты
Тег <select> поддерживает общие атрибуты и атрибуты-события.
HTML пример
Выпадающий список с четырьмя вариантами выбора:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
seodon.ru | Теги HTML — Тег SELECT
Опубликовано: 25.06.2010 Последняя правка: 10.12.2015
Тег <SELECT> применяется для создания выпадающего списка. Выпадающие списки — это такая разновидность меню, когда изначально видны не все его пункты, но при нажатии на любой из них или специальную кнопку — происходит отображение (выпадение) всех пунктов. Обычно тег <SELECT> используют внутри форм (тег <FORM>) для отправки данных на сервер. Но если вы используете выпадающее меню, например, для активации скриптов, то достаточно разместить тег <SELECT> внутри какого-нибудь элемента, который может содержать inline-теги.
Порой выпадающие списки выглядят вовсе не как «выпадающие», а как списки с прокруткой (скроллингом). Так браузеры отображают списки, теги <SELECT> которых имеют атрибут multiple позволяющий выбрать одновременно несколько пунктов или size со значением больше единицы, либо оба атрибута сразу.
Атрибуты
Личные атрибуты:
- disabled — Блокирует (деактивирует) выпадающий список.
- multiple — Разрешает выбор нескольких элементов (пунктов) выпадающего списка.
- name — Задает имя списку.
- size — Устанавливает высоту списка.
Общие атрибуты:
- accesskey — устанавливает клавишу быстрого доступа для фокусировки на HTML-элементе.
- class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).
- dir — указывает направление текста внутри элемента.
- id — задает имя идентификатора HTML-тега, который может использоваться в качестве «якоря» или в таблицах стилей.
- lang — указывает язык, на котором написан текст внутри HTML-элемента.
- style — необходим для применения встроенных стилей CSS к тегу.
- tabindex — устанавливает порядок табуляции между элементами (клавиша Tab).
- title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.
Тип тега
Назначение: формы.
Модель тега: inline (встроенный, уровня строки).
Должен содержать: теги <OPTGROUP> и/или <OPTION>.
Открывающий тег: необходим. Закрывающий тег: необходим.
Синтаксис
<select>
<option>содержимое</option>
</select>
Пример HTML: применение тега SELECT
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - Применение тега SELECT</title>
</head>
<body>
<form action="files/questions.php">
<p><select name="pers">
<option disabled>Персонажи</option>
<option value="1">Ниф-ниф</option>
<option value="2">Нуф-нуф</option>
<option value="3">Наф-наф</option>
</select>
<input type="submit" name="ok" value="Отправить"></p>
</form>
</body>
</html>
Результат примера
Результат. Применение тега SELECT.
Поддержка версиями HTML
Версия: | HTML 4.01 | HTML 5 | XHTML 1.0 | XHTML 1.1 |
Поддержка: | Да | Да | Да | Да |
Поддержка браузерами
Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari |
Версия: | 6.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
Поддержка: | Да | Да | Да | Да | Да |
Тег | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Тег <optgroup> представляет собой контейнер, внутри которого располагаются теги <option> объединенные в одну группу. Особенностью тега <optgroup> является то, что он не выделяется как обычный элемент списка, акцентируется с помощью жирного начертания, а все элементы, входящие в этот контейнер, смещаются вправо от своего исходного положения.
Синтаксис
<select>
<optgroup label="...">
<option>...</option>
</optgroup>
</select>
Атрибуты
- disabled
- Блокирует доступ к группе списка.
- label
- Текст, который будет входить в список в виде заголовка группы.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
Обязателен.
Пример
HTML5IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег OPTGROUP</title>
</head>
<body>
<form action="handler.php">
<p><select>
<optgroup label="Цвет">
<option value="c1">Апельсиновый</option>
<option value="c2">Лимонный</option>
<option value="c3">Персиковый</option>
</optgroup>
<optgroup label="Тон">
<option value="s1">Светлый</option>
<option value="s2">Нормальный</option>
<option value="s3">Темный</option>
</optgroup>
</select></p>
<p><input type="submit" value="Отправить"></p>
</form>
</body>
</html>