Html select тег: Тег | htmlbook.ru

Leave a Comment / Html / By /

HTML тег

❮ Назад Вперед ❯

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

Для определения доступных вариантов выбора используется тег <option>, вложенный в тег <select>.

По умолчанию первый пункт в списке отображается как выбранный. Для изменения предопределенного варианта используется атрибут selected.

Для объединения нескольких вариантов в одну группу используется тег <optgroup>. Содержимое тега <optgroup> выглядит как заголовок жирного начертания.

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

Если необходимо отправлять данные на сервер, либо обращаться к списку через скрипты, то тег <select> необходимо поместить внутрь формы (тег <form>).

Содержимое элемента заключается между открывающим (<select>) и закрывающим (</select>) тегами. Закрывающий тег обязателен

Пример

<!DOCTYPE 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>

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

Результат

КнигиHTMLCSSPHPJavaScript

Пример

 <!DOCTYPE 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>

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

В этом примере мы использовали тег <optgroup> для сбора опций в группе.

Результат

HTMLCSSGitJava

Пример

<!DOCTYPE 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>

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

Результат

В этом примере мы использовали тег <form>, так как нам необходимо отправить данные на сервер.

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

Как добавить стиль к тегу <select> ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <select>:

  • 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.

Цвет текста внутри тега <select>:

  • CSS свойство color определяет цвет контента и оформления текста.
  • CSS свойство background-color устанавливает фоновый цвет элемента.

Стили форматирования текста для тега <select>:

  • CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
  • CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
  • CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
  • CSS свойство word-break указывает перенос строки.

Другие свойства для тега <select>:

  • CSS свойство text-shadow добавляет тень к тексту.
  • CSS свойство text-align-last выравнивает последнюю строку текста.
  • CSS свойство line-height устанавливает межстрочный интервал.
  • CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
  • CSS свойство word-spacing устанавливает расстояние между словами в тексте.

⚡️ 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 Атрибут формы выбора

❮ Тег HTML5
 


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

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

Атрибут формы определяет форму, которой принадлежит раскрывающийся список.

Значение этого атрибута должно быть равно атрибуту id <форма> элемент в том же документе.

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

Атрибут
форма Да Да Да Да Да

Синтаксис

. Значение этого атрибута должно быть равен атрибуту id элемента

в том же документе.
❮ Тег HTML

Пример

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

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

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

Атрибут размера указывает количество видимых параметров в раскрывающемся списке.

Если значение атрибута size больше 1, но меньше общее количество опций в списке, браузер добавит полосу прокрутки к указать, что есть дополнительные параметры для просмотра.

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

Атрибут
размер Да Да Да Да Да

Примечание. В Chrome и Safari этот атрибут может не работать, т.к. ожидается для size="2" и размер = "3" .

Синтаксис

<выбрать размер=" номер «>

Значения атрибутов

.
Значение Описание
номер Количество видимых опций в выпадающем списке. Значение по умолчанию — 1. Если присутствует множественный атрибут, значение по умолчанию — 4
❮ Тег HTML