Разное

Html поле со списком: Поле со списком | htmlbook.ru

26.01.2018

Содержание

Поле со списком | htmlbook.ru

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

<select атрибуты>
  <option атрибуты>Пункт 1</option>
  <option атрибуты>Пункт 2</option> 
</select>

Тег <select> выступает контейнером для пунктов списка и определяет его вид, будет ли это раскрывающийся список или же список с одним или множественным выбором. Вид зависит от использования атрибута size тега <select>, который устанавливает высоту списка, ширина списка при этом определяется автоматически исходя из длины текста внутри <option>. Ниже представлен список множественного выбора, в котором пункты выделяются с помощью клавиши Ctrl и Shift и раскрывающийся список.

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

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

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

multiple

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

Чебурашка Крокодил Гена Шапокляк Крыса Лариса Чебурашка Крокодил Гена Шапокляк Крыса Лариса
Атрибут size отсутствуетАтрибут size равен 2

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

В примере 1 показано создание списка множественного выбора.

Пример 1. Список множественного выбора

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список</title>
 </head>
 <body>
  <form>
   <p><select name="select" size="3" multiple>
    <option selected value="s1">Чебурашка</option>
    <option value="s2">Крокодил Гена</option>
    <option value="s3">Шапокляк</option>
    <option value="s4">Крыса Лариса</option>
   </select>
   <input type="submit" value="Отправить"></p> 
  </form>
 </body>
</html>

name

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

size

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

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

Тег <option> также имеет атрибуты, влияющие на вид списка, они представлены далее.

selected

Делает текущий пункт списка выделенным. Если у тега <select> добавлен атрибут multiple, то можно выделять более одного пункта.

value

Определяет значение пункта списка, которое будет отправлено на сервер. На сервер отправляется пара «имя/значение», где имя задаётся атрибутом name тега <select>, а значение — атрибутом value выделенных пунктов списка. Значение может как совпадать с текстом пункта, так быть и самостоятельным.

label

Предназначен для указания метки пункта списка, сокращённой по сравнению с текстом внутри <option>. Если атрибут label присутствует, то текст внутри тега <option> игнорируется и в списке выводится значение label. Браузер Firefox не поддерживает этот атрибут.

Создание списка показано в примере 2.

Пример 2. Использование списка

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список</title>
 </head>
 <body>
  <form>
   <p><strong>Выбери персонажа</strong></p>
   <p><select name="hero">
    <option value="s1">Чебурашка</option>
    <option value="s2" selected>Крокодил Гена</option>
    <option value="s3">Шапокляк</option>
    <option value="s3" label="Лариса">Крыса Лариса</option>
   </select> 
   <input type="submit" value="Отправить"></p>
  </form> 
 </body>
</html>

Группирование элементов списка

При достаточно обширном списке имеет смысл сгруппировать его элементы по блокам, чтобы обеспечить наглядность списка и удобство работы с ним. Для этой цели применяется тег <optgroup>. Он представляет собой контейнер, внутри которого располагаются теги <option> объединённые в одну группу. Особенностью тега <optgroup> является то, что он не выделяется как обычный элемент списка, акцентируется с помощью жирного начертания, а все элементы, входящие в этот контейнер, смещаются вправо от своего исходного положения. Для добавления заголовка группы используется атрибут label, как показано в примере 3.

Пример 3. Группирование элементов списка

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список</title>
 </head>
 <body>
  <form>
   <p><select name="food">
    <optgroup label="Русская кухня">
     <option value="r1">Закуска Барская</option>
     <option value="r2">Раки, фаршированные по-царски</option>
     <option value="r3">Биточки в горшочке</option>
    </optgroup>
    <optgroup label="Украинская кухня">
     <option value="u1">Галушки славянские</option>
     <option value="u2">Пампушки украинские</option>
     <option value="u3">Жаркое по-харьковски</option>
    </optgroup>
   </select></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Результат примера показан на рис. 1.

Рис. 1. Группированный список

Тег HTML выпадающий список

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

С помощью атрибута multiple можно создать список с выбором нескольких значений (список с множественным выбором).

