Как сгруппировать поля формы

Короткий ответ

Оберните связанные поля в <fieldset>, а заголовок группы положите в <legend>:

<fieldset>
  <legend>Delivery</legend>
  <label><input type="radio" name="delivery" checked> Courier</label>
  <label><input type="radio" name="delivery"> Pickup</label>
</fieldset>

Программа чтения с экрана объявит название группы, прежде чем прочитать варианты: «Delivery, Courier». Особенно это важно для радиокнопок и флажков — без заголовка непонятно, о чём выбор.

Оформление

У <fieldset> по умолчанию рамка и отступы. Их меняют как у любого блока, а <legend> можно оформить заголовком:

<style>
  fieldset { display: grid; gap: 8px; max-width: 280px; padding: 12px 16px; border: 1px solid silver; border-radius: 10px; }
  legend { padding: 0 6px; font-weight: 700; }
</style>
 
<fieldset>
  <legend>Contacts</legend>
  <input placeholder="Email">
  <input placeholder="Phone">
</fieldset>

Отключить всю группу

Атрибут disabled у <fieldset> отключает сразу все поля внутри — удобно, когда часть формы ещё недоступна:

<fieldset disabled>
  <legend>Gift wrapping</legend>
  <label><input type="checkbox"> Add a card</label>
</fieldset>

Частая ошибка

Рамку <fieldset> убирают через border: none, а вместе с ней удаляют и <legend>, заменяя его абзацем. Внешне это экономит место, но группа теряет название для скринридера. Оставляйте <legend>, даже если оформляете его как обычный текст.