HTML: группируем элементы управления
как сгруппировать элементы формы в HTML

Для того, чтобы пользователи не путались при заполнении веб-форм и наслаждались их визуальным представлением, существуют HTML-элементы fieldset
и legend
.
fieldset
позволяет группировать несколько связанных элементов управления формы, а legend
создает заголовки для таких групп, представляя в результате пользователю четкую и понятную структуру данных. Это особенно важно в тех случаях, когда для работы с формами приходится использовать инструменты экранного чтения (скринридеры).
<fieldset>
<legend>Personal Information</legend>
<label for="firstname">First Name:</label>
<input type="text" id="firstname" name="firstname">
</fieldset>
Несомненно, структурированное представление форм делает их более понятными и привлекательными.
Дополнительная информация на MDN
Спасибо за внимание.