Html select option атрибуты

Синтаксис¶

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> 

Источник

Теги , и | HTML

Тег [w3.org] создаёт список с вложенными выпадающими пунктами [w3.org], которые можно группировать с помощью [w3.org].

Ширина равна ширине самого широкого или определяется CSS.

 Арбуз Длинный-предлинный пункт Дыня Тыква 

Атрибут size (значение по умолчанию: 0 ) определяет количество одновременно показанных строк.

size="3"> Арбуз Дыня Тыква Кабачок Баклажан Патиссон Огурец 

1. Вначале указывается первый пункт, затем с зажатой клавишей клавиатуры Ctrl второй и более.
2. Вначале указывается первый пункт, затем с зажатой клавишей клавиатуры Shift последний. Пункты, находящиеся между ними также будут выделены.

Тут не имеет смысла устанавливать атрибут size меньше 4 , так как выбирать несколько пунктов становится не удобно.

Значение атрибута name при этом пишется с квадратными скобками, что говорит о передачи данных на сервер в виде массива.

multiple name="vegetables[]"> Арбуз Дыня Тыква Кабачок Баклажан Патиссон Огурец 

Чтобы отправить форму на сервер, у с атрибутом required должен быть обязательно выбран пункт.

 
required> Дыня Тыква Кабачок Баклажан Патиссон Огурец  

 
required> value="">Выбрать Дыня Тыква Кабачок Баклажан Патиссон Огурец  

 
required> value="" hidden>Выбрать Дыня Тыква Кабачок Баклажан Патиссон Огурец  

 
multiple name="vegetables[]" required> Арбуз Дыня Тыква Кабачок Баклажан Патиссон Огурец  

При отправке формы будет передано значение тега несмотря на то, что он расположен вне её, так как он имеет атрибут form с тем же значением, что значение атрибута id у формы.

 , который размещён вне её --> 
id="raz"> 
 form="raz" required> Дыня Тыква Кабачок Баклажан Патиссон Огурец 

Атрибут disabled блокирует доступ к , игнорируется required .

 
disabled> Дыня Тыква Кабачок Баклажан Патиссон Огурец  

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

Тег и его атрибуты

Заголовок группы из задаётся атрибутом label у тега . Блокировать доступ к группе пунктов можно с помощью атрибута disabled .

  label="Семейство «Тыквенные»"> Арбуз Дыня Тыква Огурец Кабачок Патиссон  label="Семейство «Паслёновые»"> Баклажан Картофель Томат Перец стручковый  label="Семейство «Амариллисовые»" disabled> Лук Чеснок  

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

 Выбрать Арбуз Дыня Тыква Огурец Кабачок Патиссон Баклажан Картофель Томат Перец стручковый Лук Чеснок 

Тег и его атрибуты

Атрибут selected устанавливает сразу (изначально) выбранный вариант ответа.

 Арбуз Дыня selected>Тыква Кабачок 

 Арбуз Дыня selected>Тыква selected>Кабачок selected>Баклажан Патиссон Огурец 

1. то, что видит человек (значение атрибута label или если оно пусто содержимое тега ),
2. то, что отправляется на сервер (значение атрибута value или если оно пусто содержимое тега ).

Человек видит тот же текст, что оправляется на сервер.

Человек видит содержимое тега , а на сервер отправляется значение value .

 value="Citrúllus lanátus">Арбуз value="Cucumis melo">Дыня value="Cucurbita">Тыква 

Атрибут disabled блокирует доступ к пункту.

 Арбуз Дыня disabled>Тыква Кабачок 

3 комментария:

Космо Мизраил Горыныч option value=»» hidden Выбрать /option

Круто! Не знал про такое.
В мозилке можно без shift выбрать несколько пунктов, просто протягивая зажатую кнопку мыши по опшнам.
А вообще, multiple лучше заменять на выпадающий набор checkbox-ов =.=» NMitra Ага, на placeholder похоже получается. Методом проб и ошибок 🙂

Согласна, только те, кто давно с компьютером на «ты» знают про Shift и Ctrl. Космо Мизраил Горыныч Селекты с multiple могут заменять списки с чекбоксами на телефонах. У меня на виндофоне показывается такой селект на странице примерно так же, как и на компе (но с большими отбивками и ярко-жёлтым фоном выделенного), а при нажатии показывается стандартный, полноэкранный, крупный и удобный. список чекбоксов 😀 с работающими disabled и optgroup.

Источник

Html select option атрибуты

Один пункт в раскрывающемся списке .

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

Тег используется в интерактивных элементах управления для вёрстки одиночного пункта списка.

Пример

Скопировать ссылку «Пример» Скопировано

   Ваш город  -- Выберите город -- Санкт-Петербург Москва Казань Самара Пермь Новосибирск   form> label for="city-select">Ваш городlabel> select name="city" id="city-select"> option value="">-- Выберите город --option> option value="petersburg">Санкт-Петербургoption> option value="moscow">Москваoption> option value="kazan">Казаньoption> option value="samara">Самараoption> option value="perm">Пермьoption> option value="novosibirsk">Новосибирскoption> select> form>    Скопировать Скопировано Не удалось скопировать   

Подробно

Скопировать ссылку «Подробно» Скопировано

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

Атрибуты

Скопировать ссылку «Атрибуты» Скопировано

disabled

Скопировать ссылку «disabled» Скопировано

Атрибут булевого типа. Если задан, то пункт списка нельзя выбрать. Часто браузеры выделяют такой элемент управления серым цветом, и на нём не срабатывают события клика или фокуса. Даже если атрибут не задан, элемент всё равно может быть отключён, если находится внутри тега с заданным атрибутом disabled .

   -- Выберите город -- Санкт-Петербург Москва Казань Самара Пермь Новосибирск  select name="city1"> option value="">-- Выберите город --option> option value="petersburg">Санкт-Петербургoption> option value="moscow">Москваoption> option value="kazan">Казаньoption> option value="samara" disabled>Самараoption> option value="perm">Пермьoption> option value="novosibirsk">Новосибирскoption> select>    Скопировать Скопировано Не удалось скопировать   

label

Скопировать ссылку «label» Скопировано

Значение этого атрибута задаёт текст пункта в списке. Если атрибут не задан, то в качестве значения берётся текстовое содержимое тега .

   Санкт-Петербург Самара Волгоград Екатеринбург  select name="city2"> option value="petersburg" selected label="Ленинград">Санкт-Петербургoption> option value="samara" label="Куйбышев">Самараoption> option value="volgograd" label="Сталинград">Волгоградoption> option value="ekaterinburg" label="Свердловск">Екатеринбургoption> select>    Скопировать Скопировано Не удалось скопировать   

Несмотря на то, что задано текстовое содержимое тега , в выпадающем списке отображаются значения из атрибутов label :

selected

Скопировать ссылку «selected» Скопировано

   -- Выберите город -- Санкт-Петербург Москва Казань Самара Пермь Новосибирск  select name="city3"> option value="">-- Выберите город --option> option value="petersburg">Санкт-Петербургoption> option value="moscow">Москваoption> option value="kazan" selected>Казаньoption> option value="samara">Самараoption> option value="perm">Пермьoption> option value="novosibirsk">Новосибирскoption> select>    Скопировать Скопировано Не удалось скопировать   

   Санкт-Петербург Москва Казань Самара Пермь Новосибирск  select name="city4" multiple size="6"> option value="petersburg">Санкт-Петербургoption> option value="moscow" selected>Москваoption> option value="kazan" >Казаньoption> option value="samara" selected>Самараoption> option value="perm">Пермьoption> option value="novosibirsk">Новосибирскoption> select>    Скопировать Скопировано Не удалось скопировать   

value

Скопировать ссылку «value» Скопировано

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

На практике

Скопировать ссылку «На практике» Скопировано

Денис Ежков советует

Скопировать ссылку «Денис Ежков советует» Скопировано

🛠 Раньше браузеры не предоставляли никаких средств для нормальной стилизации элемента , и это доставляло очень много головной боли фронтенд-разработчикам 🙁 Стиль элементов можно было поменять, только если тегу был задан атрибут multiple . Тогда список целиком становился частью потока страницы, и мы имели возможность применять стили к его элементам. Вот как выглядело решение:

   Санкт-Петербург Москва Казань Самара Пермь Новосибирск  select name="city" id="city-select" multiple> option value="petersburg">Санкт-Петербургoption> option value="moscow">Москваoption> option value="kazan">Казаньoption> option value="samara">Самараoption> option value="perm">Пермьoption> option value="novosibirsk">Новосибирскoption> select>    Скопировать Скопировано Не удалось скопировать   

 select  counter-reset: cnt;> option:nth-child(2n)  background-color: #282a2e;> option  counter-increment: cnt;> option::before  content: counter(cnt) ". ";> select  counter-reset: cnt; > option:nth-child(2n)  background-color: #282a2e; > option  counter-increment: cnt; > option::before  content: counter(cnt) ". "; >    Скопировать Скопировано Не удалось скопировать   

Теперь практически все браузеры умеют стилизовать даже без атрибута multiple .

В Safari стилизация для доступна не полностью, даже если тег имеет атрибут multiple .

Источник