Пункты выпадающего списка определяются с помощью тега <option>. Тег <optgroup> определяет группы пунктов внутри выпадающего списка HTML.

Выпадающий список в HTML является одним из элементов форм. Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.

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

Синтаксис

<select>элементы списка</select>

Примеры использования выпадающего списка <select> в HTML коде

Ниже представлены 4 основных варианта выпадающих списков HTML.

Простой HTML выпадающий список

Синий Зеленый Желтый Красный Оранжевый Черный

HTML код простого выпадающего списка

 
<select name="user_profile_color_1">
<option value="1">Синий</option>
<option value="2">Зеленый</option>
<option value="3">Желтый</option>
<option value="4">Красный</option>
<option value="5">Оранжевый</option>
<option value="6">Черный</option>
</select>

Выпадающий список с выбором нескольких значений

Добавить списку возможность множественного выбора (выбора одновременно нескольких значений) можно используя атрибут multiple. Количество одновременно выводимых на экран пунктов списка с множественным выбором регулируется с помощью атрибута size.

Атрибут name такого списка должен заканчиваться символами «[]», например, name=»cars[]».

Nissan Toyota BMW Wolksvagen Skoda Mercedes-Benz

HTML код выпадающего списка с выбором нескольких значений

<select name="user_cars[]" multiple="multiple" size="4">
<option value="1">Nissan</option>
<option value="2">Toyota</option>
<option value="3">BMW</option>
<option value="4">Wolksvagen</option>
<option value="5">Skoda</option>
<option value="6">Mercedes-Benz</option>
</select>

Раскрывающийся список с группами пунктов

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

Москва Санкт-Петербург Новосибирск Киев Харьков Львов Минск Бобруйск Гомель

HTML код раскрывающегося списка с группами пунктов

<select name="user_city">
<optgroup label="Россия">
<option value="1">Москва</option>
<option value="2">Санкт-Петербург</option>
<option value="3">Новосибирск</option>
</optgroup>
<optgroup label="Украина">
<option value="4">Киев</option>
<option value="5">Харьков</option>
<option value="6">Львов</option>
</optgroup>
<optgroup label="Беларусь">
<option value="7">Минск</option>
<option value="8">Бобруйск</option>
<option value="9">Гомель</option>
</optgroup>
</select>

HTML список обязательный для заполнения (выбора)

Для того, чтобы создать список select, обязательный для заполнения (<select> список, где пользователь должен обязательно выбрать значение) нужно использовать атрибут required, а также добавить внутрь списка первым пунктом <option> с пустым значением атрибута value.

Выберите значение Синий Зеленый Желтый Красный Оранжевый Черный

HTML код выпадающего списка обязательного для выбора (заполнения)

<select name="user_profile_color_2" required="required">
<option value="">Выберите значение</option>
<option value="1">Синий</option>
<option value="2">Зеленый</option>
<option value="3">Желтый</option>
<option value="4">Красный</option>
<option value="5">Оранжевый</option>
<option value="6">Черный</option>
</select>

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

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

Атрибут Значения Описание
autofocus не указывается / autofocus

Логический атрибут. Если указан, при загрузке документа фокус будет переведен на список.
disabled не указывается / disabled

Логический атрибут. Если указан, делает список неактивным.

Данные списка, отмеченного этим атрибутом, не будут переданы на сервер при отправке формы. Атрибут также отключает возможность изменения состояния списка пользователем (например, изменение выбранного пункта).
form id формы

Указывает на форму, к которой относится список. Используется, если список <select> находится вне HTML кода формы.

Если список находится внутри тега <form>, то использовать атрибут form не нужно, список по умолчанию привязан к форме, внутри которой находится.
multiple не указывается / multiple

Логический атрибут. Открывает возможность множественного выбора. Если указан, вместо выпадающего списка будет выведен список с возможностью выбрать несколько значений (пунктов) одновременно. Количество элементов, доступных без скроллинга регулируется атрибутом size.
name текст

Имя списка. Используется при передаче данных формы на сервер. Значение списка будет передано в переменной, имеющей имя, указанное в этом атрибуте.
required не указывается / required

