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