You don't know HTML: <fieldset>

Элемент <fieldset> в HTML предназначен для группировки элементов формы с опциональной подписью. Явные элементы для группировки — флажки, радио-кнопки, переключатели и данные, которые разбиты на несколько полей, как адрес или телефон.

Подпись задаётся с помощью элемента <legend>. Если он есть, то должен быть первым прямым потоком <fieldset>. Иное размещение или оборачивание в контейнер не валидно и подпись не будет привязана к <fieldset>.

У элемента <fieldset> встроенная роль group. Наличие валидного <legend> задаёт имя для группы. Воспроизвести это можно с помощью ARIA, но зачем, если в платформе есть встроенный элемент с соответствующей семантикой:

<div 
  role="group" 
  aria-labelledby="legend"
>
  <div id="legend">Размер</div>
  <!-- переключатели -->
</div>

<!-- встроенный аналог -->
<fieldset>
  <legend>Размер</legend>
  <!-- переключатели -->
</fieldset>

Помимо встроенной роли, семантики и привязки имени у <fieldset> есть API. Атрибут disabled отключает вложенные элементы формы, поэтому не нужно вручную каждому проставлять disabled. Полезно для отключения части формы.

Атрибут name задаёт идентификатор группы для доступа к ней через Form API. Это удобно использовать в сочетании со свойством elements, которое хранит все элементы формы или группы. Через него можно получить конкретный элемент.

<form name="variants">
  <fieldset name="sizes">
    <legend>Размер</legend>
    <!-- переключатели -->
  </fieldset>
  <!-- ... -->
</form>
<script>
  const variantsForm = document.forms['variants'];
  // или document.forms.variants
  // или document.forms.namedItem('variants')
  const sizeGroup = variantsForm.elements['sizes'];
  // или variantsForm.elements.sizes
  // или variantsForm.elements.namedItem('sizes')
  
  // отключение группы
  sizeGroup.disabled = true;
  // элементы группы
  const elements = sizeGroup.elements;
</script> 

У <fieldset> можно вызывать методы Constraint Validation API и проверить на валидность только поля из группы, а не всей формы целиком. Также применимы псевдо-классы :valid/:invalid, :user-valid/:user-invalid.

Атрибут form позволяет привязать группу со всеми элементами к указанной форме. Это позволяет вынести группу за пределы формы, сохранив с ней связь. Сбор данных для отправки, валидация и методы работы с элементами будут доступны.

У <fieldset> есть некоторые особенности стилизации. По умолчанию у него блочный контекст форматирования, ширина подстраивается под контент, есть рамка и <legend> размещается поверх рамки. Но элемент полностью стилизуемый.

Таким образом <fieldset> в сочетании с <legend> полезен для группировки полей, передаёт вспомогательным технологиям нужную семантику и имя, обладает API для управления элементами (отключение, вынос из формы, получение, валидация).

#ydkhtml