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 Определяет то, что выпадающий список автоматически попадает в фокус ввода при загрузке страницы.
Disabled disabled Определяет то, что выпадающий список должен быть отключен.
form * form_id Идентифицирует одну или несколько форм, которым принадлежит выпадающий список.
Multiple multiple Задает возможность выбора сразу нескольких вариантов из списка.
Name name название HTML раскрывающегося списка.
required * required Устанавливает обязательный выбор одного из пунктов списка перед отправкой данных формы.
Size number Устанавливает число видимых пунктов в выпадающем списке.

Тег <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 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

Описание

Делает текущий пункт списка выделенным. Если у тега <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.

Атрибут Значение Описание
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.01HTML 5XHTML 1.0XHTML 1.1
Поддержка:ДаДаДаДа

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

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия: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>

Отправить ответ

avatar
  Подписаться  
Уведомление о