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

ВИДЕОКУРС HTML. УРОК 39.

Рубрикатор статьи

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

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

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

Тег <select> в HTML.

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

Видеокурс "Технические секреты групп Вконтакте" доступен для скачивания!

Не получается сделать меню в группе Вконтакте? Устали платить другим за добавление меню в Вашу группу? Хотели бы научится всем техническим тонкостям и экономить свои деньги? Тогда скачайте курс прямо сейчас!

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

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

1
2
<select name="select">
</select>

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

Тег <option> в HTML.

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

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

1
<option>Пункт списка</option>

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

Тег <optgroup> в HTML.

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

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

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

1
2
3
4
<optgroup label="Блок 2 и 3 пункт">
<option>Второй пункт</option>
<option>Третий пункт</option>
</optgroup>

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

1
2
3
4
5
6
7
<select name="select">
<option>Первый пункт</option>
<optgroup label="Блок 2 и 3 пункт">
<option>Второй пункт</option>
<option>Третий пункт</option>
</optgroup>
</select>

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

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

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

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

Видеокурс "Технические секреты групп Вконтакте" доступен для скачивания!

Не получается сделать меню в группе Вконтакте? Устали платить другим за добавление меню в Вашу группу? Хотели бы научится всем техническим тонкостям и экономить свои деньги? Тогда скачайте курс прямо сейчас!

VN:F [1.9.22_1171]
Оценка статьи: 0.0/10 (0 голосов)
Автор: Михаил Веб Дата публикации: 07.05.2014