Select html тег: Тег | htmlbook.ru

Leave a Comment / Html / By /

Содержание

| HTML | WebReference

  • Содержание
    • Синтаксис
    • Закрывающий тег
    • Атрибуты
    • Пример
    • Спецификация
    • Браузеры

<select> (от англ. selection — выбор) позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором. Конечный вид зависит от использования атрибута size, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в элементе <option>, а также может изменяться с помощью стилей. Каждый пункт создаётся с помощью элемента <option>, который должен быть вложен в контейнер <select>. Если планируется отправлять данные списка на сервер, то требуется поместить <select> внутрь формы. Это также необходимо, когда к данным списка идёт обращение через скрипты.

ЧебурашкаКрокодил ГенаШапоклякКрыса ЛарисаВыберите герояЧебурашкаКрокодил ГенаШапоклякКрыса Лариса
Список множественного выбораРаскрывающийся список

Синтаксис

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

Закрывающий тег

Обязателен.

Атрибуты

autofocus
Устанавливает, что список получает фокус после загрузки страницы.
disabled
Блокирует доступ и изменение элемента.
form
Связывает список с формой.
multiple
Позволяет одновременно выбирать сразу несколько элементов списка.
name
Имя элемента для отправки на сервер или обращения через скрипты.
required
Список обязателен для выбора перед отправкой формы.
size
Количество отображаемых строк списка.

Также для этого элемента доступны универсальные атрибуты и события.

Пример

<!DOCTYPE HTML> <html> <head> <meta charset=»utf-8″> <title>SELECT</title> </head> <body> <form action=»select1.php» method=»post»> <p><select size=»3″ multiple name=»hero[]»> <option disabled>Выберите героя</option> <option value=»Чебурашка»>Чебурашка</option> <option selected value=»Крокодил Гена»>Крокодил Гена</option> <option value=»Шапокляк»>Шапокляк</option> <option value=»Крыса Лариса»>Крыса Лариса</option> </select></p> <p><input type=»submit» value=»Отправить»></p> </form> </body> </html>

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

СпецификацияСтатус
WHATWG HTML Living StandardЖивой стандарт
HTML5Рекомендация
HTML 4. 01 SpecificationРекомендация

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Браузеры

31213.511
1161

Браузеры

В таблице браузеров применяются следующие обозначения.

  •  — элемент полностью поддерживается браузером;
  •  — элемент браузером не воспринимается и игнорируется;
  •  — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также

  • <option>
  • Поле со списком
  • Поле со списком
  • Пользовательские формы
  • Построение форм
  • Формы в HTML

Практика

  • Блокировка пункта списка
  • Блокировка списка
  • Выбор пунктов списка
  • Поле со списком
  • Раскрывающийся список
  • Список множественного выбора

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

Автор: Влад Мержевич

Последнее изменение: 09. 10.2018

Редакторы: Влад Мержевич

HTML и CSS с примерами кода

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

Конечный вид зависит от использования атрибута size, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в элементе

<option>, а также может изменяться с помощью стилей. Каждый пункт создаётся с помощью элемента <option>, который должен быть вложен в контейнер <select>. Если планируется отправлять данные списка на сервер, то требуется поместить <select> внутрь формы. Это также необходимо, когда к данным списка идёт обращение через скрипты.

Формы
  • button
  • datalist
  • fieldset
  • form
  • input
  • label
  • legend
  • meter
  • optgroup
  • option
  • output
  • progress
  • select
  • textarea

Синтаксис

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

Закрывающий тег обязателен.

Атрибуты

autofocus
Устанавливает, что список получает фокус после загрузки страницы.
disabled
Блокирует доступ и изменение элемента.
form
Связывает список с формой.
multiple
Позволяет одновременно выбирать сразу несколько элементов списка.
name
Имя элемента для отправки на сервер или обращения через скрипты.
required
Список обязателен для выбора перед отправкой формы.
size
Количество отображаемых строк списка.

Также для этого элемента доступны универсальные атрибуты.

autofocus

Атрибут autofocus устанавливает, что список получает фокус после загрузки страницы, при этом список становится доступным для выбора пунктов, например, с помощью клавиатуры.

Синтаксис

<select autofocus>
  ...
</select>

Значения

Нет.

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

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

disabled

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

Синтаксис

<select disabled>
  ...
</select>

Значения

Нет.

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

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

form

Связывает список с формой по её идентификатору. Такая связь необходима в случае, когда список располагается за пределами <form>.

Синтаксис

<select form="<идентификатор>">
  ...
</select>

Значения

Идентификатор формы (значение атрибута id элемента <form>).

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

Нет.

multiple

Наличие атрибута multiple сообщает браузеру отображать содержимое элемента <select> как список множественного выбора. Конечный вид списка зависит от используемого атрибута size и браузера.

