:required

Псевдоклас CSS :required (обов'язковий) представляє всі елементи <input>, <select> і <textarea>, які мають атрибут required.

Спробуйте його в дії

Цей псевдоклас корисний для виділення полів, які повинні містити дійсні дані, перш ніж форма може бути подана.

[!NOTE] Псевдоклас :optional вибирає необов'язкові поля форм.

Синтаксис

:required {
  /* ... */
}

Доступність

До обов'язкових полів <input> повинен бути застосований атрибут required. Завдяки цьому можна мати впевненість, що люди, які користуються допоміжними технологіями, як то читачем з екрана, зможуть зрозуміти, які поля потребують дійсного вмісту для успішного подання форми.

Якщо форма також містить необов'язкові поля, то обов'язкові поля повинні бути візуально позначені, у спосіб, який не покладається лише на колір для передачі змісту. Зазвичай використовують описовий текст чи піктограму.

• MDN Розуміння WCAG, пояснення Настанови 3.3
• Розуміння Критерію успіху 3.3.2 | W3C розуміння WCAG 2.0

Приклади

Обов'язкове поле має червону межу

HTML

<form>
  <div class="field">
    <label for="url_input">Уведіть URL:</label>
    <input type="url" id="url_input" />
  </div>

  <div class="field">
    <label for="email_input">Уведіть адресу електронної пошти:</label>
    <input type="email" id="email_input" required />
  </div>
</form>

CSS

label {
  display: block;
  margin: 1px;
  padding: 1px;
}

.field {
  margin: 1px;
  padding: 1px;
}

input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:invalid {
  border-color: #c00000;
}

Результат

Специфікації

Сумісність із браузерами

Дивіться також

• Інші псевдокласи, що стосуються валідації: :optional, :invalid, :valid
• Валідація даних форми