Html select тег – Элементы HTML форм — выпадающий список (теги select, option, optgroup), текстовое поле (textarea), а также применение label, fieldset и legend | Создание сайтов и заработок в сети

Тег 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Определяет то, что выпадающий список автоматически попадает в фокус ввода при загрузке страницы.
DisableddisabledОпределяет то, что выпадающий список должен быть отключен.
form *form_idИдентифицирует одну или несколько форм, которым принадлежит выпадающий список.
MultiplemultipleЗадает возможность выбора сразу нескольких вариантов из списка.
Namenameназвание HTML раскрывающегося списка.
required *requiredУстанавливает обязательный выбор одного из пунктов списка перед отправкой данных формы.
Sizenumber Устанавливает число видимых пунктов в выпадающем списке.

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

Тег <select> также поддерживает атрибуты событий.

Нет.

Данная публикация представляет собой перевод статьи «HTML select Tag» , подготовленной дружной командой проекта Интернет-технологии.ру

Тег — Справочник html

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

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

Синтаксис

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

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

Атрибуты

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

Примеры

Пример 1.
html:
  1. Сколько длилась столетняя война?  
  2. <select>  
  3.     <option disabled>Варианты ответов:</option>  
  4.     <option value=»75″>75 лет</option>  
  5.     <option value=»100″>100 лет</option>  
  6.     <option value=»116″>116 лет</option>  
  7. </select>  
Сколько длилась столетняя война? <select атрибуты_элемента> <option disabled>Варианты ответов:</option> <option value=»1″>75 лет</option> <option value=»2″>100 лет</option> <option value=»3″>116 лет</option> </select>
результат:
Сколько длилась столетняя война? Варианты ответов:75 лет100 лет116 лет

Атрибут selected | htmlbook.ru


Internet ExplorerChromeOpera
Safari
FirefoxAndroidiOS
4.0+1.0+4.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

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

Синтаксис

HTML
<option selected>...</option>
XHTML
<option selected="selected">...</option>

Значения

Нет.

Значение по умолчанию

По умолчанию этот атрибут выключен.

Пример

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>
 <option value=»Ауди»>Ауди</option>
</select>

Попробуйте сами »

Определение и использование

Tег <select> используется для создания раскрывающегося списка.

Tеги <option> внутри тега <select> определяет доступные параметры в списке.


Поддержка браузеров

Элемент
<select>ДаДаДаДаДа

Советы и примечания

Совет: Элемент <select> является элементом управления формы и может использоваться в форме для сбора пользовательского ввода.


Различия между HTML 4.01 и HTML5

HTML5 добавил несколько новых атрибутов.


Атрибуты

= Новый в HTML5.

АтрибутЗначениеОписание
autofocusautofocusУказывает, что выпадающий список должен автоматически получать фокус при загрузке страницы
disableddisabledУказывает, что раскрывающийся список должен быть отключен
formform_idОпределяет одну или несколько форм, к которым принадлежит поле выбора
multiplemultipleУказывает, что одновременно можно выбрать несколько параметров
namenameОпределяет имя для раскрывающегося списка
requiredrequiredУказывает, что пользователь должен выбрать значение перед отправкой формы
sizenumberОпределяет количество видимых опций в раскрывающемся списке

Глобальные атрибуты

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.01HTML 5XHTML 1.0XHTML 1.1
Поддержка:ДаДаДаДа

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

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ДаДаДаДаДа

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+1.0+4.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.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>

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

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