HTML5: атрибут формы required

Логический атрибут required HTML сообщает браузеру о возможности отправки данных формы только при заполнении обязательных полей. Это значит, что поле нельзя оставить пустым, и что в зависимости от других атрибутов или типов полей приниматься могут только конкретные типы значений. Чуть позже мы поговорим о том, как сообщать браузерам о необходимости отправки определенные типы данных.

Если обязательные поля остаются пустыми, форма не будет отправлена. Opera, Firefox, Internet Explorer 10+ и Chrome выдают пользователю сообщение об ошибке. Например, «Заполните это поле» или «Нужно заполнить пустые поля».

В терминологии Javascript событие focus запускает элемент формы, когда на нее переключается фокус, когда фокус переходит на другой элемент или она теряет фокус.

В CSS можно использовать псевдокласс :focus для стилизации элементов, которые выделены в данный момент.

Атрибут required применим для любого типа элемента ввода, за исключением button, submit, image, color и hidden. У всех этих элементов имеется значение по умолчанию, поэтому дополнительный атрибут будет лишним. Синтаксис данного атрибута просто required или required="required", если вы используете XHTML-синтаксис.

Добавим атрибут HTML input required к форме регистрации. Сделаем поля имени, адреса электронной почты, пароля и даты подписки обязательными:

<ul>
  <li>
    <label for="register-name">Моё имя:</label>
    <input type="text" id="register-name" name="name" required aria-required="true">
  </li>
  <li>
    <label for="email">Мой email:</label>
    <input type="text" id="email" name="email" required aria-required="true">
  </li>
  <li>
    <label for="url">Мой вебсайт:</label>
    <input type="text" id="url" name="url">
  </li>
  <li> 
    <label for="password">Мой будущий пароль:</label>
    <p>(как минимум 6 символов, без пробелов)</p>
    <input type="password" id="password" name="password" required aria-required="true">
  </li>
  <li>
    <label for="rating">Мои знания HTML от 1 до 10:</label>
    <input type="text" name="rating" type="range">
  </li>
  <li>
    <label for="startdate">Хочу, чтобы моя подписка начиналась с:</label>
    <input type="text" id="startdate" name="startdate" required aria-required="true">
  </li>
  <li>
    <label for="quantity">Я бы хотел получать копии книг <input type="text" name="quantity" id="quantity"> <cite> The HTML5 Herald</cite></label>
  </li>
  <li>
    <label for="upsell">Также хочу подписаться на <cite>The CSS3 Chronicle</cite></label>
    <input type="checkbox" id="upsell" name="upsell" value="CSS Chronicle">
  </li>
  <li>
    <input type="submit" id="register-submit" value="Подтвердить">
  </li>
</ul>

На скриншотах, приведенных ниже, можно видеть, что делает атрибут required HTML при попытке подтвердить форму:

Сообщение об обязательных полях в Firefox

Та же ситуация в Opera…

и в Google Chrome

Стилизация обязательных полей в форме

Вы можете стилизовать обязательные поля в формах при помощи псевдокласса :required,:optional или отрицательного псевдокласса :not(:required)). Также можно стилизовать валидные и не валидные поля с помощью псевдоклассов :valid и :invalid. При помощи этих псевдоклассов HTML input required можно показывать пользователям, какие поля обязательны к заполнению:

input {
  background-position: 0% 50%;
  background-repeat: no-repeat;
  padding-left: 15px;
}
input:required {
  background-image: url('../images/required.png');
}
input:focus:invalid { 
  background-image: url('../images/invalid.png');
} 
input:focus:valid { 
  background-image: url('../images/valid.png');
}

В данном случае мы добавляем фоновое изображение (звёздочку) к обязательным полям формы. В input-элементы нельзя включать генерируемый контент. Поэтому лучше будет использовать фоновое изображение. Кроме этого валидные и не валидные поля можно выделить разными фоновыми картинками. Изменения будут заметны, только если пользователь выделил соответствующий элемент формы.

Предупреждение: Firefox стилизует не валидные элементы

Учтите, что браузер Firefox применяет к не валидным элементам собственную стилизацию (красную тень), как было показано на одной из картинок выше. Чтобы отключить этот эффект для required HTML, воспользуйтесь следующим CSS-кодом:

:invalid { box-shadow: none; }

Подсказка: таргетированная стилизация для устаревших браузеров

Устаревшие браузеры вроде IE8 и IE9 не поддерживают псевдокласс :required, но можно предоставить таргетированные стили при помощи селектора атрибутов:

input:required,
input[required] {
  background-image: url('../images/required.png');
}

Также можно использовать этот атрибут в качестве хука для валидации формы в браузерах, не поддерживающих валидацию на основе HTML5. Javascript-код проверит пустые элементы ввода на наличие атрибута required и не отправит форму при обнаружении пустых обязательных полей.