Как сделать поле обязательным

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

Добавьте полю атрибут required — браузер не отправит форму, пока его не заполнят:

<form>
  <label>Name <input name="name" required></label>
  <button>Send</button>
</form>

Нажмите «Send» с пустым полем: появится подсказка браузера, а фокус перейдёт к полю.

Звёздочка у подписи

Обязательные поля принято отмечать звёздочкой. Её можно добавить в CSS, а псевдокласс :has() найдёт подпись с обязательным полем внутри:

<style>
  label { display: block; margin-bottom: 8px; }
  label:has(:required)::after { content: " *"; color: crimson; }
</style>
 
<form>
  <label>Email <input type="email" required></label>
  <label>Phone <input type="tel"></label>
</form>

Объясните звёздочку один раз над формой: «Поля со звёздочкой обязательны».

Флажки и переключатели

required работает и у чекбокса — например, для согласия с условиями. У группы радиокнопок с одним name атрибут достаточно поставить одной из них.

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

Поле, состоящее только из пробелов, считается заполненным: required проверяет лишь, что значение не пустое. Кроме того, проверку в браузере легко обойти. Поэтому данные из формы всё равно проверяют на сервере — браузерная проверка лишь удобство для пользователя.