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

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

Проще всего ставить подписи над полями: каждую пару — в столбик с небольшим промежутком:

<style>
  form { display: grid; gap: 12px; max-width: 280px; }
  label { display: grid; gap: 4px; }
</style>
 
<form>
  <label>Name <input name="name"></label>
  <label>Email <input name="email" type="email"></label>
</form>

Поле внутри <label> связано с подписью: щелчок по тексту ставит курсор в поле, а скринридер читает подпись как его название.

Подписи слева

Для подписей слева удобна сетка из двух колонок: подписи занимают ширину самой длинной, поля — остальное:

<style>
  form { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; max-width: 340px; }
</style>
 
<form>
  <label for="name">Name</label> <input id="name">
  <label for="city">Delivery city</label> <input id="city">
</form>

Здесь подпись и поле — соседи, поэтому их связывают атрибутами for и id.

Чекбокс и текст

Флажок и его подпись выравнивают по центру через flexbox:

<label style="display: flex; align-items: center; gap: 8px;">
  <input type="checkbox"> Remember me
</label>

На узких экранах подписи слева лучше переносить наверх — медиазапросом меняют grid-template-columns на одну колонку.

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

Подписи выравнивают пробелами или задают каждой фиксированную ширину в пикселях. Стоит перевести форму на другой язык или увеличить шрифт — длинная подпись переносится и ломает ряд. Колонка auto в сетке подстраивается под самую длинную подпись сама.