Логический атрибут. Если указан, список будет определен как обязательный для заполнения (обязательный для выбора). Форма не будет отправлена на сервер, если в таком списке не будет выбрано ни одно значение.

Заполнение контролируется браузером. При попытке отправить форму с незаполненным обязательным списком браузеры обычно выводят на экран ошибку заполнения.
size число

Количество пунктов списка, одновременно выводимых на экран. Для выпадающего списка используется значение 1. Это значение по умолчанию.

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

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

Как создать в HTML выпадающий список?

Приветствую вас, друзья и коллеги!

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

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

Навигация по статье:

Как сделать раскрывающийся список html

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

Перечень атрибутов для тега <select>:

autofocus – установка фокуса на элементе при загрузки страницы
disabled – отключение элемента
multiple – множественный выбор элементов раскрывающегося списка html
required – делает обязательным для заполнения
size – определяет высоту в закрытом состоянии. Задается числовым значением.
form – подключение к форме обратной связи
name – имя, для получения выбранного значения и передачи его в скрипт для обработки

Для последних трёх значение указывается в кавычках, все остальные просто дописываются к тегу <select>

Атрибуты для тега <option>:

disabled – позволят заблокировать пункт для выбора
label — дает возможность задать метку для элемента
selected – устанавливает пункт выбранным по умолчанию
value – позволяет задать значение для пункта, которое будет передано в форму для отправки или в скрипта для обработки.

Ниже я приведу несколько примеров использования атрибутов для тегов <select> и <option>

Пример самого простого раскрывающегося списка html:

Код:

<select> <option>Опция 1</option> <option>Опция 2</option> </select>

<select>

  <option>Опция 1</option>

  <option>Опция 2</option>

</select>

html выпадающий список

Размер выпадающего элемента, то есть, количество отображаемых элементов зависит от заданного параметра size. В случае, если он не задан, то в раскрывающемся списке html отображается по умолчанию 1 элемент.

Ширина элемента по умолчанию определяется исходя из ширины самой длинной записи. Так же ее можно изменять CSS-стилями.

HTML выпадающий список с множественным выбором

По умолчанию доступен для выбора только один элемент. Если есть необходимость предоставления множественного выбора, то можно использовать атрибут multiple. Вот пример использования атрибута:

<select multiple> <option>Москва </option> <option>Санкт-Петербург</option> </select>

<select  multiple>

  <option>Москва </option>

  <option>Санкт-Петербург</option>

</select>

html выпадающий список с множественным выбором

Выбор нескольких позиций осуществляется при помощи зажатой клавиши CTRL + клик указателем мышки по нужному элементу.

При использовании множественного выбора, атрибут size будет принимать значение, равное количеству пунктов.

Как задать выбранный пункт по умолчанию

В случае если вам нужно задать в html выпадающем списке опцию, которая будет отображаться по умолчанию, используем атрибут selected. Например:

<select name=»country»> <option disabled>Выберите страну</option> <option selected>Россия</option> <option >Белоруссия</option> </select>

<select name=»country»>

    <option disabled>Выберите страну</option>

    <option selected>Россия</option>

    <option >Белоруссия</option>

</select>

Обратите внимание. Если первый пункт раскрывающегося списка html задать с атрибутом disabled, то его можно использовать как подсказку или placeholder.

Как подключить раскрывающийся список html к форме

После того как вы сделаете html выпадающий список, вам нужно будет как-то использовать полученные значения. Для этого мы можем использовать два атрибута name и form.

Атрибут name позволяет задать имя для <select>. Далее, заданное имя можно использовать в качестве переменной в скриптах.

Например:

<select name=»count» > <option value=» Москва «>Москва</option> <option value=» Казахстан «>Казахстан</option> <option value=» Белоруссия «>Белоруссия</option> </select>

<select name=»count» >

    <option value=» Москва «>Москва</option>

    <option value=» Казахстан «>Казахстан</option>

    <option value=» Белоруссия «>Белоруссия</option>

</select>

Далее, вы можете использовать полученные данные в php-функции. Например, вот так:

function dataSelect(a) { n = a.count.selectedIndex if(n) alert(«Страна: » + f.count.options[n].value) }

