Группа элементов формы <fieldset>

Тег <fieldset> позволяет группировать элементы формы. Данная группировка помогает пользователям проще ориентироваться в формах, содержащими большое число данных.

Атрибуты тега <fieldset>

disabled

Указывает, что группа элементов формы блокирована.

form

Идентификатор формы, с которой связывается данная группа.

Для тега <fieldset> также доступны общие атрибуты и атрибуты обработки событий.

Большинство браузеров отображают элемент fieldset со следующими значениями стилей:

fieldset {
display: block;
margin-left: 2px;
margin-right: 2px;
padding-top: 0.35em;
padding-bottom: 0.625em;
padding-left: 0.75em;
padding-right: 0.75em;
border: 2px groove (внутреннее значение);
}

Элементу fieldset можно присвоить свои стили, то есть вы можете сделать рамку любого цвета и так далее.

<h5>Пример</h5>
<style type="text/css">
    fieldset {
        border: none;
        padding: 10px 0 15px;
    }
    fieldset + fieldset {
        border-top: 1px dotted #2375b1;
    }
    fieldset input,
    fieldset textarea {
        display: block;
        width: 210px;
        border: 1px solid gray;
        padding: 5px;
    }
    fieldset textarea {
        width: 100%;
    }
</style>
<form>
    <fieldset>
        <label>Ваше имя <input type="text" name="fullname"></label>
        <label>Контактный телефон <input type="tel" pattern="[78][0-9]{10}" name="tel"></label>
    </fieldset>
    <fieldset>
        <label>Количество комнат <input type="number" name="room"></label>
        <label>Этаж <input type="number" name="floor"></label>
        <label>Этажей в доме <input type="number" name="floors"></label>
    </fieldset>
    <fieldset>
        <label>Описание <textarea required="" name="comment"></textarea></label>
        <label>Цена <input type="number" value="" pattern="[0-9]{4,9}" name="cost" min="1000"></label>
    </fieldset>
</form>