Как сделать раскрывающийся список в html: Тег | htmlbook.ru

78. Раскрывающийся список на HTML

Первый раз на codebra.ru? Посмотри другие уроки по HTML и CSS!

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

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

Код HTML

<form method = "POST">
<select size = "3" multiple name = "name[]">
<option disabled>Какие имена вам нравятся?</option>
<option selected value = "Никакие">Никакие</option>
<option value = "Иван">Иван</option>
<option value = "Петр">Петр</option>
<option value = "Николай">Николай</option>
</select>
<input type = "submit" value = "Ответить">
</form>

Какие есть атрибуты у тега select?

Тег <select> имеет три полезных атрибута (остальные рассматривать не будем, про них уже я говорил). Первый атрибут multiple, благодаря нему можно сделать возможность выбора нескольких элементов списка. Чтобы выбирать несколько элементов, нужно зажать shift или ctr и наживать мышкой на нужные элементы. Далее пример применения атрибута multiple:

Код HTML

<form method = "POST">
<select size = "3" multiple name = "name[]">
<option disabled>Какие имена вам нравятся?</option>
<option selected value = "Никакие">Никакие</option>
<option value = "Иван">Иван</option>
<option value = "Петр">Петр</option>
<option value = "Николай">Николай</option>
</select>
<input type = "submit" value = "Ответить">
</form>

Второй атрибут required, с помощью его можно «сказать» браузеру, что список должен быть выбран перед отправкой формы, иначе браузер запретит отправлять форму, и выведет вам соответствующее сообщение. Вид этого сообщения зависит полностью от браузера и пользователь не может его изменять. Далее пример применения атрибута required:

Код HTML

<form method = "POST">
<select required size = "1" name = "name[]">
<option disabled>Да или нет?</option>
<option value = "Да">Да</option>
<option value = "Нет">Нет</option>
</select>
<input type = "submit" value = "Ответить">
</form>

Третий атрибут size, с помощью его можно указать количество отображаемых элементов списка. Атрибут size может содержать только целое число. Атрибут size трансформирует список, например, если он равен 1, то тег <select> отображается как «выпадающий список», а если атрибут size больше 1, то раскрывающийся список отображается как «список с прокруткой». Далее два примера применения атрибута size:

Код HTML

<form method = "POST">
<select required size = "1" name = "name[]">
<option disabled>Да или нет?</option>
<option value = "Да">Да</option>
<option value = "Нет">Нет</option>
</select>
<input type = "submit" value = "Ответить">
</form>

Код HTML

<form method = "POST">
<select required size = "3" name = "name[]">
<option disabled>Да или нет?</option>
<option value = "Да">Да</option>
<option value = "Нет">Нет</option>
</select>
<input type = "submit" value = "Ответить">
</form>

Похожие уроки и записи блога

Первое знакомство с PythonЗнакомство с Python

Обработка исключений (try/except) в PythonЗнакомство с Python

Типы данных в PythonЗнакомство с Python

Урок 3. Генерация SSH-ключа для работы с GitHubБлог

Работа с файлами в Python Знакомство с Python

Погружение в PythonЗнакомство с Python

Универсальный тег в HTML форме — тег INPUTФормы

Свойство background для работы с фономЦвета и фон

Переменные и комментарии в PythonЗнакомство с Python

Предыдущий урок «77. Метки в HTML формах — LABEL» Следующий урок «79. Для чего нужен тег KEYGEN»

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

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

Отдельный пункт списка должен храниться в теге option.

Атрибуты

Атрибут	Описание
multiple	Наличие данного атрибута создает мультиселект — выпадающий список, в котором можно выбрать несколько пунктов, зажав клавишу контрол (Ctrl) или выделив их мышкой. Необязательный атрибут. Пользоваться так: <select multiple> или так <select multiple=»multiple»>.
name	Имя выпадающего списка. Нужно для того, чтобы достать данные поля ввода в PHP. Для корректной работы формы имена полей ввода не должны совпадать друг с другом (в одной форме). Если они совпадают — в PHP придут данные того поля ввода, которое ниже в HTML коде.

Пример

Давайте посмотрим, как работает выпадающий список:

<select> <option>Москва</option> <option>Минск</option> <option>Киев</option> <option>Лондон</option> </select>

:

Пример

Давайте ширину выпадающего списка сделаем равной ширине самого большого элемента (если она не будет явно указана с помощью CSS свойства width):

<select> <option>Москва - столица России</option> <option>Минск</option> <option>Киев</option> <option>Лондон</option> </select>

:

Пример .

Выбор по умолчанию

А теперь давайте попробуем выбрать по умолчанию город Минск. Сделаем это с помощью атрибута selected:

<select> <option>Москва - столица России</option> <option selected>Минск</option> <option>Киев</option> <option>Лондон</option> </select>

:

Пример . Мультиселект

Давайте теперь превратим обычный select в мультиселект с помощью атрибута

multiple. Для этого зажмем клавишу контрол (ctrl) и, не отпуская ее, можем выбрать несколько пунктов выпадающего списка. Или же просто выделим мышкой несколько пунктов (зажмием левую кнопку и выделяем).

