Тег используется для создания выпадающего списка. Этот тег содержит список опций, которые пользователь может выбрать. Когда пользователь выбирает опцию, выбранное значение отправляется на сервер или обрабатывается на клиентской стороне.
Все опции списка должны быть обёрнуты в тег .
Атрибуты тега :
autocomplete — подсказка для функции автозаполнения формы;
disabled — делает элемент неактивным;
form — связывает список с формой;
multiple — позволяет выбрать несколько опций;
name — задает имя элемента, которое будет отправляться на сервер;
required — делает элемент обязательным для заполнения;
size — задает количество строк в списке.
Чем заменить этот тег
Если нужно, чтобы пользователи вводили текст в список, можете использовать тег вместо .
Полезные ссылки
�� Спецификация
��️ Зачем нужна семантическая вёрстка
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Контейнер для чего угодно. Тег
Тег определяет раздел или секцию в HTML-документе. Это контейнер, который используется для группировки других элементов, таких как текст, изображения или другие теги, в разделы или блоки.
Заголовок секции
Какое-нибудь содержимое секции
6 октября 2023
Как добавить подпись в HTML. Тег
Описание изображения
Устаревший атрибут align — выравнивание подписи относительно элемента .
Тег может использоваться только внутри элемента .
Валидный HTML требует, чтобы тег находился после элемента или других медиа-элементов внутри . Однако это необязательное правило, и подпись может располагаться перед медиа-элементом или даже внутри него.
6 октября 2023
Метаданные HTML-страницы. Тег
Тег содержит метаданные о документе HTML. Он может включать такую информацию, как имя автора, название документа, ключевые слова и набор символов.
Атрибуты тега :
charset — кодировка символов в документе.
name — имя метаданных.
content — значение метаданных.
http-equiv — HTTP-заголовок для значения атрибута content .
Атрибут charset должен быть первым атрибутом в теге , а name и http-equiv нельзя использовать вместе.
4 октября 2023
Просто кнопка. Тег
Тег создаёт кликабельную кнопку, которая может запускать действия или события на веб-странице. Например, отправку или перезагрузку формы, запуск функции, открытие нового окна или добавление товара в корзину.
Атрибуты тега :
name — имя кнопки.
type — тип кнопки, по умолчанию — submit . Атрибут type необходим, если указан атрибут value .
value — значение, которое будет отправлено на сервер при нажатии на кнопку.
disabled — указывает, что кнопка должна быть отключена.
form — одна или несколько форм, к которым принадлежит кнопка.
formaction — URL-адрес файла, который будет обрабатывать ввод при нажатии кнопки.
formenctype — указывает, как данные формы должны быть закодированы при отправке на сервер.
formmethod — метод HTTP, используемый при отправке данных формы.
formnovalidate — устанавливает, что данные формы не должны проверяться при отправке на сервер.
formtarget — указывает, где отображать ответ после отправки формы.
4 октября 2023
Независимый контент. Тег
Тег в HTML используется для выделения содержимого, которое является независимым и самодостаточным. Это означает, что такой контент может быть переиспользоваться в разных местах без потери смысла.
Заголовок статьи
Текст статьи.
Тегом размечают статьи в блогах, сообщения на форумах и другие материалы, которые имеют смысл и ценность, даже если они прочитаны вне контекста, в котором были созданы.
Не используйте для группировки элементов, которые не являются самостоятельными материалами, например, для списка продуктов или новостей.
3 октября 2023
Как встроить страницу через
Тег позволяет встраивать контент (например, веб-страницы, видео) прямо в ваш документ HTML.
Простейший пример использования :
Атрибут src задаёт URL-адрес страницы, которую вы хотите встроить.
Атрибуты width и height — ширина и высота фрейма (можно задавать как в пикселях, так и в процентах).
3 октября 2023
Встроенные CSS-стили для страницы с тегом
Тег используется для определения стилей для HTML-документов. Он является важным компонентом CSS, которые позволяют разработчикам создавать визуально привлекательные веб-страницы, определяя различные стили, такие как цвета, шрифты и макеты.
body
Добро пожаловать на мой сайт!
Атрибуты тега :
type — MIME-тип таблицы стилей.
media — типы носителей, для которы будет использоваться стиль.
29 сентября 2023
Изображение в HTML. Тег
Элемент используется для вставки изображений на веб-страницы.
У нет закрывающего тега. Он поддерживает изображения в различных форматах — например, JPEG, PNG, WebP, GIF, SVG.
Существуют определенные правила или стандарты использования тега , которые рекомендуются для большинства случаев в веб-разработке. Несмотря на то что конкретные требования могут варьироваться в зависимости от проекта, ниже приведены атрибуты и практики, которые часто рекомендуются к использованию.
28 сентября 2023
Как сделать выпадающий список в html
Поле выбора значения из раскрывающегося списка.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
Обновлено 1 ноября 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Элемент используется, когда нужно показать выпадающий список.
Пример
Скопировать ссылку «Пример» Скопировано
form>labelfor="city-select">Ваш городlabel>selectname="city"id="city-select">optionvalue="">-- Выберите город --option>optionvalue="petersburg">Санкт-Петербургoption>optionvalue="samara">Самараoption>optionvalue="perm">Пермьoption>optionvalue="novosibirsk">Новосибирскoption>select>form>
Подробно
Скопировать ссылку «Подробно» Скопировано
В примере выше показано типовое использование элемента . Это своего рода обёртка над списком опций, которые задаются тегом . Чтобы иметь возможность отправить выбранное значение на сервер, необходимо выполнить несколько условий:
задать тегу атрибут name ;
задать каждому тегу атрибут value . Если этот атрибут не задан, то его значение будет равно текстовому содержимому тега .
Если нужно, чтобы изначально был выбран какой-то элемент из списка, нужно задать соответствующему тегу атрибут selected .
Внутри тега могут использоваться только теги и .
Атрибуты
Скопировать ссылку «Атрибуты» Скопировано
Тег используется совместно с несколькими специфическими, а так же с большинством атрибутов для элементов форм.
autocomplete
Скопировать ссылку «autocomplete» Скопировано
Разрешает автозаполнение. Автозаполнение — это когда браузер предлагает сохранить, например, выбранный город, чтобы данные подставлялись при следующем входе.
autofocus
Скопировать ссылку «autofocus» Скопировано
Атрибут булевого типа (без значения, либо атрибут есть в теге, либо его нет совсем). Если он указан, то при загрузке страницы фокус будет автоматически помещён на наш выпадающий список.
disabled
Скопировать ссылку «disabled» Скопировано
Атрибут булевого типа. Если задан, то выпадающий список отключается для взаимодействия с пользователем. Если атрибут не задан, то он может быть унаследован у одного из предков (например у контейнера или . Если ни у одного предка вверх по дереву этот атрибут не задан, то выпадающий список доступен для взаимодействия.
form
Скопировать ссылку «form» Скопировано
Атрибут указывает на элемент , с которым связан выпадающий список. Значением атрибута должен быть id формы в пределах текущего документа. Если атрибут не задан, то обязательно должен находиться внутри тега . Но если задать атрибут, то нахождение внутри формы не обязательно и может находиться в любом месте страницы.
multiple
Скопировать ссылку «multiple» Скопировано
Атрибут булевого типа. Включает возможность выбора сразу нескольких пунктов списка. Если атрибут задан, то внешний вид списка поменяется с однострочного на многострочный с возможностью скроллинга.
name
Скопировать ссылку «name» Скопировано
Имя выпадающего списка. При отправке формы значение атрибута name будет ключом в отправляемом объекте.
required
Скопировать ссылку «required» Скопировано
Атрибут булевого типа. Указывает, должен ли обязательно быть выбран какой-то пункт выпадающего списка, значение атрибута value которого — это не пустая строка. Атрибут учитывается при валидации формы при отправке. Если поле не заполнить, то при попытке отправки формы браузер покажет ошибку.
size
Скопировать ссылку «size» Скопировано
Числовой атрибут. Если включён атрибут multiple , то это число указывает на количество видимых пунктов списка.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Выбрать несколько элементов списка, когда включён атрибут multiple , можно, используя клавиши Ctrl , Cmd и Shift . Клавиши Ctrl (Windows, Linux) и Cmd (Mac OS) работают одинаково. Мы зажимаем эту клавишу на клавиатуре, а затем кликаем мышкой в нужные пункты списка. Этим способом можно выбрать несколько пунктов, находящихся на разном расстоянии друг от друга. Если выбрать пункт списка, зажать клавишу Shift и выбрать любой другой, то будут выбраны последовательно все пункты списка между этими двумя.
�� Выпадающий список — это один из элементов формы, почти не поддающийся стилизации. Мы можем немного изменить внешний вид самого элемента , но стилизовать выпадающий список опций можно не для всех браузеров. Многие дизайнеры любят рисовать нестандартные выпадающие списки в угоду красоте, но реализация таких списков очень трудоёмка на чистом HTML и CSS. Рекомендуется для выпадающих списков оставлять родной вид, потому что такие списки обладают рядом преимуществ перед нестандартными. Например, выпадающий список опций может выходить за границы окна браузера, давая пользователю возможность выбрать нужный элемент.
�� Несмотря на вышесказанное, немного стилизовать выпадающий список всё же можно. Вот как можно изменить вид стрелочки:
form>labelfor="city-select">Нестандартная стрелочкаlabel>divclass="select-wrapper">selectname="city"id="city-select">optionselecteddisabled>-- Выберите город --option>optionvalue="petersburg">Санкт-Петербургoption>optionvalue="moscow">Москваoption>optionvalue="kazan">Казаньoption>optionvalue="samara">Самараoption>optionvalue="perm">Пермьoption>optionvalue="novosibirsk">Новосибирскoption>select>div>form>
В данном случае мы оборачиваем наш дополнительным блоком, чтобы задействовать псевдоэлемент : : after этого блока. К сожалению, относится к такому типу элементов, у которых нет своих псевдоэлементов : : before и : : after .
Используем свойство appearance , чтобы отключить браузерную стрелку справа. В качестве стрелки ставим псевдоэлемент : : after от родительского блока. Не забываем про позиционирование, а также отключаем у псевдоэлемента взаимодействие с мышкой, иначе при клике на него выпадающий список раскрываться не будет.
Тег select
Тег select создает выпадающий список для использования в HTML формах.
Отдельный пункт списка должен храниться в теге option .
Атрибуты
Атрибут
Описание
multiple
Наличие данного атрибута создает мультиселект — выпадающий список, в котором можно выбрать несколько пунктов, зажав клавишу контрол (Ctrl) или выделив их мышкой. Необязательный атрибут. Пользоваться так: или так .
name
Имя выпадающего списка. Нужно для того, чтобы достать данные поля ввода в PHP. Для корректной работы формы имена полей ввода не должны совпадать друг с другом (в одной форме). Если они совпадают — в PHP придут данные того поля ввода, которое ниже в HTML коде.
Пример
Давайте посмотрим, как работает выпадающий список:
Пример
Давайте ширину выпадающего списка сделаем равной ширине самого большого элемента (если она не будет явно указана с помощью CSS свойства width ):
Пример . Выбор по умолчанию
А теперь давайте попробуем выбрать по умолчанию город Минск. Сделаем это с помощью атрибута selected :
Пример . Мультиселект
Давайте теперь превратим обычный select в мультиселект с помощью атрибута multiple . Для этого зажмем клавишу контрол (ctrl) и, не отпуская ее, можем выбрать несколько пунктов выпадающего списка. Или же просто выделим мышкой несколько пунктов (зажмием левую кнопку и выделяем).
Обратите внимание на то, что имя селекта, заданное в атрибуте name , должно быть с квадратными скобками в конце. Это нужно для того, чтобы в PHP приходили все выбранные значения (иначе придет только одно — последнее).
Пример . Несколько значений по умолчанию в мультиселекте
А теперь, в мультиселекте по умолчанию, попробуем выбрать более, чем одно значение:
Смотрите также
атрибут selected , который задает выбранный по умолчанию пункт списка
тег optgroup , который группирует пункты списка
тег datalist , который создает выпадающий список
Создание связанных выпадающих списков select на html и javascript для сайта #39
Создать связанные выпадающие списки select достаточно просто, используя HTML, CSS и Javascript, без необходимости использования баз данных и запросов на сервер. Все списки select задаются прямо в HTML коде, поэтому данный способ хорошо подходит для работы с небольшими объемами данных. Создадим связанные выпадающие списки, на примере стран и городов.
Город назначения: Стоимость доставки: 0 руб.
Создаем главный выпадающий список select
Первое, что необходимо сделать, это создать главный (первый) список
HTML код: Создаем главный выпадающий список
Создаем связанные выпадающие списки select
Затем необходимо создать зависимые выпадающие списки
HTML код: Создаем связанные выпадающие списки
Добавляем значения value в пункты option выпадающего списка select
Также, для каждого пункта списка, могут быть заданы значения в атрибутах value=»» . Значениями могут быть любые параметры, например: цена, вес, размер, изображение или ссылка на страницу сайта. Эти параметры, можно вывести в форме калькулятора, либо выполнить дополнительные расчеты по соответствующим формулам. Для нашего калькулятора, значением value=»» будет стоимость доставки посылки в указанный город.
HTML код: Добавляем значения value в пункты option выпадающего списка
При необходимости, можно добавлять новые связанные выпадающие списки и новые пункты . Менять и устанавливать свои значения value=»» . Добавленные списки, автоматически будут учтены при перезапуске калькулятора и их значения станут доступны при расчете калькулятора, без необходимости правки javascript кода.
Добавляем изображения в пункты option выпадающего списка select
Для вывода изображений при выборе пункта
HTML код: Добавляем изображения в пункты option выпадающего списка
Создание связанных выпадающих списков select с выбором марок и моделей автомобилей
Для создания автомобильного зависимого динамического выпадающего списка select, необходимо, заполнить пункты первого списка с названиями марок авто, например «ВАЗ», «ГАЗ», «УАЗ», «ЗАЗ», «ИЖ». Затем, заполнить зависимые выпадающие списки, где для каждой марки авто, указать модельный ряд, например, для «ВАЗ»: «Веста», «Калина», «Гранта», «Приора», «Ларгус».
Чтобы списки заработали, остается подключить файлы со скриптами и стилями.
Таким образом, мы получаем три файла: ● index.html – форма калькулятора (файл запуска). ● script.js – скрипты калькулятора. ● style.css – стили калькулятора.
