CSS псевдокласс :required - Изучение CSS

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

На этой странице рассматривается, какие элементы соответствуют :required, чем он отличается от :optional и псевдоклассов валидности, важная оговорка о доступности, а также рабочий пример, который можно запустить.

Какие элементы соответствуют `:required`?

:required соответствует только тем элементам, которые поддерживают атрибут required и имеют его установленным:

<input> (типов, которые могут быть обязательными — text, email, password, tel, url, number, date, checkbox, radio, file и т.д.)
<select>
<textarea>

Он не соответствует <button>, <input type="submit">, <input type="hidden"> или любому элементу, для которого атрибут required не имеет смысла. Сопоставление динамическое: если добавить или удалить атрибут required с помощью JavaScript, стили обновятся немедленно.

`:required` и связанные псевдоклассы

:required описывает состояние ограничения, а не то, выполнено ли оно пользователем. Сочетайте его с подходящими соседними псевдоклассами:

Псевдокласс	Соответствует когда…
`:required`	поле имеет атрибут `required`
`:optional`	поле не имеет `required`
`:valid`	текущее значение поля проходит проверку ограничений
`:invalid`	текущее значение поля не проходит проверку ограничений

Каждый элемент управления формой является либо :required, либо :optional, поэтому можно чётко разделить стили между ними. Состояния валидности (:valid / :invalid) реагируют по мере того, как пользователь вводит данные.

Синтаксис

:required {
  /* CSS declarations */
}

Обычно псевдокласс ограничивают типом элемента управления, чтобы правило не применялось к несвязанным элементам:

input:required,
select:required,
textarea:required {
  border-left: 3px solid #1c87c9;
}

Примечание о доступности

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

Пример

В примере ниже обязательные поля помечены синей нижней рамкой, а необязательные затенены с помощью :optional:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        margin: 40px auto;
        max-width: 400px;
      }
      label,
      button {
        display: block;
        width: 100%;
        margin-bottom: 1.5em;
      }
      input,
      button {
        padding: .4em 1em;
      }
      input {
        border: 1px solid #666666;
      }
      input:optional {
        background-color: #eeeeee;
        color: #666666;
      }
      input:required {
        border-bottom: 3px solid #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>:required selector example</h2>
    <div class="example">
      <form action="#">
        <label>
          <input type="text" required />Name *
        </label>
        <label>
          <input type="email" required />Email *
        </label>
        <label>
          <input type="tel" />Phone (optional)
        </label>
        <label>
          <input type="url" />Address (optional)
        </label>
      </form>
    </div>
  </body>
</html>

Попробуйте сами »

Обязательные поля Name и Email получают синее подчёркивание; необязательные поля Phone и Address получают серый фон — всё это управляется правилами :required и :optional.

Поддержка браузерами и спецификация

:required поддерживается во всех современных браузерах уже на протяжении многих лет, поэтому его можно использовать без запасных вариантов. Псевдокласс определён в двух спецификациях:

Связанные темы

:optional — инверсия: стилизует элементы управления без required.
:valid и :invalid — реагируют на то, проходит ли введённое значение проверку ограничений.
:focus — сочетайте с :required для выделения активного обязательного поля.
:disabled и :checked — другие псевдоклассы состояния формы.
HTML Forms — где устанавливается атрибут required.

Практика

Какова функция псевдокласса ':required' в CSS?

Выбирает каждый элемент `<input>` с атрибутом 'required'Выбирает каждый элемент `<input>` без атрибута 'required'Встраивает изображения в CSS-файлИспользуется для выбора элементов с атрибутом required в формеИзменяет размер изображений в CSS

Какие элементы соответствуют :required?

:required и связанные псевдоклассы