SdelaemBlog

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

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

Главная Статьи HTML & CSS ВидеоКурс HTML HTML-тег <fieldset> и тег <legent>. Объединение полей формы.

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

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

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

HTML-тег <fieldset>.

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

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

…элементы формы, которые нужно объединить…

HTML-тег <legent>.

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

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

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

Визуальный заголовок контейнера …элементы формы, которые нужно объединить…

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

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

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

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

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

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

Смайлы

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

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

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

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

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

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

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

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