How do I make a field required in HTML?
I can’t figure out why the new required attribute of HTML seems to not be working, and I know my simple code seems to be okay. What should I do to make this work?
Here is my code in HTML:
Correct me if I’m wrong but, if ever I run the code in the browser and click the button without any value in the textbox it should have a tooltip showing that that field was required, shouldn’t it? But nothing happens no matter how many times you click the button. Am I misunderstood on how to use the required attribute?
I am running my code in Google Chrome 28. This is with <!doctype HTML> .
Как сделать поля в форме обязательными для заполнения за 1 минуту в HTML
Практически все современные сайты и новые имеют формы, которые проверятся на заполнение без перезагрузки страницы. Так называемые – обязательныеполя формы. Но какие способы для создания таких форм при этом используются?
До недавнего времени самым популярным способом было использование jаvascript. Очень удобной библиотекой является jquery validation. Данный способ является современным, но для его интеграции в форму на сайте нужны некоторые навыки работы и время.
С появлением html 5 и его повсеместной интеграцией на современные сайты можно отказаться от использования jаvascript. При этом для того, чтобы сделать поле в форме обязательным для заполнения нужно только добавить атрибут required.
С атрибутом required браузер перед отправкой формы проверит, заполнено ли конкретное поле или нет. Если нет, то пользователю будет указано на обязательное заполнение поля или даже всех полей формы.
А для создания таких полей потребуется не больше минуты.
Итак, допустим есть небольшая форма:
Вот так она выглядит в браузере:
Теперь делаем некоторые поля в форме обязательными для заполнения:
Вот и все. Мы сделали все поля обязательными для заполнения меньше, чем за 1 минуту. Если не заполнять обязательные поля, то мы увидим следующие сообщения:
И, немаловажное. Данная проверка работает во всех современных браузерах и только для спецификации html 5. Для непосвященных — в начале html кода нужно вставить тег <!DOCTYPE html>.
HTML5 и его атрибуты для проверки формы
В этой статье я хочу рассказать, как можно проверить форму без использования php или javascript. На HTML5 есть возможность указывать, какое поле должно быть обязательным для заполнения, проверить правильность ввода в поле e-mail адрес, телефон, имя и т. д.
Если вы создаете сайты и вам нужно сделать форму обратной связи, то эта статья будет находка:
Итак, если вы не знаете языков программирования php или javascript, чтобы осуществить проверку формы, не беда – HTML5 справится с этим отлично.
К примеру, у нас есть стандартная html форма:
Если не заполнить ни одного поля, а нажать кнопку «Отправить!» , форма без проблем отправится на указанную почту в прописанном обработчике.
Как же сделать проверку формы на заполнение полей ?
1. Указать поле обязательным для заполнения с помощью атрибута «required» .
Достаточно прописать атрибут «required» в том поле, которое вы считаете обязательным для заполнения. Для примера, давайте пропишем «required» к полю «email» :
Как видите, поле «email» стало обязательным для заполнения и форма не отправится до тех пор, пока не внесете туда значение.
2. Укажите атрибут «placeholder» , чтобы пользователь видел, что необходимо вводить в поле. Например, так:
Заполните и для остальных полей:
3. Чтобы предотвратить неправильное заполнение поля формы, нужно в атрибуте «type» заменить значение «text» на «email» . Например, было так:
В результате, если пользователь, когда будет писать email адрес, не поставит « @ », ему сразу же выскочит ошибка с подсказкой, что в адресе электронной почты должен присутствовать символ « @ ».
Такой фокус можно проделать с полем для сайта, если такое имеется:
формат ввода должен быть таким:
4. Проверить, правильно ли заполнены поля с помощью атрибута «pattern» .
Чтобы проверить значение элемента на основе регулярного выражения, используют атрибут «pattern» .
Например, если нужно, чтобы имя в поле всегда писалось на русском языке или чтобы номер телефона был написан по определенному шаблону « +38(093) — 000 — 00 — 00 » и т .д., то атрибут «pattern» отлично справится с этой задачей.
Итак, нужно чтобы пользователь ввел имя русскими буквами. Для этого пропишите в атрибуте «pattern» вот такое выражение:
Объяснение: в квадратных скобках [ ] пишите, какие буквы должны вводиться в поле для имени. В моем примере можно вводить только русские буквы в любом регистре. Если нужно только латинскими, сделайте вот так:
| Выражение | Описание |
| [A-Z] | Только заглавная латинская буква. |
| [A-Za-z] | Только латинская буква в любом регистре. |
| [А-Яа-яЁё] | Только русская буква в любом регистре. |
| [A-Za-zА-Яа-яЁё] | Любая буква русского и латинского алфавита. |
Цифра, что находится в фигурных скобках < >означает число вводимых символов. В моем примере не менее 4-х символов :
| Выражение | Описание |
| [A-Za-z] | Не менее шести латинских букв. |
| [A-Za-z] | Шесть латинских букв. |
| [А-Яа-яЁё] | Не менее шести букв русского и латинского алфавита. |
| [A-Za-zА-Яа-яЁё] | Шесть букв русского и латинского алфавита. |
Если нужно проверить правильность заполнения email почты, пропишите в атрибуте «pattern» вот такое выражение:
Объяснение: каждый проверяемый участок берется в круглые скобки ( ) .
Итак, первый проверяемый участок до символа « @ ». В квадратных скобках [] я прописал, какие буквы должны вводиться в поле. В моем примере это латинские буквы, цифры, нижнее подчеркивание, дефис и точка. В фигурных скобках < >я прописал, что символов должно быть не менее одного. То есть, такой номер не пройдет « @ rambler.ru ».
Далее я закрываю проверяемый участок круглой скобкой и прописываю знак « @ ».
Проверяем второй участок после символа « @ ». Открываем круглые скобки и в квадратных скобках прописываем снова, какие буквы должны вводиться в поле. В моем примере это латинские буквы, цифры, нижнее подчеркивание, дефис и точка. В фигурных скобках « < >» я прописал, что символов должно быть не менее одного. Далее я закрываю проверяемый участок круглой скобкой и прописываю знак « . ».
Проверяем третий участок после знака « . ». Открываем круглые скобки и в квадратных скобках прописываем снова, какие буквы должны вводиться в поле. В моем примере это только латинские буквы. В фигурных скобках « < >» я прописал, что символов должно быть от 2 до 8 . Я так решил, потому что доменных зон меньше 2 и больше 8 символов я не видел (ru, info, ua, biz, com).
На этом проверка правильного заполнения поля email адреса закончилась.
Или скажу так: вот шаблон адреса электронной почты, по которому нужно создать проверочный:
Итак, в итоге поле «email» будет выглядеть вот так:
Если нужно проверить на правильность заполнение поля телефона , пропишите в атрибуте «pattern» вот такое выражение:
Для образца телефона:
Для образца телефона:
Я думаю, здесь объяснять ничего не нужно, так как все аналогично верхнему примеру .
Итак, в итоге поле «tel» будет выглядеть вот так:
В итоге вот такой получился код формы:
Это еще не все, можно сделать подсказку пользователю, как правильно нужно заполнить поле, если он что-то ввел не так, как вам нужно.
5. Подсказка в случае, если поле было заполнено не правильно.
Если пользователь в поле ввел имя на латыни, например, «Stepa», а вам нужно на русском «Степа», можно написать всплывающую подсказку для пользователя и показать пример, как нужно заполнить.
Вот так это будет выглядеть в коде:
Вот так это будет выглядеть в коде:
В итоге получилась вот такая форма с проверкой на правильное заполнение на HTML5 без использования php или javascript:
Таблица регулярного выражения
| Выражение | Описание |
| \d [0-9] | Одна цифра от 0 до 9. |
| \D [^0-9] | Любой символ кроме цифры. |
| \s | Пробел. |
| [A-Z] | Только заглавная латинская буква. |
| [A-Za-z] | Только латинская буква в любом регистре. |
| [А-Яа-яЁё] | Только русская буква в любом регистре. |
| [A-Za-zА-Яа-яЁё] | Любая буква русского и латинского алфавита. |
| [0-9] | Три цифры. |
| [A-Za-z] | Не менее шести латинских букв. |
| [0-9] | Не более трёх цифр. |
| [0-9] | От пяти до десяти цифр. |
| ^[a-zA-Z]+$ | Любое слово на латинице. |
| ^[А-Яа-яЁё\s]+$ | Любое слово на русском включая пробелы. |
| ^[ 0-9]+$ | Любое число. |
| [0-9] | Почтовый индекс. |
| \d+(,\d<2>)? | Число в формате 1,34 (разделитель запятая). |
| \d+(\.\d<2>)? | Число в формате 2.10 (разделитель точка). |
| \d<1,3>\.\d<1,3>\.\d<1,3>\.\d | IP-адрес |
Тему я еще не закрыл, ждите продолжения! Чтобы не пропустить новых статей, подписывайтесь на обновления блога.
Атрибут required
Атрибут required указывает на то, что данный элемент HTML формы должен быть обязательно заполнен.
Атрибут следует применять к тегам input или textarea .
При попытке отправки формы в том случае, если поле с этим атрибутом не заполнено — браузер не даст отправить форму и выведет ошибку в виде всплывающей подсказки. К сожалению, текст ошибки и ее вид нельзя изменить с помощью HTML или CSS.
Имейте ввиду, что наличие атрибута required не освобождает вас от проверки правильности заполненности формы со стороны сервера на PHP (так как защиту через required легко обойти).
Пример
Давайте тегу input добавим атрибут required . Не вводя ничего в поле попробуйте нажать на кнопку, чтобы отправить форму. Браузер не даст отправить форму, добавит тень инпуту и выведет сообщение об ошибке: