SdelaemBlog

Создание Сайтов и их настройка

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

Главная Статьи HTML & CSS ВидеоКурс HTML Выпадающий список в HTML — Тег <select> в HTML и теги <option> и <optgroup>.

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

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

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

Тег <select> в HTML.

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

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

Для начала рассмотрим синтаксис тега <select>. Добавляется он внутрь элемента <form>, это следует учитывать.


Таким образом, может выглядеть самый простой вариант HTML-кода для вывода HTML-тега <select>.

Тег <option> в HTML.

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

Синтаксис тега <option> в HTML не представляет ничего особенного и в самом простом варианте его можно использовать так:

Пункт списка

То есть из сказанного выше становится понятно, что мы должны использовать два HTML-тега для создания выпадающего списка это тег <select> и тег <option>.

Тег <optgroup> в HTML.

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

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

Синтаксис также прост, но стоит учитывать, что внутри тега <optgroup> должен присутствовать тег <option>.

Второй пунктТретий пункт

Если же говорить о полном коде выпадающего списка, то он может выглядеть примерно так:


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

Видео урок: Выпадающий список в HTML — Тег <select> в HTML и теги <option> и <optgroup>.

HTML-справочник и другие материалы можно и нужно скачать здесь!

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

Оставьте свой коммент
ДОСТАВКА СТАТЕЙ ПОЧТОЙ, на дом

Комментариев пока нет, но вы можете стать первым!

Чтобы оставить комментарий, заполните, пожалуйста форму ниже:

Смайлы

Обязательно для Заполнения!

Обязательно для Заполнения!

Проверка комментариев включена. Прежде чем Ваши комментарии будут опубликованы пройдет какое-то время.

Отправить жалобу разработчику сайта

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

[contact-form-7 404 "Not Found"]

Спасибо большое за поддержку проекта! :)

Для поддержки проекта, выберите убодный способ для оплаты: