optgroup в HTML


Содержание

HTML :: Создание раскрывающихся списков внутри форм

Использование тегов и

Для создания раскрывающихся списков с выбором предопределенных вариантов в HTML используется элемент ‘select’ , который формируется парным тегом (от англ. select – выбирать) и является контейнером для пунктов списка. В свою очередь, пункты раскрывающегося списка представлены элементами ‘option’ , которые формируются парным тегом (от англ. option – вариант, выбор).

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

Элемент ‘select’ также, как и элемент ‘input’, обладает атрибутами: autofocus , disabled , form , required , name , имеющими аналогичное назначение. Их можно посмотреть в нашем справочнике здесь. Кроме того, для указания изначально видимого количества вариантов списка используется атрибут size , который в качестве значения принимает натуральные числа, и логический атрибут multiple , позволяющий выбирать сразу несколько вариантов. Если значение атрибута size больше единицы, но меньше общего количества имеющихся вариантов в списке, то браузер автоматически добавит полосу прокрутки, чтобы было ясно, что имеются еще варианты для выбора.

Использование элемента ‘select’ показано в примере №1.

Пример №1. Использование элемента ‘select’

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

Элемент ‘option’ также имеет несколько своих атрибутов:

  • value – устанавливает значение пункта списка, которое будет отправлено на сервер или использовано скриптами;
  • disable – блокирует доступ к данному варианту списка; атрибут по умолчанию выключен и значений не принимает;
  • selected – если данный логический атрибут присутствует, то пункт списка будет заранее выделен, при этом пользователь сможет в случае необходимости снять выделение;
  • label – в качестве значения принимает строку, которая представляет собой сокращение основного текста, расположенного между открывающим и закрывающим тегами элемента ‘option’ ; если атрибут label указан, то в списке вариантов выводится его значение, а не основной текст.

Тег и его атрибуты

В случае необходимости группировки некоторых пунктов раскрывающегося списка применяется элемент ‘optgroup’ , который формируется парным тегом (от англ. option group – группа вариантов) и является контейнером для элементов ‘option’ , объединяемых в группу. Элемент имеет два собственных атрибута: disable и label . Первый атрибут является логическим и блокирует доступ к своей группе пунктов списка, а второй – принимает в качестве значения текст, который будет выводиться, как заголовок группы.

Использование элемента ‘optgroup’ показано в примере №2.

Пример №2. Использование элемента ‘optgroup’

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

Тег и его атрибуты

Еще одним дополнительным элементом, напоминающим раскрывающийся список и введенным в пятой версии HTML , является элемент ‘datalist’ , формирующийся парным тегом (от англ. data list – перечень данных) и представляющий собой контейнер для хранения элементов ‘option’ . Данный элемент создает список вариантов, которые можно выбирать при вводе текста, т.е. используется для автозаполнения. Изначально список скрыт, но после получения текстовым полем фокуса и наборе текста, становится доступным для использования. Элемент имеет только глобальные атрибуты, а используется совместно с элементом ‘input’, у которого имеется для этого атрибут list , принимающий в качестве значения >’datalist’ .

Использование элемента ‘datalist’ показано в примере №3.

Пример №3. Использование элемента ‘datalist’

Как видно из примера, как только была введена буква ‘b’ , сразу же появилась подсказка. Если бы слов, начинающихся на букву ‘b’ было больше, то все они появились бы в качестве вариантов автозаполнения. При вводе второго и последующих символов, в списке останутся только те варианты, которые начинаются на введенную последовательность символов.

Использование тега optgroup в HTML

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

Давайте сразу продемонстрирую использование тега optgroup в HTML:

Лучше всего, если Вы скопируете данный код и посмотрите на результат, тогда Вы сразу поймёте, что делает тег optgroup. Вот таким простым способом можно выделить в отдельную группу несколько вариантов в выпадающем списке.

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:


Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 1 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Элементы HTML форм — выпадающий список (теги select, option, optgroup), текстовое поле (textarea), а также применение label, fieldset и legend

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

    Сегодня мы разберем, как создавать выпадающие (раскрывающиеся) списки, в том числе со множественным выбором, при помощи select и option, каким образом сконструировать текстовое поле посредством textarea, а также поговорим о возможности расширения функциональности форм путем применения тегов fieldset, label и legend.

    Напомню, что любая форма, присутствующая на странице, создается при помощи основного тега form (который часто содержит элемент input) и предназначена для ввода какой-либо информации от пользователя и отправки ее на сервер (пример — форма обратной связи для сайта WP).

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

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

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

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

    Выпадающие списки с помощью select, option и optgroup

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

    Илон Маск рекомендует:  Flushall вытолкнуть буфера всех открытых файлов

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

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

    1. Name — в качестве значения (параметра) этого атрибута нужно добавить название списка (в приведенном примере это «list1») для его идентификации при обработке на сервере:

    Ну и весь выпадающий список является одним из вариантов формы, а потому описывается тегом form, к которому добавляются необходимые атрибуты (action, method, name), обеспечивающие его корректное функционирование. С целью визуального показа кнопки для отправки данных на сервер здесь использован тег input с атрибутами «type=»submit»» и «value=»Отправить»». К слову, кнопочку можно оформить и посредством тега button.

    2. Multiple — этот атрибут, не имеющий параметров, дает возможность множественного выбора в отличие от выше приведенного примера, где можно выбрать только один элемент (строчку). Попробуйте выделить в данном списке мышкой сразу несколько строк (по одной в любых местах, удерживая клавишу Ctrl, либо посредством Shift следующих подряд одна за одной):

    3. Size — устанавливает высоту выпадающего списка, то есть количество отображаемых строк. Если присутствует атрибут multiple, а значение size не указано (как в примере выше), то по умолчанию отображается четыре строки, а, например, при size=»5″ будут видны уже пять:

    4. Required [HTML5] (параметров не имеет) — определяет, что обязательно нужно сделать выбор перед отправкой данных обработчику. Если элемент из списка не выбран, то данные формы отправлены не будут:

    5. Autofocus [HTML5] (значений не имеет) — устанавливает фокус на список сразу после загрузки страницы. Кроме того, если пользователь привык основную часть действий производить клавишами, то как раз такое предварительно настроенное фокусирование поможет делать выбор из списка посредством стрелок на клавиатуре без всякого использования мышки:

    6. Disabled (параметров нет) — блокирует доступ к списку (отключает его). На практике обычно используется вместе со скриптами в тех случаях, когда нужно включать раскрывающийся список только при выполнении определенных условий:

    7. Form [HTML5] — осуществляет связь списка с одной или несколькими формами, к которым он принадлежит, но находится вне контейнера . При этом в роли значения атрибута form прописывается параметр глобального атрибута id, который добавлен к тегу form:

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


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

    1. Value — определяет то значение из выпадающего списка, которое будет отправлено на сервер (обработчику формы). Собственно, обработчику отправляется имя, которое задается атрибутом name тега select, и значение value (для данного примера — 1, 2, 3, 4, 5), соответствующее выбранной строке выпадающего списка:

    2. Disabled — блокирует для выбора элемент выпадающего списка.

    Как видно из примера, строчка «Option» неактивна и выбрать ее невозможно.

    3. Label — отображает текстовое содержание (являющееся его значением) того или иного элемента списка. Если label присутствует, то выводится строчка, тождественная значению этого атрибута и игнорируется текстовое содержание, находящееся внутри тега option. То же самое происходит, ежели содержимое между вовсе отсутствует.

    Смотрите. В выше предоставленном примере первая строка для option в коде пустая (в левой части таблицы), но прописан параметр label=»Тег Option», в результате именно этот текст появился в списке (в правой части). Вторая строка кода в качестве содержимого тега option содержит текст «Тег Textarea», но в раскрывающемся списке справа отображается слово «Textarea», совпадающее со значением label=»Textarea».

    4. Selected — выделяет текущий пункт выпадающего списка:

    Если присутствует атрибут multiple, то есть возможность выделения более одного элемента:

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

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

    1. Label — устанавливает название каждой группы в качестве параметра:

    То же самое, но с multiple и size=»7″ тега select:

    2. Disabled (нет значений) — блокирует выбор элементов той группы, по отношению к которой он установлен, причем, неактивные пункты обычно выделены серым цветом:

    Небольшой видеоролик будет здесь как нельзя кстати:

    Текстовое поле в форме посредством textarea

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

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

    Попробуем теперь добавить к первоначальному коду несколько атрибутов с параметрами:

    1. Name — определяет имя текстовой области в качестве значения для ее идентификации после отправки данных формы при их обработке на сервере.

    2. Cols — ширина поля, которая в роли параметра задается числом стоящих рядом одинаковых символов, размещенных по горизонтали. Значение по умолчанию — 20.

    3. Rows — высота текстового поля, определяемое количеством строк. Если число строк текста, вводимого пользователем, окажется больше значения, заданного этим атрибутом, то справа появится вертикальная полоса прокрутки.

    4. Maxlength [HTML5] — указывает максимальное количество знаков, которые можно поместить в текстовое поле. При превышении лимита дальнейший ввод будет невозможен.

    Ниже представлен пример со всеми выше перечисленными атрибутами, действие каждого из которых вы можете проверить самолично, просто поместив в область текста нужное количество букв и строк (можете просто ввести один и тот же символ несколько раз):

    5. Minlength [HTML5] — указывает минимальное число знаков, которые необходимо ввести в текстовую область. Ежели пользователь попытается отправить текст с меньшим количеством символов, то браузер выведет краткое сообщение с информацией, в которой будет содержаться упоминание о необходимости дополнить содержание формы и о том, сколько знаков уже введено.

    6. Placeholder [HTML5] — с помощью этого атрибута можно поместить текст в поле, являющийся параметром данного атрибута, который исчезнет, когда пользователь начнет вводить символы:

    7. Readonly (без параметров) — ежели к textarea прикрутить данный атрибут, то текстовое поле окажется недоступным для изменения пользователями и будет предназначено только для чтения. Но на него можно навести фокус (подведите курсор к полю и щелкните левой кнопкой мышки), а также выделить и скопировать (частично или полностью) текст:

    Еще несколько атрибутов, реализующих дополнительный функционал при заполнении полей:

    8. Autoсomplete [HTML5] — указывает, должен ли браузер выдавать подсказки при заполнении формы пользователем на основании ранее вводимых данных и дает возможность автоматически вставлять подходящий текст.

    Имеет всего два параметра: on (включен) и off (выключен). Вот пример кода:

    Данный атрибут со значением «on» работает только тогда, когда в веб-обозревателе конкретного пользователя включено автозаполнение полей формы.


    9. Wrap [HTML5] — устанавливает для браузера правила переноса строк в текстовой области с помощью трех значений:

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

    Hard — переносы производятся автоматически, если текст не влезает в поле по ширине, причем, при отправке обработчику места таких переносов будут сохранены. Этот параметр используется только в связке с атрибутом cols:

    Off — отключение переносов строк. Если напечатать текстовый фрагмент без механического переноса посредством клавиши «Enter», то весь текст будет помещен в одну строку, причем, появится горизонтальная полоса прокрутки:

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

    10. Autofocus [HTML5] (не имеет параметров) — инициирует фокусирование на текстовое поле при загрузке страницы с формой.

    11. Disabled — в отличие от атрибута readonly (который также запрещает редактировать содержимое поля, но дает возможность навести на него фокус), полностью блокирует доступ к текстовой области, которая окрашивается обычно в серый цвет:

    Илон Маск рекомендует:  $L - Директива компилятора Delphi

    12. Form [HTML5] — связывает текстовое поле с формой в тех случаях, когда по тем или иным причинам оно расположено вне . Как и в случае с тегом select, связь осуществляется посредством глобального атрибута id для form. При этом параметры id и атрибута form тождественны:

    13. Required — определяет, что поле обязательно для заполнения. Если в текстовой области не будет содержимого, при попытке отправки формы на сервер веб-браузер выведет сообщение о необходимости ее заполнения, а форма отправлена не будет. Содержание сообщения зависит от браузера и не может быть изменено.

    Еще один видеоролик по созданию текстового поля:

    Особенности тега label

    По умолчанию элемент формы при щелчке по его текстовой составляющей не активируется. Возьмем сначала в качестве примера список (реализуемый с помощью атрибута type=»checkbox» тега input), нужные строки которого пользователь должен отметить, заполнив соответствующие чекбокс(-ы) галочками. Чтобы поставить галочку, необходимо щелкнуть по флажку мышкой, но клик по расположенному рядом тексту будет безрезультатным. Можете попробовать ниже:

    Именно тег label позволяет реализовать активацию какого-либо элемента при клике по его названию. Есть 2 способа, с помощью которых можно связать элемент формы HTML и текст.

    1 способ. Необходимо применить идентификатор id внутри элемента формы и указать его имя в качестве значения атрибута for тега label:

    2 способ. Элемент формы поместить внутрь контейнера, созданного тегом label:

    Теперь можете кликнуть не только по самой форме, но и по тексту, расположенному рядом. Итог будет идентичным. Другим примером может служить форма для ввода текста (создаваемая с помощью атрибута type=»text» того же input), где активация (помещение курсора в текстовое поле) будет происходить и после щелчка по надписи «Введите текст»:

    Введите текст:

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

    Fieldset и legend — группировка элементов формы

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

    Давайте в качестве начального примера сформируем одну подгруппу с привлечением атрибута type тега input для создания чекбоксов и в пределах впишем ее название. Ниже в таблице слева находится HTML код для этой формы, а справа — результат его работы:

    Какую CMS вы используете?

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

    1. Name [HTML5] — служит для наименования совокупности элементов, объединенных в контейнере . Название (как параметр этого атрибута) применяется в дальнейшем с целью идентификации конкретной группы при обработке формы, в том числе в скриптах, включая JavaScript.

    Чтобы наглядно продемонстрировать действие name, заключим данную группу в тег form для корректной работы и добавим кнопку с помощью тега button, прописав к нему параметр HTML события onclick=»form.group1.style.backgroundColor=’#e1dccd'», в котором и присутствует значение этого атрибута. Данное событие позволяет пользователю с помощью созданной кнопочки изменить цвет фона в пределах области формы, заданной тегом fieldset:

    2. Disabled [HTML5] — (нет значений) подобно одноименным атрибутам для уже рассмотренных тэгов деактивирует группу элементов (вас ждет неудача при попытке заполнить чекбоксы ниже):

    3. Form [HTML5] — связывает вебформу, расположенную отдельно, с конкретной группой. Идентификация реализуется путем установки одинаковых значений form и универсального атрибута ):

    Какую CMS вы используете?

    Ну а дальше приведу пример кода многообразной формы, куда включены чекбоксы, текстовое поле и радиокнопки:

    В веб-браузере такая веб-форма будет выглядеть следующим образом:


    Какую CMS вы используете?

    Владельцем какого ресурса вы являетесь?

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

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

    HTML optgroup Tag

    Contents

    HTML optgroup: Main Tips

    • HTML optgroup element enables grouping related options within a dropdown menu.
    • It is a child of a element and a parent to elements.
    • optgroup stands for HTML option group.
    • HTML optgroup tags support all global attributes.

    Defining HTML Option Groups

    When you’re using HTML select , option groups may prove useful as they simplify the selection for users. Using HTML tags, you can select optgroups and define them using a label:

    Theory is great, but we recommend digging deeper!
    HTML Coding For Beginners Course: Learn HTML in 1 Hour

    Two optgroup Tag Attributes

    You have to include the label attribute when using HTML optgroup tags. It defines the name for the HTML option group, and the browser will use its value for labeling the groups for the user:

    disabled disables the selection of a specific group. Most browsers also show the disabled options in grey text:

    HTML :: Создание раскрывающихся списков внутри форм

    Использование тегов и

    Для создания раскрывающихся списков с выбором предопределенных вариантов в HTML используется элемент ‘select’ , который формируется парным тегом (от англ. select – выбирать) и является контейнером для пунктов списка. В свою очередь, пункты раскрывающегося списка представлены элементами ‘option’ , которые формируются парным тегом (от англ. option – вариант, выбор).

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

    Элемент ‘select’ также, как и элемент ‘input’, обладает атрибутами: autofocus , disabled , form , required , name , имеющими аналогичное назначение. Их можно посмотреть в нашем справочнике здесь. Кроме того, для указания изначально видимого количества вариантов списка используется атрибут size , который в качестве значения принимает натуральные числа, и логический атрибут multiple , позволяющий выбирать сразу несколько вариантов. Если значение атрибута size больше единицы, но меньше общего количества имеющихся вариантов в списке, то браузер автоматически добавит полосу прокрутки, чтобы было ясно, что имеются еще варианты для выбора.

    Использование элемента ‘select’ показано в примере №1.

    Пример №1. Использование элемента ‘select’

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

    Элемент ‘option’ также имеет несколько своих атрибутов:

    • value – устанавливает значение пункта списка, которое будет отправлено на сервер или использовано скриптами;
    • disable – блокирует доступ к данному варианту списка; атрибут по умолчанию выключен и значений не принимает;
    • selected – если данный логический атрибут присутствует, то пункт списка будет заранее выделен, при этом пользователь сможет в случае необходимости снять выделение;
    • label – в качестве значения принимает строку, которая представляет собой сокращение основного текста, расположенного между открывающим и закрывающим тегами элемента ‘option’ ; если атрибут label указан, то в списке вариантов выводится его значение, а не основной текст.


    Тег и его атрибуты

    В случае необходимости группировки некоторых пунктов раскрывающегося списка применяется элемент ‘optgroup’ , который формируется парным тегом (от англ. option group – группа вариантов) и является контейнером для элементов ‘option’ , объединяемых в группу. Элемент имеет два собственных атрибута: disable и label . Первый атрибут является логическим и блокирует доступ к своей группе пунктов списка, а второй – принимает в качестве значения текст, который будет выводиться, как заголовок группы.

    Использование элемента ‘optgroup’ показано в примере №2.

    Пример №2. Использование элемента ‘optgroup’

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

    Тег и его атрибуты

    Еще одним дополнительным элементом, напоминающим раскрывающийся список и введенным в пятой версии HTML , является элемент ‘datalist’ , формирующийся парным тегом (от англ. data list – перечень данных) и представляющий собой контейнер для хранения элементов ‘option’ . Данный элемент создает список вариантов, которые можно выбирать при вводе текста, т.е. используется для автозаполнения. Изначально список скрыт, но после получения текстовым полем фокуса и наборе текста, становится доступным для использования. Элемент имеет только глобальные атрибуты, а используется совместно с элементом ‘input’, у которого имеется для этого атрибут list , принимающий в качестве значения >’datalist’ .

    Использование элемента ‘datalist’ показано в примере №3.

    Пример №3. Использование элемента ‘datalist’

    Как видно из примера, как только была введена буква ‘b’ , сразу же появилась подсказка. Если бы слов, начинающихся на букву ‘b’ было больше, то все они появились бы в качестве вариантов автозаполнения. При вводе второго и последующих символов, в списке останутся только те варианты, которые начинаются на введенную последовательность символов.

    HTML optgroup Tag

    Contents

    HTML optgroup: Main Tips

    • HTML optgroup element enables grouping related options within a dropdown menu.
    • It is a child of a element and a parent to elements.
    • optgroup stands for HTML option group.
    • HTML optgroup tags support all global attributes.

    Defining HTML Option Groups

    When you’re using HTML select , option groups may prove useful as they simplify the selection for users. Using HTML tags, you can select optgroups and define them using a label:

    Theory is great, but we recommend digging deeper!
    HTML Coding For Beginners Course: Learn HTML in 1 Hour

    Two optgroup Tag Attributes

    You have to include the label attribute when using HTML optgroup tags. It defines the name for the HTML option group, and the browser will use its value for labeling the groups for the user:

    disabled disables the selection of a specific group. Most browsers also show the disabled options in grey text:

    Тег optgroup

    Тег (англ. option group — группа опций) — тег-контейнер для тегов . Объединяет их в группу.

    HTML: 3.2 | 4 / XHTML: 1.0 | 1.1


    Синтаксис
    Атрибуты
    class определяет имя используемого класса
    dir определяет направление символов:
    • ltr — слева направо
    • rtl — справа налево
    disabled флаг. Делает элемент неактивным
    id уникальный индетификатор
    label текст-заголовок группы. Обязательный параметр
    lang определяет используемый язык
    onblur потеря фокуса элементом.
    Отсутствует в спецификации HTML 4.01!
    onclick щелчек на элементе
    ondblclick двойной щелчек на элементе
    onchange потеря фокуса элементом при условии, что его содержимое изменилось.
    Отсутствует в спецификации HTML 4.01!
    onfocus получение фокуса элементом.
    Отсутствует в спецификации HTML 4.01!
    onkeydown нажатие клавиши, когда элемент имеет фокус
    onkeypress нажатие и освобождении клавиши, когда элемент имеет фокус
    onkeyup освобождение ранее нажатой клавиши, когда элемент имеет фокус
    onmousedown нажатие кнопки мыши, когда элемент имеет фокус
    onmousemove движение указателя мыши, когда элемент имеет фокус
    onmouseout смещение указателя мыши с элемента
    onmouseover помещение указателя мыши на элемент
    onmouseup освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
    style задает встроенную таблицу стилей
    title всплывающая подсказка
    Пример

    Выпадающий список с применением :

    Рекомендации по использованию
    • закрывающий тег обязателен ( )
    • тег должен находиться внутри тега-контейнера или
    • должен содержать только теги
    • обязательных атрибутов нет

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

    HTML Tag

    The HTML tag represents a group of elements with a common label.

    The element helps users understand the options when choosing from a large list of options.

    Syntax

    The tag is written as with any number of and/or script-supporting elements.

    The label attribute must be specified. This attribute provides the user with the name of the group. Without this, the element would be meaningless.

    The tag must be nested inside a

    Example

    Here, we have a list of cities that are grouped by country. The tag enables us to do this by adding the country name to the label attribute.

    Attributes

    Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

    There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

    The element accepts the following attributes.

    Element-Specific Attributes

    This table shows the attributes that are specific to the tag/element.

    Attribute Description
    disabled Disables the group of input controls. The form control won’t accept changes from the user. It also cannot receive focus and will be skipped when tabbing.


    This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace (i.e. either disabled or disabled=»disabled» ).

    • [Empty string]
    • disabled
    label Specifies a label for the option group. This attribute must be specified. Its value gives the name of the group.

    Global Attributes

    The following attributes are standard across all HTML5 elements. Therefore, you can use these attributes with the tag , as well as with all other HTML tags.

    • accesskey
    • class
    • contenteditable
    • contextmenu
    • dir
    • draggable
    • dropzone
    • hidden
    • id
    • inert
    • itemid
    • itemprop
    • itemref
    • itemscope
    • itemtype
    • lang
    • spellcheck
    • style
    • tabindex
    • title
    • translate

    For a full explanation of these attributes, see HTML 5 global attributes.

    Event Handler Content Attributes

    Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain «event» occurs. Each event handler content attribute deals with a different event.

    Below are the standard HTML5 event handler content attributes.

    Again, you can use any of these with the element, as well as any other HTML5 element.

    • onabort
    • oncancel
    • onblur
    • oncanplay
    • oncanplaythrough
    • onchange
    • onclick
    • oncontextmenu
    • ondblclick
    • ondrag
    • ondragend
    • ondragenter
    • ondragexit
    • ondragleave
    • ondragover
    • ondragstart
    • ondrop
    • ondurationchange
    • onemptied
    • onended
    • onerror
    • onfocus
    • onformchange
    • onforminput
    • oninput
    • oninvalid
    • onkeydown
    • onkeypress
    • onkeyup
    • onload
    • onloadeddata
    • onloadedmetadata
    • onloadstart
    • onmousedown
    • onmousemove
    • onmouseout
    • onmouseover
    • onmouseup
    • onmousewheel
    • onpause
    • onplay
    • onplaying
    • onprogress
    • onratechange
    • onreadystatechange
    • onscroll
    • onseeked
    • onseeking
    • onselect
    • onshow
    • onstalled
    • onsubmit
    • onsuspend
    • ontimeupdate
    • onvolumechange
    • onwaiting

    For a full explanation of these attributes, see HTML 5 event handler content attributes.

    Differences Between HTML 4 & HTML 5

    To see more detail on the two versions see HTML5 Tag and HTML4 Tag. Also check out the links to the official specifications below.

    Template

    Here’s a template for the tag with all available attributes for the tag (based on HTML5). These are grouped into attribute types, each type separated by a space. In many cases, you will probably only need one or two (if any) attributes. Simply remove the attributes you don’t need.

    For more information on attributes for this tag, see HTML5 Tag and HTML4 Tag.

    Tag Details

    For more details about the tag, see HTML5 Tag and HTML4 Tag.

    Specifications

    Here are the official specifications for the element.

    What’s the Difference?

    W3C creates «snapshot» specifications that don’t change once defined. So the HTML5 specification won’t change once it becomes an official recommendation. WHATWG on the other hand, develops a «living standard» that is updated on a regular basis. In general, you will probably find that the HTML living standard will be more closely aligned to the current W3C draft than to the HTML5 specification.

    optgroup

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

    IE Opera Chrome Firefox Safari
    + + + + +

    Пример

    Группируем вместе похожие опции с помощью тега :

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

    Тег используется для группировки вместе похожих опций в списке select.

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

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

    Адаптация Сайта под ВСЕ разрешения экранов

    Доброго времени суток. Меня зовут Михаил.

    Специализируюсь на создании сайтов и их настройке. Разрабатываю современные сайты, учитывая каждое пожелание заказчика уже более 7 лет. Завершены сотни проектов.

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

    В прошлый раз мы очень подробно обсудили атрибуты тега и особенно подробно атрибут type и его возможности.

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

    в HTML и теги и .» w />

    Тег в HTML.

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

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

    Для начала рассмотрим синтаксис тега . Добавляется он внутрь элемента

    Илон Маск рекомендует:  Что такое код pdf_show_boxed
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL