Атрибут required

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

приклад

Скопіювати посилання "Приклад" Скопійовано

У прикладі нижче поле для телефону є обов'язковим:

    Ваше ім'я:  Ваш номер телефону (обов'язково): Надіслати заявку  form> label> Ваше ім'я:  input type="text"> label> label> Ваш номер телефону (обов'язково):  input type="tel" required> label> button type="submit">Надіслати заявкуbutton> form>    Копіювати Скопійовано Не вдалося скопіювати   

Як пишеться

Скопіювати посилання "Як пишеться" Скопійовано

Достатньо написати атрибут required без значення, адже він булевий: якщо він є поле обов'язкове, а якщо ні — не обов'язкове. Якщо вам з якоїсь причини не можна використовувати атрибути булева (наприклад, в XML-розмітці), напишіть required = "required" .

Атрибут required можна використовувати для , , а також з наступними типами:

• text ,



• search



• url ,



• tel



• email ,



• password ,



• date ,



• month ,



• week ,



• time ,



• datetime - local ,



• ,



• checkbox



• radio ,



• file.

Якщо групі радіокнопок з однаковим значенням атрибута name хоча б у однієї вказаний атрибут required , то вся група вважатиметься обов'язковою. Тому краще явно прописувати required всім радіокнопкам у групі. При цьому для чекбоксів із однаковими іменами це не працює. Обов'язковим буде лише той чекбокс, який має прописаний атрибут.

Атрибут не спрацює для будь-яких кнопок, а також для поля введення з типами color і range . Причина в тому, що такі поля мають значення за замовчуванням, навіть якщо воно явно не прописане в атрибуті value . Це #000000 , а це середнє значення між min і max . Так що браузер вважатиме їх заповненими у будь-якому випадку і не покаже попередження.

Крім того, атрибут required не працює для прихованих полів type = "hidden" і для полів з атрибутом readonly .

Як зрозуміти

Скопіювати посилання "Як зрозуміти" Скопійовано

У момент надсилання форми браузер виконує валідацію введених даних. Якщо поле, яке має атрибут required , не заповнене, то браузер не дозволить відправити форму і покаже повідомлення. Зовнішній вигляд та текст повідомлення можуть відрізнятися у різних браузерах. Повідомлення в Google Chrome:

Підказки

Скопіювати посилання "Підказки" Скопійовано

💡 Поля з атрибутом required можна стилізувати за допомогою псевдокласу: required. Поля, які не мають цього атрибуту, стилізуються псевдокласом :optional .

На практиці

Скопіювати посилання "На практиці" Скопійовано

Олена Батицька радить

Скопіювати посилання "Олена Батицька радить" Скопійовано

🛠 Необхідно візуально виділяти обов'язкові для заповнення поля форми. Чомусь історично склалося, що поруч із підписом для поля ставлять зірку. Раніше під формою писали пояснення, що зірочка означає обов'язкове поле. Але згодом зникло навіть пояснення.

Зірочка - поганий патерн. Як мінімум тому, що скринрідер прочитає її просто як «зірочка». Краще явно написати у дужках "(обов'язкове)". Тоді користувач, яким би інструментом він не користувався, точно знатиме, що поле треба заповнити.

Зробити елементи форм обов'язковими для заповнення

Зробити елементи форм обов'язковими до заповнення можна через атрибут required .

input type="text" required> 

Елементи з атрибутом доступні в CSS через псевдоклас :required .

Якщо поле є обов'язковим для заповнення, то зазвичай в назві поля ставлять символ «*», щоб візуально було видно, що поле обов'язкове для заповнення.

У випадку, якщо для обов'язкового поля атрибут не вказаний (наприклад, використовується поведінка виведення обов'язкового поля), то рекомендується вказувати aria-required , щоб пристрої, призначені для людей з обмеженими можливостями, могли розуміти, що поле обов'язкове для заповнення.

 type="text" aria-required="true"> 

Також варто перевіряти, що поле заповнене за сервера, наприклад через PHP.

Підтримати автора

Оновлено: 26 жовтня 2024

Атрибут required

Встановлює поле форми обов'язковим для заповнення перед надсиланням форми на сервер. Якщо обов'язкове поле є порожнім, браузер виведе повідомлення, а форма відправлена ​​не буде. Вигляд та зміст повідомлення залежить від браузера і змінюватись користувачем не може. На рис. 1 показано повідомлення у різних браузерах.

Мал. 1. Вид повідомлення про обов'язкове поле

Синтаксис

Значення

Значення за замовчуванням

За замовчуванням атрибут required вимкнено.

HTML5 IE Cr Op Sa Fx

Браузери

Opera не перевіряє введене значення, якщо не вказано атрибут name .

Не викладайте свій код безпосередньо у коментарях, він відображається некоректно. Скористайтеся сервісом cssdeck.com або jsfiddle.net, збережіть код та в коментарях дайте на нього посилання. Так і результат одразу побачать.