Для выбора нескольких значений списка применяются клавиши Ctrl и Shift совместно с курсором мыши.

Чтобы на сервер отправлялся массив данных, значение атрибута name следует писать с квадратными скобками — hero[], к примеру.

Синтаксис

<select multiple>
  ...
</select>

Значения

Нет.

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

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

name

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

Синтаксис

<select name="<имя>">
  ...
</select>

Значения

В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу <select> по имени соблюдайте ту же форму написания, что и в атрибуте name.

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

Нет.

required

Устанавливает список обязательным для выбора перед отправкой формы на сервер. Если пункт списка не выбран, браузер выведет сообщение, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может.

Синтаксис

<select required>
  ...
</select>

Значения

Нет.

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

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

size

Устанавливает высоту списка. Если значение атрибута size равно 1, то список превращается в раскрывающийся. При добавлении атрибута multiple к элементу <select> при size="1" список отображается как «крутилка». Во всех остальных случаях получается список с одним или множественным выбором.

Синтаксис

<select size="<число>">
  . ..
</select>

Значения

Любое целое положительное число.

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

Зависит от атрибута multiple. Если он присутствует, то размер списка равен количеству элементов. Когда атрибута multiple нет, то по умолчанию значение атрибута size равно 1.

Значения ARIA role

  • <select> (без атрибута multiple и без атрибута size со значением больше 1) — role=combobox
  • <select> (с атрибутом multiple или с атрибутом size со значением больше 1) — role=listbox

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

  • WHATWG HTML Living Standard
  • HTML 5
  • HTML 4.01 Specification

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>SELECT</title>
  </head>
  <body>
    <form action="select1. php" method="post">
      <p>
        <select size="3" multiple name="hero[]">
          <option disabled>Выберите героя</option>
          <option value="Чебурашка">Чебурашка</option>
          <option selected value="Крокодил Гена">
            Крокодил Гена
          </option>
          <option value="Шапокляк">Шапокляк</option>
          <option value="Крыса Лариса">Крыса Лариса</option>
        </select>
      </p>
      <p><input type="submit" value="Отправить" /></p>
    </form>
  </body>
</html>

Ссылки

  • Тег <select> MDN (рус.)

Создание раскрывающихся списков внутри html-форм

  • Использование тегов <select> и <option>
  • Атрибуты тега <select>
  • Атрибуты тега <option>
  • Тег <optgroup> и его атрибуты
  • Тег <datalist> и его атрибуты

Использование тегов <select> и <option>

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

Атрибуты тега <select>

Элемент «select» также, как и элемент «input», обладает атрибутами: autofocus, disabled, form, required, name, имеющими аналогичное назначение. Их можно посмотреть в нашем справочнике здесь. Кроме того, для указания изначально видимого количества вариантов списка используется атрибут size, который в качестве значения принимает натуральные числа, и логический атрибут multiple, позволяющий выбирать сразу несколько вариантов. Если значение атрибута size больше единицы, но меньше общего количества имеющихся вариантов в списке, то браузер автоматически добавит полосу прокрутки, чтобы было ясно, что имеются еще варианты для выбора.

Использование элемента «select» показано в примере №1.

HTML Результат okmysiteCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<base href="https://site.name/">
	<title>Раскрывающиеся списки</title>
</head>
<body>
	<form action="php/registration.php" method="POST" name="reg_form">
		
		Укажите спортивный разряд: &nbsp; 		
		<!-- Создаем раскрывающийся список -->
		<select name="category">
			<option value="0">отсутствует</option>
			<option value="3" label="3-й">3-й взрослый</option>
			<option value="2" label="2-й">2-й взрослый</option>
			<option value="1" label="1-й">1-й взрослый</option>
			<option value="kms">КМС</option>
			<option value="ms">МС</option>
			<option value="msmk">МСМК</option>
		</select> <br><br> 
		
		Выберите виды спорта: <br><br>
		<!-- Изначально будет видно три пункта, но выбирать можно -->
		<!-- сразу несколько пунктов при нажатой клавише Ctrl -->
		<select name="sport[]" size="3" multiple>
			<option value="0" selected>Бокс</option>
			<option value="1">Вольная борьба</option>
			<option value="2">Дзюдо</option>
			<option value="3">Каратэ</option>
			<option value="4">Таэквондо</option>
		</select> <br><br> 
		
		<button type="submit" name="s_b" disabled>Отправить</button>
	</form>
</body>
</html>

Пример №1. Использование элемента «select»

Атрибуты тега <option>

Элемент «option» также имеет несколько своих атрибутов:

  • value – устанавливает значение пункта списка, которое будет отправлено на сервер или использовано скриптами;
  • disable – блокирует доступ к данному варианту списка; атрибут по умолчанию выключен и значений не принимает;
  • selected – если данный логический атрибут присутствует, то пункт списка будет заранее выделен, при этом пользователь сможет в случае необходимости снять выделение;
  • label – в качестве значения принимает строку, которая представляет собой сокращение основного текста, расположенного между открывающим и закрывающим тегами элемента «option»; если атрибут label указан, то в списке вариантов выводится его значение, а не основной текст.