<select multiple name="city[]"> <option>Москва - столица России</option> <option>Минск</option> <option>Киев</option> <option>Лондон</option> </select>

:

Пример .

Несколько значений по умолчанию в мультиселекте

А теперь, в мультиселекте по умолчанию, попробуем выбрать более, чем одно значение:

<select multiple name="city[]"> <option>Москва - столица России</option> <option selected>Минск</option> <option>Киев</option> <option selected>Лондон</option> </select>

:

Смотрите также

• атрибут selected,
  который задает выбранный по умолчанию пункт списка
• тег optgroup,
  который группирует пункты списка
• тег datalist,
  который создает выпадающий список

HTML-выбор нескольких атрибутов

❮ Тег HTML Пример Раскрывающийся список, позволяющий выбрать несколько вариантов: Выберите автомобиль:
Вольво
Saab
Опель
Ауди

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

---

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

Атрибут , умноженный на , является логическим атрибутом.

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

Выбор нескольких параметров зависит от операционной системы и браузера:

• Для Windows: удерживайте нажатой кнопку управления (ctrl), чтобы выбрать несколько параметров
• Для Mac: удерживайте командную кнопку, чтобы выбрать несколько вариантов

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

---

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

Атрибут
кратный	Да	Да	Да	Да	Да

---

Синтаксис

<Выбрать несколько>

---

❮ HTML TAG Новый Мы только что запустили W3Schools Videos Explore Now Color Dicker . КОД ИГРЫ Играть в игру

---

---

---

Top Tutorials Учебное пособие по HTML Учебное пособие по CSS Учебное пособие по JavaScript Учебное пособие Учебное пособие по SQL Учебное пособие по Python Учебное пособие по W3.CSS Учебное пособие по Bootstrap Учебное пособие по PHP Учебное пособие по Java Учебное пособие по C++ Учебное пособие по jQuery Лучшие ссылки HTML Reference CSS Reference JavaScript Reference SQL Reference Python Reference W3.CSS Reference Bootstrap Reference PHP Reference HTML Colors Java Reference Angular Reference jQuery Reference

---

8 Top3 Examples Примеры HTML Примеры CSS Примеры JavaScript Примеры инструкций Примеры SQL Примеры Python Примеры W3.CSS Примеры Bootstrap Примеры PHP Примеры Java Примеры XML Примеры jQuery

---

FORUM | О W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности. Copyright 1999-2022 Refsnes Data. Все права защищены. W3Schools работает на основе W3.CSS. Создать DropDownList с помощью HtmlHelper в ASP.Net MVC Узнайте, как создать элемент управления HTML раскрывающегося списка с помощью HtmlHelper в представлении Razor. Класс HtmlHelper включает два метода расширения для создания элемента управления в представлении бритвы: DropDownListFor() и DropDownList() .

Мы будем использовать следующий класс модели

Student и перечисление Gender .

 ученик публичного класса
{
    общественный интервал StudentId { получить; установлен; }
    общедоступная строка StudentName { получить; установлен; }
    общественный пол StudentGender { получить; установлен; }
}

общественное перечисление Пол
{
    Мужской,
    женский
}
 

Html.

DropDownListFor()

Метод расширения Html.DropDownListFor — это строго типизированный метод расширения, который создает элемент для свойства, указанного с помощью лямбда-выражения. Посетите docs.microsoft.com, чтобы узнать обо всех перегрузках метода DropDownListFor. В следующем примере создается раскрывающийся список для указанного выше свойства StudentGender . @использование MyMVCApp.Models @модель Студент @Html.DropDownListFor(m => m.StudentGender, новый SelectList(Enum.GetValues(typeof(Gender))), "Выберите пол") <выберите имя = "Пол учащихся"> Выберите пол Мужской Женщина В приведенном выше примере первый параметр в методе DropDownListFor() — это лямбда-выражение, указывающее свойство модели, которое необходимо связать с выбранным элементом. Мы указали свойство StudentGender . Второй параметр указывает элементы для отображения в раскрывающемся списке с помощью Объект SelectList . Третий параметр является необязательным, он будет первым элементом выпадающего списка. Итак, теперь он генерирует элемент управления с двумя элементами списка — Male и Female, как показано ниже.

Html.DropDownList()

Метод Html.DropDownList() генерирует элемент с указанным именем, элементами списка и атрибутами html. Посетите docs.microsoft.com, чтобы узнать обо всех перегрузках метода DropDownList(). @использование MyMVCApp.Models @модель Студент @Html.DropDownList("ПолСтудента", новый SelectList(Enum.GetValues(typeof(Gender))), "Выберите пол", новый { @class = "управление формой" }) <выберите имя="Пол учащихся"> Выберите пол Мужской Женщина В приведенном выше примере первый параметр — это имя свойства, для которого мы хотим отобразить элементы списка.Навигация по записямПредыдущая запись Готовый сайт блог: Блог — шаблоны сайтов | Wix.comСледующая запись Декоративный шрифт: Декоративные шрифтыДобавить комментарий Отменить ответВаш адрес email не будет опубликован. Обязательные поля помечены *Комментарий *

Имя *

Email *

Сайт