function dataSelect(a) {

      n = a.count.selectedIndex

      if(n) alert(«Страна: » + f.count.options[n].value)

    }

Атрибут form дает нам возможность подключить наш раскрывающийся список html к какой-либо форме на нашем сайте, в случае если он находится вне тега <form>. В кавычках нужно указать идентификатор формы, к которой мы хотим подключить наш html выпадающий список.

Например:

<select form=»cont-form «> <option value=»2″>2х2</option> <option value=» 3 «>3х3</option> <option value=» 4 «>4х4</option> </select>

<select form=»cont-form «>

    <option value=»2″>2х2</option>

    <option value=» 3 «>3х3</option>

    <option value=» 4 «>4х4</option>

</select>

Где «cont-form» — это ID формы.

Надеюсь, данная статья поможет вам разобраться, как сделать в html выпадающий список для своего сайта. Если вам понравилась данная статья, не забудьте поделиться ею в социальных сетях и оставить комментарий. Так же вы можете заглянуть на мой YouTube-канал, где найдете много интересного материала по созданию сайтов и интернет магазинов.

Успехов вам в создании выпадающих списков!
До встречи в следующих статьях!

С уважением Юлия Гусарь

Поле со списком | Учебные курсы

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

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

Элемент <select> выступает контейнером для пунктов списка и определяет его вид — будет ли это раскрывающийся список или же список с одним или множественным выбором. Вид зависит от использования атрибута size элемента <select>, который устанавливает высоту списка; ширина списка при этом определяется автоматически исходя из длины текста внутри <option>. Ниже представлен список множественного выбора, в котором пункты выделяются с помощью клавиши Ctrl и Shift, и раскрывающийся список.

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

Поскольку список формируется двумя элементами <select> и <option>, соответственно, у каждого этого элемента свои атрибуты. В табл. 1 перечислены атрибуты элемента <select>.

Табл. 1. Атрибуты <select>
АтрибутОписание
nameИмя списка для идентификации поля.
disabledБлокирует список для выбора.
formИдентификатор формы для связывания поля с элементом <form>.
sizeЧисло пунктов списка, показываемых пользователю.
multipleПозволяет выбрать несколько пунктов из списка. При наличии этого атрибута вид списка меняется, превращаясь в список множественного выбора.
autofocusЭлемент получает фокус после загрузки документа.
requiredПеред отправкой формы обязательно следует выбрать пункт списка.

Кроме того, есть ряд правил:

  • <select> нельзя вкладывать внутрь ссылок;
  • <select> нельзя вкладывать внутрь кнопок <button>;
  • внутри <select> должен быть хотя бы один элемент <option>.

Атрибуты элемента <option> перечислены в табл. 2.

Табл. 2. Атрибуты <option>
АтрибутОписание
disabledБлокирует пункт списка для выбора.
selectedПозволяет заранее выбрать пункт списка.
labelТекст, который отображается в пункте списка.
valueЗначение выбранного пункта списка, отправляемого на сервер.

Надо понимать, что если вам требуется выделить сразу несколько пунктов списка через атрибут selected, то для <select> следует добавить атрибут multiple, иначе это всё работать не будет.

Создание списка показано в примере 1.

Пример 1. Использование списка

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Список</title> </head> <body> <form> <select name=»day»> <option value=»mon»>Понедельник</option> <option value=»tue»>Вторник</option> <option value=»wed» selected>Среда</option> <option value=»thu»>Четверг</option> <option value=»fri»>Пятница</option> <option value=»sat»>Суббота</option> <option value=»sun»>Воскресенье</option> </select> </form> </body> </html>

Результат данного примера показан на рис. 1. Автоматический выделен третий пункт с помощью атрибута selected, поэтому список выходит за края области просмотра браузера.

Вид списка

Рис. 1. Вид списка

Группирование элементов списка

