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