Атрибут required тега <input> — обов'язкове поле

<form>
  <p>З використанням атрибута required</p>
  <p>Введіть свої дані:</p>
		 <p>Ім'я: <input name="user" required placeholder=""></p>
   <p> Прізвище:  <input name="name" required placeholder=""></p>
   <p> Email: <input type="email" name="email" required placeholder=""></p>
		<button type = "submit">Надіслати</button>
	</form>
<br>
<form>
  <p>Без використання атрибута required</p>
  <p>Введіть свої дані:</p>
		 <p>Ім'я: <input name="user"  placeholder=""></p>
   <p> Прізвище:  <input name="name" placeholder=""></p>
   <p> Email: <input type="email" name="email" placeholder=""></p>
		<button type = "submit">Надіслати</button>
	</form>

HTML

<form>
  <p><label>Ім'я <input name="name" required></label></p>
  <p><label>Пошта <input type="email" name="mail" required></label></p>
  <p><label>Місто
    <select name="city" required>
      <option value="" selected>— оберіть —</option>
      <option>Київ</option>
      <option>Львів</option>
      <option>Одеса</option>
    </select></label></p>
  <p><label>Коментар <input name="note"></label></p>
  <p><label><input type="checkbox" name="agree" required> Погоджуюсь з умовами</label></p>
  <p><button>Надіслати</button></p>
</form>

CSS

form {
  max-width: 340px;
  accent-color: #0172ad;
}
label {
  display: block;
  margin: 2px 0;
}
input, select {
  padding: 4px 6px;
  border: 1px solid #b0b0b0;
  border-radius: 4px;
}
/* зірочка з'являється сама — там, де є required */
label:has(:required)::after {
  content: " *";
  color: #c92a2a;
  font-weight: bold;
}
/* :user-invalid, а не :invalid — порожня форма не червона */
:user-invalid {
  border-color: #c92a2a;
  background: #fff5f5;
}
:user-valid {
  border-color: #2f9e44;
}