HTML-тег <fieldset> и тег <legent>. Объединение полей формы.

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

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

В прошлом видео уроке мы поговорили о добавлении поля ввода многострочного текста и об еще, одном способе добавления кнопок в HTML-форму. Но и это еще не все возможности форм в HTML.

Сегодня мы познакомимся с еще двумя HTML-тегами, которые помогут нам осуществить объединение различных полей форм. Суть такого объединения заключается в том, чтобы сделать визуальное разделение между различными элементами формы. Это может быть особенно полезно тогда, когда форма довольно внушительных размеров. И чтобы у пользователя не возникало вопросов, и не получилась путаница, мы можем объединить поля друг с другом. Например, сбор контактных данных мы можем осуществить в одном блоке, а сбор другой информации в других блоках. Кроме того можно объединять текстовые поля с текстовыми, чекбоксы с чекбоксами и т.д.

HTML-тег fieldset и тег legent. Объединение полей формы.

HTML-тег <fieldset>.

Именно HTML-тег <fieldset> создает блок или контейнер, в котором будут объединены элементы формы. При этом данный блок является блочным элементом. И блок созданный этим тегом будет визуально виден внутри формы за счет того что будет обведен рамкой. То есть визуальное объединение полей будет происходить как раз за счет рамки, которой будет обведен весь контейнер <fieldset>. У данного HTML-тега есть один свой HTML-атрибут. Но кроме этого мы можем указывать универсальные атрибуты.

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

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

Пример добавления тега <fieldset> в контейнер <form>:

<fieldset title="Заголовок контейнера">
...элементы формы, которые нужно объединить...
</fieldset>

HTML-тег <legent>.

Кроме того стоит отметить, что мы не можем применять тег <fieldset> без HTML-тега <legent>, который отвечает за видимый заголовок контейнера <fieldset>. То есть, по сути, создает заголовок для каждой отдельной группы, опять же чтобы посетителю легче было ориентироваться внутри формы. При этом данный заголовок прерывает визуальную рамку блока <fieldset> и добавляется в одну линию вместе с ней, что в свою очередь смотрится довольно органично и красиво.

Тег <legent> также имеет пару своих атрибутов, которые входят в состав универсальных.

Пример применение тега <legent> внутри тега <fieldset>. Применяться HTML-тег должен сразу после открытия тега <fieldset>.

<fieldset title="Заголовок контейнера">
<legent>Визуальный заголовок контейнера</legent>
...элементы формы, которые нужно объединить...
</fieldset>

Видео урок: HTML-тег <fieldset> и тег <legent>. Объединение полей формы.

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

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

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

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

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