это поле обязательно для заполнения

Обязательные поля формы

Дата публикации: 2016-10-03

100

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

Исходные файлы текущей статьи вы можете скачать по ссылке.

Итак, перед нами есть простейшая форма с полями, каждое из которых мы хотим сделать обязательным к заполнению. Каждое поле формы имеет тип text и примерно следующий код:

vmaster

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

1

Перед отправкой формы мы должны проверить каждое поле на предмет того, заполнено ли оно и, если какое-то из полей оказалось не заполнено, тогда мы должны уведомить об этом пользователя и не отправлять форму на сервер. В общем, нам необходима валидация формы в части проверки заполнения обязательных полей.

Ранее для валидации формы на клиенте нельзя было обойтись без возможностей JavaScript. Есть множество плагинов, позволяющих гибко провести валидацию формы и, в частности, проверить, заполнены ли обязательные поля. Однако в HTML5 можно вовсе обойтись без JavaScript и провести валидацию только средствами HTML5. Давайте посмотрим, как это сделать.

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

А теперь попробуем отправить форму, не заполняя ее.

2

Как видим браузер не дает отправить форму, подсказывая, что поле не заполнено. Чтобы помочь и подсказать пользователю, какие поля являются обязательными, принято рядом ставить красную звездочку, примерно так:

3

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

Также стоит упомянуть о том, что кроме атрибута required, HTML5 предлагает нам и другие средства, позволяющие произвести простейшую валидацию и проверку формы на клиенте. Например, мы может проверить введен ли именно email в поле email, а не просто некая строка. Как это сделать — мы узнаем уже в следующей статье. Также не забывайте о том, что гибкая валидация формы возможно с помощью JavaScript. По этой теме вы можете посмотреть данный урок. На этом все. Удачи!

vmaster

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Источник

Обязательно или нет? Как отмечать поля в формах

Привет, я Антон, UX-дизайнер в eLama — платформе для автоматизации интернет-рекламы. Мы довольно часто работаем с формами. Раньше мы выделяли обязательные поля, но увидели мнение, что этот подход не самый правильный. Мы решили разобраться, а как правильно, но быстро поняли, что единых правил нет: кто-то делает акцент на обязательных полях, кто-то, наоборот, говорит, что некоторые поля можно пропустить. Попробуем сравнить самые распространенные подходы.

image loaderВсе делают по-разному

Самые распространенные способы

1. Отмечать обязательные поля звездочкой

image loader

➕ Занимает мало места.

➖ Обычно обязательных полей больше, чем необязательных, поэтому визуального шума тоже больше.

➖ Требуют расшифровки в коде для скринридера.

2. Подписывать необязательные поля

image loader

➕ Скорее всего, таких отметок будет немного, а значит, визуального шума будет меньше, чем от звездочек.

➕ Мы не давим на пользователя и не принуждаем его заполнять поля. Наоборот, мы экономим его время, показывая ему, что некоторые поля можно пропустить.

➖ Отметка может потеряться на фоне заголовка, и пользователь может ее не увидеть.

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

3. Вообще не отмечать поля, а показывать ошибки при отправке формы

image loader

➕ Отсутствие визуального шума. Особенно это важно в больших формах.

➖ Не всем понравится заполнять форму повторно после того, как она загорится красным.

➖ Не сразу понятно, какие поля можно пропустить, а какие нет.

4. Отмечать обязательные поля звездочкой, а необязательные —подписывать

image loader

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

➖ В больших формах такие отметки создают визуальный шум.

➖ Требуют расшифровки в коде для скринридера.

Важно: ставить обязательные поля выше необязательных

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

Как делаем в eLama

Мы решили использовать четвертый способ, потому что удобство пользователя важнее, и это преимущество перевешивает недостатки подхода.

image loaderТак обязательное поле не теряется даже в большой форме

Но в некоторых случаях мы используем и третий способ.

Когда не ставим отметки

1. Если поле одно

image loaderЧтобы разблокировать кнопку, можно сделать только одно: заполнить поле

2. Если можно заполнить любое поле

image loaderКнопка разблокируется, если заполнить любое из полей

Вместо заключения

Кроме этих способов наверняка есть и другие. Важно выбрать один-два подхода, которые подходят вашему продукту.

Спасибо Сергею Токареву и Елене Отроковой за помощь в подготовке материала и редактуру.

Источник

Adblock
detector