Можна візуально об'єднати в групу багато елементів керування форми, розмістивши навколо них рамку групи.
Рамка навколо групи створюється за допомогою елемента керування форми <fieldset>. Рамка позначається текстом, який задається у вкладеному тегі <legend>.
У цій формі всі межі навколо груп елементів мають тип outset, товщиною 10px. Зовнішня рамка кольору #B22222, рамка навколо елементів «Ваш вік» — кольору FFA500, рамка навколо елементів «Якими мовами Ви читаєте» — кольору #00FF7F. Той самий колір має і шрифт відповідної легенди.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Форма з групами елементів</title>
<style>
fieldset {
border: 10px outset;
margin-bottom: 20px;
padding: 15px;
}
#mainForm { border-color: #B22222; }
#ageGroup { border-color: #FFA500; }
#languageGroup { border-color: #00FF7F; }
legend {
font-weight: bold;
padding: 0 10px;
}
#ageGroup legend { color: #FFA500; }
#languageGroup legend { color: #00FF7F; }
input[type="submit"] {
margin-top: 10px;
padding: 5px 15px;
font-size: 16px;
}
</style>
</head>
<body>
<form id="mainForm">
<fieldset id="personalInfo">
<legend>Особиста інформація</legend>
<label for="name">Ім'я:</label><br>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br><br>
<fieldset id="ageGroup">
<legend>Ваш вік</legend>
<input type="radio" id="age1" name="age" value="under20">
<label for="age1">До 20 років</label><br>
<input type="radio" id="age2" name="age" value="20-35">
<label for="age2">20-35 років</label><br>
<input type="radio" id="age3" name="age" value="over35">
<label for="age3">Понад 35 років</label>
</fieldset><br>
<fieldset id="languageGroup">
<legend>Якими мовами Ви читаєте</legend>
<input type="checkbox" id="lang1" name="language" value="ukrainian">
<label for="lang1">Українською</label><br>
<input type="checkbox" id="lang2" name="language" value="russian">
<label for="lang2">Російською</label><br>
<input type="checkbox" id="lang3" name="language" value="english">
<label for="lang3">Англійською</label><br>
<input type="checkbox" id="lang4" name="language" value="other">
<label for="lang4">Іншою</label>
</fieldset><br>
<label for="comments">Ваші коментарі:</label><br>
<textarea id="comments" name="comments" rows="4" cols="50"></textarea><br>
<input type="submit" value="Надіслати">
</fieldset>
</form>
</body>
</html>