Тег <optgroup> и его атрибуты

В случае необходимости группировки некоторых пунктов раскрывающегося списка применяется элемент «optgroup», который формируется парным тегом <optgroup> (от англ. option group – группа вариантов) и является контейнером для элементов «option», объединяемых в группу. Элемент имеет два собственных атрибута: disable и label. Первый атрибут является логическим и блокирует доступ к своей группе пунктов списка, а второй – принимает в качестве значения текст, который будет выводиться, как заголовок группы.

Использование элемента «optgroup» показано в примере №2.

HTML Результат okmysiteCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<base href="https://site.name/">
	<title>Элемент «optgroup»</title>
</head>
<body>
	<form action="php/registration.php" method="POST" name="reg_form">
		
		Укажите любимые фрукты и овощи: &nbsp; 		
		
		<select name="fruits_vegetables" multiple size="3">
			
			<optgroup label="Фрукты">	
				<option value="apple">Яблоки</option>
				<option value="pear">Груши</option>
				<option value="orange">Апельсины</option>
			</optgroup>	
			
			<optgroup label="Овощи">
				<option value="carrot">Морковь</option>
				<option value="beet">Свекла</option>
				<option value="potato">Картофель</option>
			</optgroup>	
			
		</select>     <br><br> 
		
		<button type="submit" name="s_b" disabled>Отправить</button>
	</form>
</body>
</html>

Пример №2. Использование элемента «optgroup»

Отметим, что элемент «optgroup» не может быть выделен пользователем, по умолчанию отображается полужирным шрифтом, а все пункты списка, расположенные внутри, смещаются вправо относительно своего исходного положения.

Тег <datalist> и его атрибуты

Еще одним дополнительным элементом, напоминающим раскрывающийся список и введенным в пятой версии HTML, является элемент «datalist», формирующийся парным тегом <datalist> (от англ. data list – перечень данных) и представляющий собой контейнер для хранения элементов «option». Данный элемент создает список вариантов, которые можно выбирать при вводе текста, т.е. используется для автозаполнения. Изначально список скрыт, но после получения текстовым полем фокуса и наборе текста, становится доступным для использования. Элемент имеет только глобальные атрибуты, а используется совместно с элементом «input», у которого имеется для этого атрибут list, принимающий в качестве значения id элемента «datalist».

Использование элемента «datalist» показано в примере №3.

HTML Результат okmysiteCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<base href="https://site.name/">
	<title>Элемент «datalist»</title>
</head>
<body>
	<form action="php/registration.php" method="POST" name="reg_form">
		
		<label> Вид единоборства: &nbsp; 
			<!-- Связываем данное поле с элементом «datalist» -->
			<!-- при помощи атрибута «list» -->
			<input type="text" name="box" list="sport"> 
		</label>
		
		<!-- Обязательно задаем атрибут «id» -->
		<datalist>
			<option value="box">
			<option value="karate">
			<option value="judo">
		</datalist><br><br>
		
		<input type="submit" value="Отправить" disabled> 		
		
	</form>
</body>
</html>

Пример №3. Использование элемента «datalist»

Как видно из примера, как только была введена буква «b», сразу же появилась подсказка. Если бы слов, начинающихся на букву «b» было больше, то все они появились бы в качестве вариантов автозаполнения. При вводе второго и последующих символов, в списке останутся только те варианты, которые начинаются на введенную последовательность символов.

Быстрый переход к другим страницам

  • Создание кнопок при помощи тега <button>
  • Создание раскрывающихся списков внутри форм
  • Группировка элементов формы, теги <fieldset> и <legend>
  • Вернуться к оглавлению учебника

Тег параметра HTML

❮ Предыдущий Полный справочник HTML Далее ❯


Пример

Выпадающий список с четырьмя вариантами:

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

Другие примеры «Попробуйте сами» ниже.

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

Тег определяет параметр в выберите список.

элементов находятся внутри


 

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

Пример

Использование элементы:


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

Связанные страницы

Ссылка HTML DOM: Option Object

Настройки CSS по умолчанию

Нет.

❮ Предыдущий Полный справочник HTML Далее ❯


НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА
КОД ИГРЫ

Играть в игру

Top Tutorials
Учебник HTML
Учебник CSS
Учебник по JavaScript
How To Tutorial
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Top References HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Тег выбора HTML | Синтаксис тега, примеры, атрибуты

❮ Пред. Следующий ❯

Тег HTML .

По умолчанию выбрана первая опция из списка опций. Чтобы изменить предопределенный параметр, используется выбранный атрибут.

