Html-тег fieldset і тег legent

Сьогодні ми познайомимося з ще двома HTML-тегами. які допоможуть нам здійснити об'єднання різних полів форм. Суть такого об'єднання полягає в тому, щоб зробити візуальне розділення між різними елементами форми. Це може бути особливо корисно тоді, коли форма досить значних розмірів. І щоб у користувача не виникало питань, і не вийшла плутанина, ми можемо об'єднати поля один з одним. Наприклад, збір контактних даних ми можемо здійснити в одному блоці, а збір іншої інформації в інших блоках. Крім того можна об'єднувати текстові поля з текстовими, чекбокси з чекбоксами і т.д.

Html-тег fieldset і тег legent

HTML-тег
.

Саме HTML-тег

створює блок або контейнер, в якому будуть об'єднані елементи форми. При цьому даний блок є блоковим елементом. І блок створений цим тегом буде візуально видно всередині форми за рахунок того що буде обведений рамкою. Тобто візуальне об'єднання полів відбуватиметься саме за рахунок рамки, якій буде обведений весь контейнер
. У даного HTML-тега є один свій HTML-атрибут. Але крім цього ми можемо вказувати універсальні атрибути.

Приклад додавання тега

в контейнер
:

... елементи форми, які потрібно об'єднати ...

HTML-тег .

Крім того варто зазначити, що ми не можемо застосовувати тег

без HTML-тега . який відповідає за видимий заголовок контейнера
. Тобто, по суті, створює заголовок для кожної окремої групи, знову ж щоб відвідувачеві легше було орієнтуватися всередині форми. При цьому даний заголовок перериває візуальну рамку блоку
і додається в одну лінію разом з нею, що в свою чергу виглядає досить органічно і красиво.

тег також має пару своїх атрибутів, які входять до складу універсальних.

Приклад застосування тега всередині тега

. Застосовуватися HTML-тег повинен відразу після відкриття тега
.

Візуальний заголовок контейнера ... елементи форми, які потрібно об'єднати ...

HTML-довідник і інші матеріали можна і потрібно завантажити тут!