При достаточно обширном списке имеет смысл сгруппировать его элементы по блокам, чтобы обеспечить наглядность списка и удобство работы с ним. Для этой цели применяется элемент <optgroup>. Он представляет собой контейнер, внутри которого располагаются элементы <option>, объединённые в одну группу. Особенностью <optgroup> является то, что он не выделяется как обычный элемент списка, выводится жирным начертанием, а все элементы, входящие в этот контейнер, смещаются вправо от своего исходного положения. Для добавления заголовка группы используется атрибут label, как показано в примере 2.

Пример 2. Группирование элементов списка

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Список</title> </head> <body> <form> <p><select name=»food»> <optgroup label=»Русская кухня»> <option value=»r1″>Закуска Барская</option> <option value=»r2″>Раки, фаршированные по-царски</option> <option value=»r3″>Биточки в горшочке</option> </optgroup> <optgroup label=»Украинская кухня»> <option value=»u1″>Галушки славянские</option> <option value=»u2″>Пампушки украинские</option> <option value=»u3″>Жаркое по-харьковски</option> </optgroup> </select></p> <p><input type=»submit» value=»Отправить»></p> </form> </body> </html>

Результат примера показан на рис. 2.

Группированный список

Рис. 2. Группированный список

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+4.0+1.0+1.0+1.0+1.0+

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

HTML:3.24.015.0XHTML:1.01.1

Описание

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

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

Синтаксис

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

Атрибуты

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

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

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

Обязателен.

Пример

HTML5IECrOpSaFx

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

Поле со списком | WebReference

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

<select атрибуты>
  <option атрибуты>Пункт 1</option>
  <option атрибуты>Пункт 2</option> 
</select>

Элемент <select> выступает контейнером для пунктов списка и определяет его вид — будет ли это раскрывающийся список или же список с одним или множественным выбором. Вид зависит от использования атрибута size элемента <select>, который устанавливает высоту списка; ширина списка при этом определяется автоматически исходя из длины текста внутри <option>. Ниже представлен список множественного выбора, в котором пункты выделяются с помощью клавиши Ctrl и Shift, и раскрывающийся список.

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

Атрибуты элемента <select>

Рассмотрим атрибуты <select>, с помощью которых можно изменять представление списка.

multiple

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

ЧебурашкаКрокодил ГенаШапоклякКрыса ЛарисаЧебурашкаКрокодил ГенаШапоклякКрыса Лариса
Атрибут size отсутствуетАтрибут size равен 2

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

В примере 1 показано создание списка множественного выбора.

Пример 1. Список множественного выбора

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Список</title> </head> <body> <form> <p><select name=»select» size=»3″ multiple> <option selected value=»s1″>Чебурашка</option> <option value=»s2″>Крокодил Гена</option> <option value=»s3″>Шапокляк</option> <option value=»s4″>Крыса Лариса</option> </select> <input type=»submit» value=»Отправить»></p> </form> </body> </html>

name

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

size

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

Атрибуты элемента <option>

Элемент <option> также имеет атрибуты, влияющие на вид списка, они представлены далее.

selected

Делает текущий пункт списка выделенным. Если к <select> добавлен атрибут multiple, то можно выделять более одного пункта.

value

Определяет значение пункта списка, которое будет отправлено на сервер в виде пары «имя=значение», где имя задаётся атрибутом name элемента <select>, а значение — атрибутом value выделенных пунктов списка. Значение может как совпадать с текстом пункта, так быть и самостоятельным.

label

Предназначен для указания метки пункта списка, сокращённой по сравнению с текстом внутри <option>. Если атрибут label присутствует, то текст внутри тега <option> игнорируется и в списке выводится значение label. Браузер Firefox не поддерживает этот атрибут.

Создание списка показано в примере 2.

Пример 2. Использование списка

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Список</title> </head> <body> <form> <p><strong>Выбери персонажа</strong></p> <p><select name=»hero»> <option value=»s1″>Чебурашка</option> <option value=»s2″ selected>Крокодил Гена</option> <option value=»s3″>Шапокляк</option> <option value=»s3″ label=»Лариса»>Крыса Лариса</option> </select> <input type=»submit» value=»Отправить»></p> </form> </body> </html>

Группирование элементов списка

