Это поле необходимо заполнить

Это поле необходимо заполнить

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

Рис. 1. Вид формы

Пример должен корректно работать в браузерах Firefox 6+, Safari 5, Chrome 8+ и Opera 11+.

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

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

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

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

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

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

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

Читайте также:  Как убрать автономную работу принтера

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Перевод статьи Nielsen Norman Group.

Аннотация: Использование звездочки для пометки обязательных полей — это простой способ улучшить удобство использования ваших форм. Отметка только необязательных полей затрудняет заполнение формы.

Общий вопрос на многих наших UX Conference: следует ли помечать обязательные поля в форме? Если большинство полей в форме являются обязательными, должны ли мы пометить их? (Это много пометок,в конце концов.) Краткий ответ — да. И оставшуюся часть статьи я объясню, почему.

Искушение не пометить обязательные поля

Часто дизайнеры считают, что наличие пометок для каждого обязательного поля это уродливо, повторяющееся, занимает слишком много места, а с более длинными формами, может даже показаться деспотичным (форма требует от пользователя так много!). Таким образом, они обычно принимают одну или обе из следующих стратегий:

  • Дизайнеры показывают инструкции в верхней части формы, говоря, что Все поля обязательны для заполнения или Все поля обязательны для заполнения, если не указано иное.
  • Они помечают необязательные поля, так как их обычно меньше.
Читайте также:  Как подключить инстаграм к фейсбуку через компьютер

(Редко, в некоторых ситуациях дизайнеры ничего не делают: они просто предполагают, что пользователи будут волшебным образом знать, какие поля требуется обязательно заполнить; если пользователи этого не делают, им просто придется иметь дело с возникающей ошибкой.)

Приложение для кредитных карт Citicards (слева) содержит инструкции, написанные маленьким шрифтом и курсивом. Все поля обязательны для заполнения, если не указано иное в верхней части формы; Форма American Express (справа) вообще не содержала инструкций. В обеих формах были отмечены только необязательные поля: в случае Ситибанка с несколько неясной аббревиатурой опт.

Что не так с этими “стратегиями”? Есть несколько проблем:

Люди не читают инструкции в верхней части форм

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

Даже если люди прочитали инструкции, они могут забыть их.

Вы можете подумать: если пользователи прочитали инструкцию сверху, то как они смогут так быстро забыть? Но они забывают — особенно если форма длинная или если они отвлекаются при заполнении (ситуация, которая часто встречается на мобильных устройствах). И даже если люди не забывают инструкции, вы увеличиваете их когнитивную нагрузку, заставляя помнить ненужную информацию. Другими словами, вы усложняете им задачу. Заполнение формы — это итак задача не из легких для пользователей, почему вы хотите усложнить это еще?

Люди должны анализировать форму, чтобы определить, является ли поле обязательным

Мы увидели, что независимо от того, указали ли вы инструкции в верхней части формы или нет, результат, скорее всего, будет одинаковым — люди будут их игнорировать или забывать. Итак, что происходит, когда пользователь заполняет форму? Как они узнают, обязательно ли поле для заполнения?

Читайте также:  Как повернуть изображение на телефоне

Что ж, более прилежные пользователи будут оглядываться, пытаясь выяснить — они анализируют форму и находят поле, помеченное как необязательное (иногда прокручивая страницу выше, как в примере с American Express, где первое необязательное поле появляется ниже мобильного сгиба); если пользователи найдут такое поле, они будут считать, что все, что не отмечено, обязательно для заполнения. Но это требует времени и затрат на взаимодействие — и опять же, зачем вам усложнять заполнение формы для ваших пользователей?

Однако большинство пользователей не будут искать примеров и анализировать форму, они просто сделают предположения. Например, они скажут: «Ну, номер телефона — им действительно не нужен мой номер телефона, не так ли? Может быть, я оставлю это поле пустым ». И даже если они заполняют это поле, необходимость сделать паузу, чтобы решить, нужно ли заполнение, замедляет взаимодействие и делает процесс более длительным и утомительным.(Помните, как бы вам ни хотелось думать иначе, никто не хочет заполнять форму — ни на маленьком, ни на большом экране.) Результатом будет ошибка отправки формы, которая означает, что потребуется еще больше времени на решение проблемы.

Решение простое: отметьте все обязательные поля. Будьте максимально честными и прозрачными: каждое поле, которое необходимо заполнить, отметьте как обязательное.

Как пометить обязательные поля?

Здесь есть как минимум два варианта: звездочка (красная или нет) и слово «обязательно».

Ссылка на основную публикацию
Что такое экранное время в ios
Экранное время – одна из лучших функций iOS 12, позволяющая следить за тем, как часто вы берёте в руки свой...
Что делать если отключился звук на компьютере
Мы зарегистрировали подозрительный трафик, исходящий из вашей сети. С помощью этой страницы мы сможем определить, что запросы отправляете именно вы,...
Что делать если полетели драйвера видеокарты
Распространенная ошибка в Windows 7 и реже в Windows 10 и 8 — сообщение «Видеодрайвер перестал отвечать и был успешно...
Что такое эмодзи клавиатура на телефоне
Современное общение сложно представить без мессенджеров, чатов и социальных сетей, но только текстом бывает сложно передать все эмоции. В этом...
Adblock detector