Разное

Выпадающие списки html: Тег | htmlbook.ru

22.04.2023

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-формах.

Самоучитель HTML

Выпадающие списки в HTML-формах имеют интересную конструкцию, которорая состоит из тега-оболочки select и тегов-элементов option. Атрибут name присваивается тегу select, а атрибут value тегу option.

<select name="name_spiska" >
       <option value="0"> Ваш возраст </option>
       <option value="1"> до 18 </option>
       <option value="2"> 18-35 </option>
       <option value="3"> 35-50 </option>
       <option value="4"> больше 50 </option>
 </select>

Результат: Ваш возраст до 18 18-35 35-50 больше 50

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

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

<select name="name_spiska" >
       <option value="1"> до 18 </option>
       <option value="2" selected> 18-35 </option>
       <option value="3"> 35-50 </option>
       <option value="4"> больше 50 </option>
 </select>

Выбрать возраст: до 18 18-35 35-50 больше 50

Из выпадающего списка можно сделать прокручивающийся список при помощи атрибута size тега select.

<select name="name_spiska" size="3">
       <option value="1"> до 18 </option>
       <option value="2"> 18-25 </option>
       <option value="3"> 25-35 </option>
       <option value="4"> 35-50 </option>
       <option value="5"> 50-60 </option>
       <option value="6"> больше 60 </option>
 </select>

до 18 18-25 25-35 35-50 50-60 больше 60
Как заметили, значение атрибута size является цифра, которая указывает сколько элементом должно отображаться, в моем примере три.

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

Создать DropDownList с помощью HtmlHelper в ASP.Net MVC

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

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

Посетите docs.microsoft.com, чтобы узнать обо всех перегрузках метода DropDownListFor.

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

 @использование MyMVCApp.Models

@модель Студент

@Html.DropDownListFor(m => m.StudentGender,
            новый SelectList(Enum.GetValues(typeof(Gender))),
            "Выберите пол")
 
 <выберите имя = "Пол учащихся">

В приведенном выше примере первый параметр в методе DropDownListFor() — это лямбда-выражение, указывающее свойство модели, которое необходимо привязать к элементу select. Мы указали свойство StudentGender . Второй параметр указывает элементы для отображения в раскрывающемся списке с помощью Объект SelectList . Третий параметр является необязательным, он будет первым элементом выпадающего списка. Итак, теперь он генерирует элемент управления с указанным именем, элементами списка и атрибутами html.

Посетите docs.microsoft.com, чтобы узнать обо всех перегрузках метода DropDownList().

 @использование MyMVCApp.Models

@модель Студент

@Html.DropDownList("ПолСтудента",
                    новый SelectList(Enum.GetValues(typeof(Gender))),
                    "Выберите пол",
                    новый { @class = "управление формой" })
 
 <выберите имя = "Пол учащихся">

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

Хотите проверить, насколько хорошо вы знаете ASP.NET MVC?

Запустить тест ASP.NET MVC

Какой правильный html для создания раскрывающегося списка?

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

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

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

 
Квалификация:

<выберите имя="slctQualification">

Результат:

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

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

Кроме того, мы можем присвоить значения каждой опции, используя атрибут «значение» тега опции. Обратите внимание, что в приведенном выше коде я использовал атрибут value в тегах option. Вы должны дать имя окну выбора. Вы можете дать имя своему блоку выбора, используя атрибут «name» в теге select. Что происходит, когда я обращаюсь к этому имени в коде, какой бы элемент ни был выбран, значение этого элемента будет возвращено обратно в код. В приведенном выше коде, если пользователь выбирает опцию «Студент», в коде автоматически будет возвращено значение «ug», когда вы произнесете значение точки «slctqualification».

Что такое список?

Создайте список, чтобы пользователи могли выбирать несколько (параметров) значений в форме. Он отобразит все параметры, не скрывая их. Чтобы создать окно списка, вы просто создаете раскрывающийся список и добавляете атрибут «несколько» к тегу

Результат:

Точно так же мы можем отобразить список выбора в окне списка вместо раскрывающегося списка. Чтобы создать список, все, что вам нужно, это добавить атрибут с именем «, несколько » в тег select. Посмотрите на вывод кода выше, вместо выпадающего списка отображается список выбора. И список выбора отображается в поле списка, где мы можем видеть все элементы списка. Поскольку вы установили атрибут, несколько пользователей могут выбрать более одного варианта.

Вы можете использовать клавишу shift или клавишу Ctrl, чтобы выбрать более одного элемента. Но вы всегда должны использовать клавишу ctrl для выбора нескольких вариантов, потому что с помощью клавиши Shift вы можете выбрать только последовательные (групповые) параметры. С помощью клавиши ctrl вы также можете выбрать автономные параметры. Если мы используем точечное значение атрибута имени списка выбора «slctqualification», то он будет возвращать массив значений. Например, в приведенном выше коде вы собираетесь вернуть PU, UG, если выбраны стажер и бакалавриат. Если выбраны все параметры, мы получим массив всех выбранных параметров.

Как отобразить выбранное значение раскрывающегося списка в HTML 

 
<тип ввода="отправить">



<скрипт>
функция моя функция () {
var x = document. getElementById("язык").value;
demo = "Ваш введенный язык: "+x
document.getElementById("демо").innerHTML = демо;
}

Предварительный просмотр:

Выберите язык:

EnglishSpanishFrench

Чтобы найти значение раскрывающегося списка, выполните следующие действия:

  1. Создайте раскрывающийся список с помощью тегов и назначьте имя идентификатора.
  2. Создайте кнопку отправки ввода для отправки после того, как пользователь выберет параметр. Добавьте атрибут onclick и укажите имя функции Java в качестве значения.
  3. Напишите на JS функцию для поиска и отображения параметра, выбранного пользователем. Допустим, имя функции — «myFunction()».
  4. Используйте метод « getElementbyID », чтобы найти значение пользователя и указать имя идентификатора, которое вы дали тегу выбора, в круглых скобках, как в приведенном выше коде. Сохраните найденное значение в переменной x
  5. И используйте «. innerHTML », чтобы отобразить выбранный пользователем параметр и указать «демонстрационный» идентификатор в скобках.
  6. Вызов идентификатора демонстрации в HTML с помощью тега p.

Теперь запустите свой код, и выбранная вами опция будет успешно отображена.

Раскрывающийся список и поле списка

Раскрывающийся список:

  • В раскрывающемся списке пользователь может выбрать только один вариант.
  • По умолчанию в списке отображается только один параметр.
  • Атрибут «несколько» не включен в тег вызовет список.

Заключение

Список выбора очень полезен в формах заявок.

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

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