Тег используется для группировки нескольких опций в одну группу. Содержимое выглядит как заголовок, выделенный жирным шрифтом.

Внешний вид списка зависит от атрибута размера, определяющего высоту списка. Ширина списка зависит от длины текста внутри

Тег сложна, и ее трудно контролировать. Для получения полного контроля вам может понадобиться библиотека с улучшенными виджетами форм или выпадающее меню, использующее несемантические элементы.

Если вам нужно отправить данные на сервер или обратиться к списку со скриптами, тег идет парами. Содержимое записывается между открывающим () тегами.

Пример тега HTML

с тегом:
 

  <голова>
    Заголовок окна страницы
  
  <тело>
     с тегом
:
 

  <голова>
    Заголовок окна страницы
  
  <тело>
    
Аэропорт отправления:

    <форма action="action_form.php" метод="получить">
      
      <список данных>
        
 Попробуй сам »
 В этом примере используется тег, так как нам нужно отправить информацию на сервер.
 Результат 
 Аэропорт отправления:
 Тег ?
 Общие свойства для изменения визуального веса/выделения/размера текста в теге 
:
  •  Свойство CSS color описывает цвет текстового содержимого и оформления текста.
  •  Свойство CSS background-color устанавливает цвет фона элемента.
 Стили макета текста для тега 
, на которые стоит обратить внимание:
  •  Свойство CSS text-shadow добавляет тень к тексту.
  •  Свойство CSS text-align-last задает выравнивание последней строки текста.
  •  Свойство CSS line-height определяет высоту строки.
  •  Свойство CSS letter-spacing определяет интервалы между буквами/символами в тексте.
  •  Свойство CSS word-spacing задает расстояние между словами.
 Что такое элемент выбора HTML? [+ Как его сделать] 
 Если у вас бизнес-сайт, вы, вероятно, захотите собирать ответы посетителей через формы. Формы — отличный способ собрать отзывы, информацию о заказе, личную информацию или любые другие данные, которые могут предоставить ваши посетители.
 Формы настолько полезны, что в HTML даже есть набор специальных элементов для сбора ответов на интерфейсе. Итак, если вы создаете сайт с нуля или разрабатываете пользовательскую страницу обратной связи, вы можете создавать формы в точном соответствии со своими требованиями.
 Одним из элементов формы, с которым вы будете часто сталкиваться, является HTML-элемент «select», который добавляет на страницу раскрывающееся поле формы. Есть большая вероятность, что вы недавно столкнулись с элементом выбора на веб-сайте — они интуитивно понятны, доступны и являются основным элементом дизайна формы. В этом посте мы покажем вам, как сделать его в HTML.
 Что такое элемент выбора HTML? 
 В HTML элемент select — это элемент формы, который создает раскрывающийся список параметров, из которых пользователь может выбрать один (или несколько, если разрешено). Элемент select обычно реализуется внутри HTML-форм для сбора пользовательских материалов и лучше всего подходит для выбора одного варианта из многих при сохранении места на странице.
 HTML-элемент select состоит из открывающего и закрывающего тега   .
 Далее идет сам элемент    объединяет элемент select с предыдущим элементом label.
 У нас есть три тега , вложенных в тег   , браузер пользователя автоматически сфокусируется на выбранном элементе при загрузке страницы.
 disabled 
 При добавлении к тегу    с элементом   на странице. Этот атрибут полезен для размещения тега    , пользователи должны выбрать ответ из раскрывающегося списка перед отправкой формы.
 размер 
 Если ваш    автоматически выбирает первый  вложенный в него. Если вы хотите установить другой элемент в качестве параметра по умолчанию, добавьте атрибут  selected  к нужному тегу . Ниже я сделал второй вариант ответом по умолчанию.
 См. атрибут Pen HTML Select: selected от Кристины Перриконе (@hubspot) на CodePen.
  
 Добавить текст заполнителя в HTML select 
 Заполнитель предотвращает выбор элемента списка по умолчанию — вместо этого вы можете сделать отображаемый текст подсказкой, например «Выберите один…» и т. д.
 Чтобы добавить заполнитель, напишите ваш текст-заполнитель как элемент  и добавьте к этому элементу атрибуты  disabled  и  selected .
 См. Pen HTML Select: placeholder от Christina Perricone (@hubspot) на CodePen.
  
 Элементы выбора группы HTML 
 Вы также можете разделить элементы ответов на группы, что удобно для особенно больших раскрывающихся списков. Вложите теги   (option group) в основной тег   , вложенные в тег  , включаются в форму, и ответы отправляются, когда пользователь нажимает кнопку отправки. Вот как выглядит HTML-форма, содержащая элемент отправки:
 См. Pen HTML Select:forms 1 от Christina Perricone (@hubspot) на CodePen.
 Вы также можете поместить элемент