При достаточно обширном списке имеет смысл сгруппировать его элементы по блокам, чтобы обеспечить наглядность списка и удобство работы с ним. Для этой цели применяется элемент <optgroup>. Он представляет собой контейнер, внутри которого располагаются элементы <option> объединённые в одну группу. Особенностью <optgroup> является то, что он не выделяется как обычный элемент списка, выводится жирным начертанием, а все элементы, входящие в этот контейнер, смещаются вправо от своего исходного положения. Для добавления заголовка группы используется атрибут label, как показано в примере 3.

Пример 3. Группирование элементов списка

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Список</title> </head> <body> <form> <p><select name=»food»> <optgroup label=»Русская кухня»> <option value=»r1″>Закуска Барская</option> <option value=»r2″>Раки, фаршированные по-царски</option> <option value=»r3″>Биточки в горшочке</option> </optgroup> <optgroup label=»Украинская кухня»> <option value=»u1″>Галушки славянские</option> <option value=»u2″>Пампушки украинские</option> <option value=»u3″>Жаркое по-харьковски</option> </optgroup> </select></p> <p><input type=»submit» value=»Отправить»></p> </form> </body> </html>

Результат примера показан на рис. 1.

Группированный список

Рис. 1. Группированный список

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

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

Последнее изменение: 11.03.2020

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

Как научиться разрабатывать сайты

HTML5 | Список select

Список select

Последнее обновление: 08.04.2016

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

Создадим выпадающий список:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Элемент select в HTML5</title>
	</head>
	<body>
		<form method="get">
			<p>
				<label for="phone">Выберите модель:</label>
				<select name="phone">
					<option value="iphone 6s">iPhone 6S</option>
					<option value="lumia 950">Lumia 950</option>
					<option value="nexus 5x">Nexus 5X</option>
					<option value="galaxy s7">Galaxy S7</option>
				</select>
			</p>
			<p>
				<input type="submit" value="Отправить" />
			</p>
		</form>
	</body>
</html>

Внутрь элемента select помещаются элементы option — элементы списка. Каждый элемент option содержит атрибут value, который хранит значение элемента. При этом значение элемента option не обязательно должно совпадать с отображаемым им текстом. Например:

<option value="apple">iPhone 6S</option>

С помощью атрибута selected мы можем установить выбранный по умолчанию элемент — это необязательно должен быть первый элемент в списке:


<select name="phone">
	<option value="iphone 6s">iPhone 6S</option>
	<option value="lumia 950">Lumia 950</option>
	<option value="nexus 5x" selected>Nexus 5X</option>
</select>

С помощью другого атрибута disabled можно запретить выбор определенного элемента. Как правило, элементы с этим атрибутом служат для создания заголовков:


<select name="phone">
	<option disabled selected>Выберите модель</option>
	<option value="iphone 6s">iPhone 6S</option>
	<option value="lumia 950">Lumia 950</option>
	<option value="nexus 5x" selected>Nexus 5X</option>
</select>

Для создания списка с множественным выбором к элементу select надо добавить атрибут multiple:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Элемент select в HTML5</title>
	</head>
	<body>
		<form method="get">
			<p>
				<label for="phone">Выберите модель:</label> <br/>
			
				<select multiple name="phone">
					<option value="iphone 6s">iPhone 6S</option>
					<option value="lumia 950">Lumia 950</option>
					<option value="nexus 5x">Nexus 5X</option>
					<option value="galaxy s7">Galaxy S7</option>
				</select>
			</p>
			<p>
				<input type="submit" value="Отправить" />
			</p>
		</form>
	</body>
</html>

Зажав клавишу Ctrl, мы можем выбрать в таком списке несколько элементов:

Select также позволяет группировать элементы с помощью тега <optgroup>:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Элемент select в HTML5</title>
	</head>
	<body>
		<form method="get">
			<p>
				<label for="phone">Выберите модель:</label>
			
				<select name="phone">
					<optgroup label="Apple">
						<option value="iphone 6s">iPhone 6S</option>
						<option value="iphone 6s plus">iPhone 6S Plus</option>
						<option value="iphone 5se">iPhone 5SE</option>
					</optgroup>
					<optgroup label="Microsoft">
						<option value="lumia 950">Lumia 950</option>
						<option value="lumia 950 xl">Lumia 950 XL</option>
						<option value="lumia 650">Lumia 650</option>
					</optgroup>
				</select>
			</p>
			<p>
				<input type="submit" value="Отправить" />
			</p>
		</form>
	</body>
