Содержание

Тег — раскрывающийся список

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

Описание

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

Элемент <select> может содержать два и более тегов <option>, определяющих доступные варианты выбора в раскрывающемся списке. Текст первого дочернего элемента <option> будет изначально отображаться в выпадающем списке, то есть будет являться значением по умолчанию для списка. Изменить или задать значение по умолчанию для <select> можно прописав атрибут selected к нужному варианту:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option selected="" value="audi">Audi</option>
</select>

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

<option>.

Атрибуты

autofocus:
Указывает, что элемент должен автоматически получить фокус при загрузке веб-страницы. Возможные значения логического атрибута autofocus: 

<select autofocus>
<select autofocus="autofocus">
<select autofocus="">
Пример »

Примечание: атрибут autofocus не поддерживается в IE9 и более ранних версиях, и в Firefox.

disabled:
Указывает, что элемент неактивен, то есть пользователь не сможет взаимодействовать с элементом. Возможные значения логического атрибута
disabled: 

<select disabled>
<select disabled="disabled">
<select disabled="">
Пример »
form:
Определяет форму с которой связан элемент. В качестве значения атрибута выступает идентификатор элемента <form>. Этот атрибут позволяет размещать элемент <select> в произвольном месте документа, а не только в качестве потомка элемента <form>.

Примечание: атрибут

form не поддерживается в Firefox.

multiple:
Указывает, что за один раз можно выбрать несколько вариантов. Выбор нескольких вариантов различается в зависимости от операционной системы:
  • Windows: удерживайте нажатой клавишу CTRL для выбора нескольких вариантов.
  • Mac: удерживайте нажатой клавишу CMD для выбора нескольких вариантов.
Возможные значения логического атрибута multiple: 

<select multiple>
<select multiple="multiple">
<select multiple="">
Пример »

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

name:
Определяет имя для раскрывающегося списка. Оно может быть использовано для доступа к данным формы после ее отправки или для ссылки на элемент в JavaScript.
size:
Указывает количество видимых вариантов в раскрывающимся списке. Если значение атрибута
size больше 1, но меньше общего количества вариантов списка, то браузер автоматически добавит полосу прокрутки, чтобы указать, что есть еще варианты для просмотра. Пример »

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

Стиль по умолчанию

Нет.

Пример


<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Результат данного примера в окне браузера:

Поле со списком | 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. Группированный список

См. также

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

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

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

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

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

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

share-outline Курс Javascript — Mastering the Fundamentals

By Mrinal Bhattacharya

Бесплатно

звезда 4.8

Зачислено:

1000

Курс Javascript — Освоение основ

Мринал Бхаттачарья

Бесплатно

Начать обучение

Обзор

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

Синтаксис

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

  • autofocus: Атрибут autofocus указывает, что раскрывающийся список должен автоматически фокусироваться при загрузке страницы. Это атрибут логического типа.
  • disabled: Атрибут disabled указывает, что раскрывающийся список должен быть отключен, что делает его недоступным для щелчка и использования. Это атрибут логического типа.
  • форма: Атрибут формы указывает, к какой форме относится раскрывающийся список. Это может быть идентификатор или класс.
  • множественный: Атрибут множественный указывает, что в раскрывающемся списке можно выбрать более одного параметра. Это логический атрибут.
  • имя: Атрибут имени используется для указания имени в раскрывающемся списке. Он используется для ссылки на данные формы после отправки или для ссылки на элемент в Javascript. Это строка. Если мы опустим атрибут имени, никакие данные из выпадающего списка не будут отправлены.
  • required: Атрибут required указывает, что пользователю необходимо выбрать параметр перед отправкой формы. Это логический атрибут.
  • размер: Атрибут размера указывает количество параметров в раскрывающемся списке.

Тег в HTML?

На персональном компьютере существует несколько способов выбора нескольких параметров в теге и

HTML-код (с внутренним CSS)

Вывод

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

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

HTML-код (с внутренним CSS)

Вывод

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

Мы можем сгруппировать параметры в раскрывающемся списке, используя тег в HTML.

Код HTML (с внутренним CSS)

Вывод

Тег внутри HTML-формы.

Стилизация с помощью CSS

Стилизация раскрывающегося списка в HTML может быть утомительной задачей, поскольку результаты могут быть несовместимыми в разных веб-браузерах . Хотя мы можем изменить его конфигурацию блочной модели, шрифт или цвета, как и любой другой элемент HTML (за счет совместимости с браузером).

Например:
Мы можем добавить отступы, поля, тени и изменить цвет, чтобы выпадающий список выглядел более привлекательным для лучшего UI/UX (пользовательский интерфейс/пользовательский опыт).

HTML-код (с внутренним CSS)

Вывод

В приведенном выше примере мы оформляем выпадающее меню в HTML с помощью CSS (каскадных таблиц стилей). Стиль создан с учетом потребностей пользователя, чтобы список стал более презентабельным и удобным для пользователя.

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

Тег и

  • Мы можем поместить в выпадающий список столько опций, сколько захотим, используя тег
  • Множественный атрибут позволяет выбрать более одного варианта в раскрывающемся списке.
  • Параметр может быть предварительно выбран с помощью атрибута selected в теге
  • Различные параметры можно сгруппировать в категорию с помощью тега внутри тега , который мы используем для определения раскрывающихся списков на веб-странице или в приложении.

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

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

    Что такое раскрывающийся список HTML?

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

    • Элемент ; мы обсудим эти атрибуты в последующих разделах.

    Реализация раскрывающихся списков в веб-приложениях

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

      <заголовок>

        Раскрывающиеся списки HTML

        <стиль>

          . контейнер {

            отступ: 25 пикселей;

            граница: серая сплошная 0 пикселей;

            box-shadow: 10px 20px 20px серый;

            ширина: 300 пикселей;

            высота: 150 пикселей;

            border-radius: 15px;

            цвет фона: небесно-голубой;

          }

          .center {

            поле: авто;

            ширина: 50 %;

            отступ: 50 пикселей;

          }

        

      

      <тело>

        

    Раскрывающиеся списки HTML

        <дел>

          

          


          

        

    •   

    Давайте посмотрим на каждый тег HTML, который мы использовали при создании этой веб-страницы:

    Этот тег является своего рода оболочкой для всего веб-приложения, все происходит внутри этого тега и завершается до закрытия этого тега.

    <голова>

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

    <название>

    Этот тег используется для определения заголовка веб-приложения или веб-сайта.

    <стиль>

    Этот тег используется для добавления стилей CSS к элементам HTML, чтобы веб-сайты выглядели и чувствовали себя хорошо.

    <тело>

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

    ,

    HTML предоставляет несколько тегов для форматирования текста.

    и

    — два из этих тегов. Эти теги означают «заголовок 1» и «заголовок 2» соответственно. Есть несколько других тегов, таких как «заголовок 3» и «абзац», которые обозначаются аббревиатурами

    и

    соответственно.


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

    <дел>

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

    <выбрать>

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

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

    <опция>

    Этот тег используется внутри элемента .

    Вы можете записаться на комплексную магистерскую программу Java Full Stack Developer, которая поможет вам стать готовым к карьере после завершения.

    No related posts.