HTML тег
HTML тег используется для определения выпадающего списка, который появляется при нажатии мышью на элемент формы и позволяет пользователю выбрать один из вариантов.
Для определения доступных вариантов выбора используется тег , вложенный в тег .
По умолчанию первый пункт в списке отображается как выбранный. Для изменения предопределенного варианта используется атрибут selected .
Для объединения нескольких вариантов в одну группу используется тег . Содержимое тега выглядит как заголовок жирного начертания.
Внешний вид списка зависит от использования атрибута size , который устанавливает высоту списка. Ширина списка зависит от длины текста в теге . Ширину можно также задать с помощью CSS стилей.
Если необходимо отправлять данные на сервер, либо обращаться к списку через скрипты, то тег
- Синтаксис
- Пример
- Результат
- Пример
- Результат
- Пример
- Результат
- Атрибуты
- Как добавить стиль к тегу ?
- Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :
- Цвет текста внутри тега :
- Стили форматирования текста для тега :
- Другие свойства для тега :
- Атрибуты тега select html
- Синтаксис¶
- Атрибуты¶
- autofocus¶
- disabled¶
- form¶
- multiple¶
- name¶
- required¶
- size¶
- Значения ARIA role¶
- Спецификации¶
- Описание и примеры¶
Синтаксис
Содержимое элемента заключается между открывающим () тегами. Закрывающий тег обязателен
Пример
html> html> head> title>Заголовок окна веб-страницы title> head> body> form action="action_form.php" target="_top"> select> option value="books">Книги option> option value="html">HTML option> option value="css">CSS option> option value="php">PHP option> option value="js">JavaScript option> select> form> body> html>Результат
Пример
html> html> head> title>Заголовок окна веб-страницы title> head> body> select> optgroup label="Книги"> option value="html">HTML option> option value="css">CSS option> optgroup> optgroup label="Сниппеты"> option value="git">Git option> option value="java">Java option> optgroup> select> body> html>В этом примере мы использовали тег для сбора опций в группе.
Результат
Пример
html> html> head> title>Заголовок окна веб-страницы title> head> body> p>Аэропорт вылета: p> form action="action_form.php" target="_top"> input type = "text" list = "airports" name="airports"> datalist id = "airports"> option value = "Санкт-Петербург"> option value = "Краснодар"> option value = "Москва"> option value = "Новосибирск"> datalist> input type = "submit" value = "подтвердить"> form> body> html>Результат
В этом примере мы использовали тег , так как нам необходимо отправить данные на сервер.
Атрибуты
| Атрибуты | Значение | Описание |
|---|---|---|
| autofocus | autofocus | Определяет, что список должен получить фокус при загрузке страницы. |
| disabled | disabled | Указывает, что список не активен, то есть пользователь не сможет взаимодействовать с ним. |
| form | form_id | Определяет форму с которой связан элемент. Не поддерживается в Firefox. |
| multiple | multiple | Указывает, что за один раз можно выбрать несколько вариантов. Способ выбора нескольких вариантов зависит от операционной системы: в Windows необходимо удерживать нажатой клавишу CTRL, в Mac — клавишу CMD. |
| name | name | Определяет имя для раскрывающегося списка. Оно может быть использовано для доступа к данным формы после ее отправки или для ссылки на элемент в JavaScript. |
| required | required | Указывает, что выбор значения является обязательным. |
| size | number | Указывает количество видимых вариантов в раскрывающимся списке. Если значение атрибута size больше 1, но меньше общего количества вариантов списка, то браузер автоматически добавит полосу прокрутки, чтобы указать, что есть еще варианты для просмотра. |
Как добавить стиль к тегу ?
Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :
- CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
- CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
- CSS свойство font-size задает размер щрифта.
- CSS свойство font-weight устанавливает насыщенность шрифта.
- CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
- CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.
Цвет текста внутри тега :
Стили форматирования текста для тега :
- CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
- CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
- CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
- CSS свойство word-break указывает перенос строки.
Другие свойства для тега :
- CSS свойство text-shadow добавляет тень к тексту.
- CSS свойство text-align-last выравнивает последнюю строку текста.
- CSS свойство line-height устанавливает межстрочный интервал.
- CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
- CSS свойство word-spacing устанавливает расстояние между словами в тексте.
Атрибуты тега select html
Тег (от англ. select — выбрать) позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором.
Синтаксис¶
select> option>Пункт 1option> option>Пункт 2option> select> Закрывающий тег обязателен.
Атрибуты¶
autofocus Устанавливает, что список получает фокус после загрузки страницы. disabled Блокирует доступ и изменение элемента. form Связывает список с формой. multiple Позволяет одновременно выбирать сразу несколько элементов списка. name Имя элемента для отправки на сервер или обращения через скрипты. required Список обязателен для выбора перед отправкой формы. size Количество отображаемых строк списка.
Также для этого элемента доступны универсальные атрибуты.
autofocus¶
Атрибут autofocus устанавливает, что список получает фокус после загрузки страницы, при этом список становится доступным для выбора пунктов, например, с помощью клавиатуры.
Значение по умолчанию
По умолчанию этот атрибут выключен.
disabled¶
Блокирует доступ и изменение элементов списка. Блокированный список не может получить фокус через курсор или клавиатуру, быть изменён, значение такого списка не передаётся на сервер.
Значение по умолчанию
По умолчанию этот атрибут выключен.
form¶
Связывает список с формой по её идентификатору. Такая связь необходима в случае, когда список располагается за пределами .
Идентификатор формы (значение атрибута id элемента ).
Значение по умолчанию
multiple¶
Наличие атрибута multiple сообщает браузеру отображать содержимое элемента как список множественного выбора. Конечный вид списка зависит от используемого атрибута size и браузера.
Для выбора нескольких значений списка применяются клавиши Ctrl и Shift совместно с курсором мыши.
Чтобы на сервер отправлялся массив данных, значение атрибута name следует писать с квадратными скобками — hero[] , к примеру.
Значение по умолчанию
По умолчанию этот атрибут выключен.
name¶
Определяет уникальное имя элемента . Как правило, это имя используется для доступа к данным через скрипты или для получения выбранного значения списка на сервере.
В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу по имени соблюдайте ту же форму написания, что и в атрибуте name .
Значение по умолчанию
required¶
Устанавливает список обязательным для выбора перед отправкой формы на сервер. Если пункт списка не выбран, браузер выведет сообщение, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может.
Значение по умолчанию
По умолчанию атрибут required выключен.
size¶
Устанавливает высоту списка. Если значение атрибута size равно 1, то список превращается в раскрывающийся. При добавлении атрибута multiple к элементу при size=»1″ список отображается как «крутилка». Во всех остальных случаях получается список с одним или множественным выбором.
Любое целое положительное число.
Значение по умолчанию
Зависит от атрибута multiple . Если он присутствует, то размер списка равен количеству элементов. Когда атрибута multiple нет, то по умолчанию значение атрибута size равно 1.
Значения ARIA role¶
- (без атрибута multiple и без атрибута size со значением больше 1 ) — role=combobox
- (с атрибутом multiple или с атрибутом size со значением больше 1 ) — role=listbox
Спецификации¶
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
html> head> meta charset="utf-8" /> title>SELECTtitle> 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> Список
Предназначен для создания списка предложенных пунктов, из которого пользователь может выбрать один или несколько. Ограничивается тегами .
Атрибуты тега
autofocus Автоматическое получение фокуса при загрузке страницы. Значение можно задать тремя способами:
multiple Позволяет выбрать несколько пунктов списка одновременно. Следует обратить внимание, что при множественном выборе в потоке данных от одной формы может присутствовать несколько переменных с одним и тем же именем. Ваша программа обработки должна предусматривать подобные ситуации и корректно их обрабатывать. name Имя списка. Обязательный атрибут. required Обязательно должен быть выбран пункт с непустым значением. Если это не выполнено, то браузер выведет сообщение, а форма на сервер отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может. size Вертикальный размер окна списка. Если атрибут опущен или его значение равно 1, выводится всплывающий список пунктов. Если указано число больше 1, то пункты списка выводятся в окне с полосой прокрутки. Если значение атрибута больше, чем фактическое количество пунктов списка, то добавляются пустые пункты. При их выборе пользователем возвращаются пустые поля.
Пункт списка
Каждый пункт списка ограничивается тегами . Закрывающий тег необязателен.
Атрибуты тега
disabled Блокирует выбор пункта списка. label Метка пункта списка. Если указан атрибут label, то в списке выводится его значение вместо текста внутри тега (в Firefox не работает). selected Пункт списка, выбранный по умолчанию. value Значение, передаваемое сценарию в случае выбора пользователем определенного пункта. Если этот атрибут отсутствует, то в сценарий будет отослан текст, расположенный сразу после тега .
Любые теги,помещенные внутри тега option, будут проигнорированы.
Пример выпадающего списка