Как сделать обязательное поле для заполнения html

Как сделать поля в форме обязательными для заполнения за 1 минуту в HTML

Практически все современные сайты и новые имеют формы, которые проверятся на заполнение без перезагрузки страницы. Так называемые – обязательныеполя формы. Но какие способы для создания таких форм при этом используются?

До недавнего времени самым популярным способом было использование jаvascript. Очень удобной библиотекой является jquery validation. Данный способ является современным, но для его интеграции в форму на сайте нужны некоторые навыки работы и время.

С появлением html 5 и его повсеместной интеграцией на современные сайты можно отказаться от использования jаvascript. При этом для того, чтобы сделать поле в форме обязательным для заполнения нужно только добавить атрибут required.

С атрибутом required браузер перед отправкой формы проверит, заполнено ли конкретное поле или нет. Если нет, то пользователю будет указано на обязательное заполнение поля или даже всех полей формы.

А для создания таких полей потребуется не больше минуты.

Итак, допустим есть небольшая форма:

Вот так она выглядит в браузере:

Теперь делаем некоторые поля в форме обязательными для заполнения:

Вот и все. Мы сделали все поля обязательными для заполнения меньше, чем за 1 минуту. Если не заполнять обязательные поля, то мы увидим следующие сообщения:

И, немаловажное. Данная проверка работает во всех современных браузерах и только для спецификации html 5. Для непосвященных — в начале html кода нужно вставить тег .

Атрибут 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 ,
• number ,
• checkbox ,
• radio ,
• file .

Если в группе радиокнопок с одинаковым значением атрибута name хотя бы у одной указан атрибут required , то вся группа будет считаться обязательной. Поэтому лучше явно прописывать required всем радиокнопкам в группе. При этом для чекбоксов с одинаковыми именами это не работает. Обязательным будет только тот чекбокс, у которого прописан атрибут.

Атрибут не сработает для любых кнопок, а также для полей ввода с типами color и range . Причина в том, что у таких полей существует значение по умолчанию, даже если оно явно не прописано в атрибуте value . У это #000000 , а у это среднее значение между min и max . Так что браузер посчитает их заполненными в любом случае и не покажет предупреждение.

Кроме того, атрибут required не работает для скрытых полей type = «hidden» и для полей с атрибутом readonly .

Как понять

Скопировать ссылку «Как понять» Скопировано

В момент отправки формы браузер выполняет валидацию введённых данных. Если поле, у которого есть атрибут required , не заполнено, то браузер не позволит отправить форму и покажет сообщение. Внешний вид и текст сообщения может отличаться в разных браузерах. Сообщение в Google Chrome:

Подсказки

Скопировать ссылку «Подсказки» Скопировано

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

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

�� Необходимо визуально выделять обязательные для заполнения поля формы. Почему-то исторически сложилось, что рядом с подписью для поля ставят звёздочку. Раньше под формой писали пояснение, что звёздочка значит обязательное поле. Но со временем пропало даже пояснение.

Звёздочка — плохой паттерн. Как минимум потому что скринридер прочитает её просто как «звёздочка». Лучше явно написать в скобках «(обязательное)». Тогда пользователь, каким бы инструментом он не пользовался, точно будет знать, что поле надо заполнить.

Атрибут required

Устанавливает текстовое поле обязательным для заполнения перед отправкой формы на сервер. Если в обязательном поле нет текста, браузер выведет сообщение, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может. На рис. 1 показано сообщение в разных браузерах.

Chrome	Opera	Firefox

Рис. 1. Вид сообщения об обязательном поле

Синтаксис

Значения

Значение по умолчанию

По умолчанию атрибут required выключен.

HTML5 IE Cr Op Sa Fx

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

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Атрибут required

Атрибут required указывает на то, что данный элемент HTML формы должен быть обязательно заполнен.

Атрибут следует применять к тегам input или textarea .

При попытке отправки формы в том случае, если поле с этим атрибутом не заполнено — браузер не даст отправить форму и выведет ошибку в виде всплывающей подсказки. К сожалению, текст ошибки и ее вид нельзя изменить с помощью HTML или CSS.

Имейте ввиду, что наличие атрибута required не освобождает вас от проверки правильности заполненности формы со стороны сервера на PHP (так как защиту через required легко обойти).

Пример

Давайте тегу input добавим атрибут required . Не вводя ничего в поле попробуйте нажать на кнопку, чтобы отправить форму. Браузер не даст отправить форму, добавит тень инпуту и выведет сообщение об ошибке:

Смотрите также

• атрибут pattern ,
  который позволяет выполнить валидацию инпута