</html>

Использование групп элементов применимо как к выпадающему списку, так и к списку со множественным выбором.

HTML выберите тег


Пример

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

Выберите автомобиль:

<выберите name = "cars">

Попробуй сам »

Ниже приведены примеры «Попробуйте сами».

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

Элемент чаще всего используется в форме для сбора пользовательского ввода.

Атрибут name необходим для ссылки данные формы после отправки формы (если вы опустите атрибут name , данные из раскрывающегося списка не будут отправлены).

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

Теги

Атрибуты события

Тег с тегами:

Попробуй сам »

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

HTML DOM ссылка: Выбрать объект

Руководство по CSS: стилизация форм

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

Нет.


,
HTML Tutorial — выбор или раскрывающийся список, возможность множественного выбора, предварительно выбранный комбинированный блок

Как создать выпадающий список?
Как сделать значение выбранным в выпадающем списке?
Как создать окно выбора нескольких вариантов?

Объяснение

Поле со списком / выпадающий список
Пример:

<имя формы = myform>
<выберите имя = mytextarea>
<имя параметра = одно значение = один> один
<имя параметра = два значения = два> two

Результат:
Определение:
Здесь мы определяем раскрывающийся список с помощью «select теги «и» опция «.Поле выбора определяется с помощью тега «выбрать». Количество опций в выпадающем списке определяется с помощью тега «option». Как показано в примере, мы дали пользователям три варианта выбора. Имя, отображаемое для опции, указывается между тегами «option».
Прокручиваемая опция выбора
Размер опции выбора может быть определен с помощью атрибута «размер» внутри тега «выбрать».
Пример:

<имя формы = myform>
<выберите имя = размер mytextarea = 2>
<имя опции = одно значение = один> один
<имя опции = два значения = два> два
<имя опции = три значения = три> три
<имя опции = четыре значения = четыре> четыре

Результат:
Multi Выбрать опцию
Мы можем предоставить пользователям возможность выбора нескольких опций, используя сущность «несколько».Таким образом, пользователь может выбрать несколько вариантов, используя клавиши «Shift» или «Ctrl».
Пример:

<имя формы = myform>
<выберите имя = размер mytextarea = 3 многократного>
<имя опции = одно значение = один> один
<имя опции = два значения = два> два < / option>
<имя опции = три значения = три> три
<имя опции = четыре значения = четыре> четыре

Результат:
Предварительно выбранный вариант выбора
Параметры можно предварительно выбрать с помощью объекта «выбрано».
Пример:

<имя формы = myform>
<выберите имя = размер mytextarea = 2>
<имя опции = одно значение = один> один
<имя опции = два значения = два> два
<имя опции = три значения = три выбранных> три
<имя опции = четыре значения = четыре> четыре

Результат: ,
Как создать редактируемое поле со списком в HTML / Javascript? Переполнение стека
  1. Товары
  2. Клиенты
  3. Случаи использования
  1. Переполнение стека Публичные вопросы и ответы
  2. Команды Частные вопросы и ответы для вашей команды
  3. предприятие Частные вопросы и ответы для вашего предприятия
  4. работы Программирование и связанные с ним технические возможности карьерного роста
  5. Талант Нанимать технический талант
  6. реклама Связаться с разработчиками по всему миру
,

wxWidgets: справочник по классам wxComboBox

Комбо-бокс подобен комбинации элемента управления для редактирования и списка.

Может отображаться как статический список с редактируемым или доступным только для чтения текстовым полем; или раскрывающийся список с текстовым полем; или раскрывающийся список без текстового поля в зависимости от платформы и наличия стиля wxCB_READONLY.

Комбо-бокс позволяет только один выбор. Элементы Combobox нумеруются с нуля.

Если вам нужен настроенный комбинированный список, взгляните на wxComboCtrl, wxOwnerDrawnComboBox, wxComboPopup и готовый к использованию wxBitmapComboBox.

Пожалуйста, обратитесь к документации wxTextEntry для описания методов, работающих с частью текстового ввода combobox, и к wxItemContainer для методов, работающих со списком строк. Обратите внимание, что по крайней мере в MSW wxComboBox не работает правильно, если содержит строки, отличающиеся только регистром, поэтому переносимые программы должны избегать добавления таких строк в этот элемент управления.

Стили

Этот класс поддерживает следующие стили:

  • wxCB_SIMPLE:

    Создает комбинированный список с постоянно отображаемым списком.Только для Windows

  • wxCB_DROPDOWN:

    Создает комбинированный список с раскрывающимся списком. Только MSW и Motif.

  • wxCB_READONLY: комбинированный список с этим стилем ведет себя как wxChoice (и может выглядеть так же, хотя это зависит от платформы), то есть он позволяет пользователю выбирать из списка опций, но не позволяет вводить значение отсутствует в списке.
  • wxCB_SORT:

    Сортирует записи в списке по алфавиту.

  • wxTE_PROCESS_ENTER:

    Элемент управления сгенерирует событие wxEVT_TEXT_ENTER (в противном случае нажатие клавиши Enter либо обрабатывается внутренне элементом управления, либо используется для навигации между диалоговыми элементами управления).

событий, выпущенных этим классом

Следующие макросы обработчика событий перенаправляют события в обработчики функций-членов « func » с такими прототипами:

Макросы событий для событий, генерируемых этим классом:

  • EVT_COMBOBOX (id, func): обработать событие wxEVT_COMBOBOX , когда выбран элемент в списке. Обратите внимание, что вызов GetValue () возвращает новое значение выбора.
  • EVT_TEXT (id, func):

    Обрабатывает событие wxEVT_TEXT , когда изменяется текст комбинированного списка.

  • EVT_TEXT_ENTER (id, func):

    Обработать событие wxEVT_TEXT_ENTER , когда в поле со списком нажата кнопка RETURN (обратите внимание, что поле со списком должно быть создано в стиле wxTE_PROCESS_ENTER, чтобы получить это событие).

  • EVT_COMBOBOX_DROPDOWN (id, func):

    Обработать событие wxEVT_COMBOBOX_DROPDOWN , которое генерируется, когда отображается часть списка в поле со списком (опускается). Обратите внимание, что это событие поддерживается только wxMSW, wxGTK с GTK + 2.10 или позже, и wxOSX / Какао.

  • EVT_COMBOBOX_CLOSEUP (id, func):

    Обрабатывать событие wxEVT_COMBOBOX_CLOSEUP , которое генерируется, когда список со списком исчезает (закрывается). Это событие генерируется только для тех же платформ, что и wxEVT_COMBOBOX_DROPDOWN выше. Также обратите внимание, что только wxMSW и wxOSX / Cocoa поддерживают добавление или удаление элементов в этом событии.

Внешний вид:

wxMSW Внешний вид

wxGTK Внешний вид

wxOSX Внешний вид

См. Также
wxListBox, wxTextCtrl, wxChoice, wxCommandEvent
wxComboBox () Конструктор по умолчанию.Подробнее …
wxComboBox (wxWindow * parent, идентификатор wxWindowID, const wxString & value = wxEmptyString, const wxPoint & pos = wxDefaultPosition, const wxSize & size = wxDefaultSize, int n = 0, const wxString, выбор [const wxString] wxValidator & validator = wxDefaultValidator, const wxString & name = wxComboBoxNameStr) Конструктор, создающий и показывающий комбобокс. Больше…
wxComboBox (wxWindow * parent, id wxWindowID, const wxString & значение, const wxPoint & pos, const wxSize & size, const wxArrayString & выборы, длинный стиль = 0, const wxValidator & validator = wxDefaultBoxString Конструктор, создающий и показывающий комбобокс. Подробнее …
виртуальный ~ wxComboBox () Разрушитель, уничтожающий выпадающий список.Подробнее …
виртуальный int GetCurrentSelection () const Возвращает элемент, выбранный прямо сейчас. Подробнее …
.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *