Форма регистрации Geico предоставляет однозначные инструкции о том, в каком формате ожидаются вводимые данные

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

Маркировка поля формы регистрации по мере необходимости

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

Как только мы закончим, давайте перейдем на передний план и увидим любую разницу в нашей форме. Как мы видим, перед символами перед двумя ярлыками полей появляются звездочки. Это универсально означает требуемое поле. Далее следует убедиться, что они делают именно то, что они намереваются сделать, пытаясь отправить форму, сохраняя первые два поля пустым.

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

Добавление текста справки в поля формы регистрации

Мы вернемся к настройкам поля формы регистрации. Оба параметра находятся под полем «Ярлык». Теперь передняя часть формы выглядит так. Если мы переместим курсор в первый поле ввода, то появляется подсказка под ним автоматически.

Удалить звездочки из обязательных полей регистрационной формы

Форма регистрации Backpack имеет одноколоночную форму

Скоро мы скоро вернемся к другому. Формы часто отмечают точку, в которой пользователи выходят из наших торговых рядов, отказываются от своих тележек или просто теряют терпение. Как мы можем отмечать поля как обязательные, может показаться тривиальной деталью, но исследования показывают, что эти простые индикаторы имеют сильное влияние на то, как пользователи воспринимают и заполняют формы. Хотя этот подход знаком, лаконичен и прост в реализации, он не без его недостатков.

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

Недавнее исследование показало, что чрезмерное раскрытие является обычным явлением, и это не случайно. На всех уровнях чувствительности веб-пользователи предоставляют элементы данных, для которых они знают, что раскрытие информации является необязательным и не вознаграждается. Кроме того, исследование выявило «высокую распространенность удовольствия»среди участников при заполнении форм и указало, что чрезмерное раскрытие не рассматривалось отрицательно от пользователей, которые это сделали.

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

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

Аналоговые наборщики исторически использовали звездочки для обозначения пропусков или сносок, но это соглашение не имеет четкой привязки к его использованию в Интернете. Чтобы текст этой легенды был наиболее полезен, он должен появляться в потоке документа над полями формы а не в конце формы. К сожалению, это нарушает традиционный шаблон макета, созданный аналоговой моделью сноски. При замене звездочки словом «требуется» будут рассмотрены проблемы с размещением легенды и уменьшением двусмысленности, практичным или эстетически идеальным для этого.

Кроме того, это все еще не позволяет устранить вышеупомянутое падение в раскрытии, вызванное чрезмерной агрессивной маркировкой. Хотя наиболее распространенная реализация помещает звездочку слева от метки поля, это наносит вред потоку чтения. Звездочка конкурирует с буквенными формами в самом тексте ярлыка, добавляя визуальный беспорядок и влияя на макет. Хуже того, высокая степень контраста, предлагаемая красной звездочкой, может работать как набор визуальных ярлыков, которые побуждают пользователей отскакивать от точки к точке через контент, а не проходить через него в естественном порядке чтения.

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

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

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

Рисунок 1, Рисунок 2 и Рисунок 3 показывают поведение требуемого атрибута при попытке отправить форму. Вы также можете создавать допустимые и недопустимые поля с допустимыми и: недопустимыми псевдоклассами соответственно. Мы добавляем фоновое изображение к полям требуемой формы. Мы не можем включать сгенерированный контент на входе, поскольку они заменены или пустые элементы, поэтому вместо этого мы используем фоновое изображение. Мы также добавили отдельные фоновые изображения в допустимые и недопустимые поля.

Целевые стили для старых браузеров

Это изменение проявляется только тогда, когда элемент формы имеет фокус, чтобы форма выглядела слишком захламленной. Если ваш подсказка превышает размер поля, опишите требования в атрибуте заголовка ввода, в метке или в тексте рядом с элементом ввода. Некоторые разработчики предлагают добавить «например» в качестве части текста-заполнителя, чтобы было очевидно, что это текст заполнителя, а не фактически заполненные данные.

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

Четко выделяйте обязательные для заполнения поля

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

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