вы не заполнили поле
Сидорчик учит себя жить
Людвиг Быстроновский советует книгу «Поток» Михайя Чиксентмихайи. Хочу её прочитать, нахожу в интернет-магазине, нажимаю «Купить», и на меня вываливается куча полей:
Сайт заставляет делать какие-то непонятные вещи. Я уже хотел читать, как перевести обыденную работу в приятное состояние, когда не ощущаешь времени, когда вместо усталости — постоянный прилив энергии. А вижу 19 полей, 2 чекбокса и 1 выпадающий список.
Правда, книга в этом интернет-магазине дешевле, чем в других, поэтому терплю. Меня спрашивают способ доставки — выбираю самовывоз. Для этого можно заполнить не все поля, а только пять. Но сайт всё равно ругается:
Ему не понравилось, что я оставил поля со звёздочкой пустыми. Оказывается, мало заполнить пять полей, надо поставить прочерки в остальных. Иначе машина не пропустит дальше.
Эти действия бессмысленные для пользователя. Они оттягивают момент покупки — отсеивают неопытных покупателей и уменьшают оборот магазина.
Исправит ситуацию упрощение формы. Например, такое:
Всё равно девушка из колл-центра позвонит, чтобы подтвердить заказ,— вот и спросит всё, что нужно.
См. также, как Илья Бирман в совете упрощает форму
Выдать ошибку, что поле не заполнено
Помощь в написании контрольных, курсовых и дипломных работ здесь.
Проверка заполнено ли поле
Подскажите как проверить введу ли данные с формы, я что то читал про функцию isset() но не могу.
Выдать ошибку, если текстовое поле пустое
Есть форма UserForm3, на ней два текстовых поля txt3 и txt4 и кнопка CommandButton4 (Ввод). Если в.
Выдать ошибку, если поле для заполнения пустое
Есть диалоговое окно. Там есть место для заполнения имени. Как вывести error если поле для.
Помощь в написании контрольных, курсовых и дипломных работ здесь.
Строки, в которых заполнено поле
Помогите написать запрос Напишите запрос с использованием таблицы location в схеме hr, который бы.
Как посмотреть заполнено ли поле ListBox?
Здравствуйте, у меня возникла такая проблема: У меня есть кнопка и в зависимости заполнено ли поле.
Поле склад не заполнено при проведении
Доброго дня появилась проблема месяца закрывал без проблем теперь вылезла ошибка раньше все без.
Валидация форм на HTML и CSS
Вы можете добиться внушительных результатов в вопросе проверки форм исключительно при помощи HTML-атрибутов. Вы можете сделать пользовательский опыт простым и понятным при помощи CSS-селекторов. Но вам потребуется несколько трюков, чтобы все получилось правильно!
(Вы можете) сделать label похожим на placeholder
Я бы сказал, что если форма короткая и с понятным паттерном поведения (вход или регистрация), то вы можете сделать названия полей в виде плейсхолдеров, но используйте для этого реальные элементы label.
Вам не нужно хитро изворачиваться и беспокоиться об установке курсора в поле ввода, все уже сделано семантикой. Если пользователь нажимает на название поля — активируется поле ввода. Если нажимает на само поле — курсор устанавливается в поле ввода. Оба варианта верны.
Фишка в том, чтобы поставить поле ввода первым (семантически допустимо). Таким образом вы сможете скрывать label при фокусе:
Сделайте определенные поля обязательными
Пожалуй, самым простым способом проверки формы является использование атрибута required. Нет более быстрого пути отлова ошибок, кроме как позволить браузеру сделать это самому!
Подсвечивайте верно заполненные поля
Дайте пользователю знать, что поле было заполнено верно. Браузер может предоставить нам эту информацию по CSS-псевдоклассу :valid.
:valid в этом случае показывает, что выполнено условие required. Но селектор так же подойдет для проверки данных по типу поля.
Покажите напоминание о виде вводимых данных
Вы также можете установить определенное требуемое значение. Вроде email или number. Здесь перечислены все возможные варианты.
Это поле является обязательным для заполнения и вводимая информация будет проверяться на соответствие адресу электронной почты. Давайте улучшим UX:
Но еще… не показывайте никаких подсказок, если поле пустое. И не считайте его неверно заполненным. Это может создать ощущение назойливости и будет только раздражать. Для того, чтобы соблюсти эту рекомендацию, мы должны будем узнать, пустое поле или нет.
Проверяем заполнено поле или нет
Мы хотим провернуть фокус с :valid и :invalid, но мы не хотим опережать события и считать поле невалидным до того, как оно было заполнено.
Есть ли CSS-селектор для проверки пустоты поля? Вообще-то нет! Вы можете подумать на :empty, но ошибетесь. Этот псевдокласс предназначен для проверки ситуаций когда элемент
не содержит в себе ничего. Поля ввода и так пусты по умолчанию.
Трюк в том, чтобы проверить поле на видимость атрибута placeholder:
Мы не использовали плейсхолдер в нашем примере, но это правило сработает, если мы зададим значение из одного пробела:
:placeholder-shown супер полезен для нас! Это в целом секретный селектор, позволяющий проверить, есть ли в поле значение или нет.
IE и Firefox пока не поддерживают его, что немного осложняет задачу. Обычно спасителем является новая функция @ supports, но…
Вы не можете использовать @supports для селекторов, только для свойства/значения (например @supports (display: flex)).
Проверить плейсхолдер при помощи JavaScript довольно легко:
Но это не кажется самым простым способом имитации :placeholder-shown. Поэтому…возможно, просто стоит подождать поддержки всеми браузерами.
Представим, что поддержка уже повсеместная и посмотрим, как это будет выглядеть…
Вы можете создать более сильную проверку
Это уже не просто required или type=”email” (и подобные). Вы можете проверить на клиентской стороне такие вещи, как длину (например минимальную длину пароля или максимальное количество символов в textarea>) и даже использовать полноценное регулярное выражение.
Вот статья об этом. Скажем, вы хотите проверку пароля по параметрам:
Вы можете это сделать следующим образом:
Я оставил в этом примере :placeholder-shown, так что в Firefox и IE может работать не очень хорошо. Это просто пример! Не стесняйтесь брать по частям или менять под свои нужды.
P.S. Если вам понравилась эта статья — нажмите зеленое сердечко. Это много значит для меня. Спасибо!
Нашли ошибку? Воспользуйтесь функцией Private notes: выделяете текст с ошибкой, нажимаете на символ замка в появившемся дудле и оставляете свой комментарий. Спасибо!
Обязательно или нет? Как отмечать поля в формах
Привет, я Антон, UX-дизайнер в eLama — платформе для автоматизации интернет-рекламы. Мы довольно часто работаем с формами. Раньше мы выделяли обязательные поля, но увидели мнение, что этот подход не самый правильный. Мы решили разобраться, а как правильно, но быстро поняли, что единых правил нет: кто-то делает акцент на обязательных полях, кто-то, наоборот, говорит, что некоторые поля можно пропустить. Попробуем сравнить самые распространенные подходы.
Все делают по-разному
Самые распространенные способы
1. Отмечать обязательные поля звездочкой
➕ Занимает мало места.
➖ Обычно обязательных полей больше, чем необязательных, поэтому визуального шума тоже больше.
➖ Требуют расшифровки в коде для скринридера.
2. Подписывать необязательные поля
➕ Скорее всего, таких отметок будет немного, а значит, визуального шума будет меньше, чем от звездочек.
➕ Мы не давим на пользователя и не принуждаем его заполнять поля. Наоборот, мы экономим его время, показывая ему, что некоторые поля можно пропустить.
➖ Отметка может потеряться на фоне заголовка, и пользователь может ее не увидеть.
➖ Неочевидно, что поля в верхней части формы нужно заполнить обязательно. Пользователь может понять это, только когда увидит необязательные поля.
3. Вообще не отмечать поля, а показывать ошибки при отправке формы
➕ Отсутствие визуального шума. Особенно это важно в больших формах.
➖ Не всем понравится заполнять форму повторно после того, как она загорится красным.
➖ Не сразу понятно, какие поля можно пропустить, а какие нет.
4. Отмечать обязательные поля звездочкой, а необязательные —подписывать
➕ Согласно этому исследованию, такие формы самые удобные: пользователь сразу видит, какое поле пропустить можно, а какое нет.
➖ В больших формах такие отметки создают визуальный шум.
➖ Требуют расшифровки в коде для скринридера.
Важно: ставить обязательные поля выше необязательных
Если пользователь не заметит отметки, он скорее заполнит верхние поля. Если форма разбита на смысловые группы, в каждой из них обязательные поля должны быть выше, чем необязательные.
Как делаем в eLama
Мы решили использовать четвертый способ, потому что удобство пользователя важнее, и это преимущество перевешивает недостатки подхода.
Так обязательное поле не теряется даже в большой форме
Но в некоторых случаях мы используем и третий способ.
Когда не ставим отметки
1. Если поле одно
Чтобы разблокировать кнопку, можно сделать только одно: заполнить поле
2. Если можно заполнить любое поле
Кнопка разблокируется, если заполнить любое из полей
Вместо заключения
Кроме этих способов наверняка есть и другие. Важно выбрать один-два подхода, которые подходят вашему продукту.
Спасибо Сергею Токареву и Елене Отроковой за помощь в подготовке материала и редактуру.
Обязательные поля в формах — отмечать или нет?
Популярный вопрос, часто задаваемый на наших занятиях UX Conference: следует ли отмечать обязательные поля в форме? Как быть, если большинство полей в форме являются обязательными, следует ли их все отметить? (Это же так много отметок, в конце концов.) Короткий ответ — да. И в этой статье я дам объяснение, почему.
Искушение не отмечать обязательные поля
Часто дизайнеры чувствуют, что наличие отметки для каждого отдельного элемента — уродливое повторение, которое занимает слишком много места и, с более длинными формами, даже может выглядеть угнетающе (форма требует от пользователя очень много!). Таким образом, они обычно принимают одну или обе из следующих стратегий:
1. Они дают инструкцию в верхней части формы, говоря, что все поля обязательны для заполнения или все поля обязательны для заполнения, если не указано иное.
2. Они отмечают необязательные поля, так как их обычно меньше.
(В некоторых редких ситуациях они вообще ничего не делают: они просто полагают, что пользователи сами волшебным образом догадаются, какие поля обязательны. Ну а если они этого не сделают, им просто придется иметь дело с возникающей ошибкой.)
Что не так с этими подходами? Тут есть несколько проблем:
• Люди не читают инструкции в верхней части формы.
Это общеизвестный факт, что пользователи не читают инструкции, и наименее вероятнее всего они станут читать инструкции в верхней части формы. В конце концов, поля формы выглядят самодостаточно, каждое поле имеет собственную специфическую «инструкцию» — своё название, зачем вам нужно читать что-то еще, чтобы заполнять поля формы?
Вы можете подумать: если пользователи прочитают инструкцию перед заполнением формы, они не смогут ее забыть — это же так просто? Однако, они забывают — особенно если форма длинная или если они прерываются при заполнении (ситуация, которая часто встречается на мобильных устройствах). И даже если люди не забывают инструкции, вы увеличиваете их когнитивную нагрузку, заставляя хранить прочитанное в своей рабочей памяти. Другими словами, вы усложняете им задачу. Заполнение формы само по себе вызов для ваших пользователей — зачем вы хотите усложнить этот процесс?
Мы выяснили, что независимо от того, предоставили вы инструкции пользователю в шапке формы или нет, результат, скорее всего, будет одинаковым: их будут игнорировать или забывать. Итак, что происходит, когда пользователь заполняет форму? Как они понимают, что поле обязательно для заполнения? Наиболее прилежные пользователи будут присматриваться внимательно, пытаясь выяснить это — они просмотрят всю форму и найдут поле, отмеченное как необязательное (иногда для этого необходимо проскроллить страницу, как в примере с AmericanExpressвыше, где первое необязательное поле появляется ниже, за пределами экрана; если они найдут одно такое поле, они будут считать, что все не отмеченные поля — обязательные. Но это взаимодействие потребует времени и усилий — и опять же, зачем вам усложнять для пользователей заполнение формы?
Однако большинство пользователей не будут осматриваться по сторонам — они просто будут строить предположения. Они скажут: «Ну, номер телефона — им же реально не нужен мой номер телефона, не так ли? Оставлю это поле пустым». И даже если они не оставляют это поле пустым, необходимость сделать паузу, чтобы принять решение, нужно ли заполнять поле, замедляет взаимодействие и делает процесс более долгим и утомительным. (Помните, как бы вам ни хотелось думать иначе, никто не хочет заполнять форму — ни на маленьком, ни на большом экране.) Результатом будет ошибка отправки формы, которая будет означать еще больше потраченного времени на решение этой задачи.
Решение простое: отметьте все обязательные поля. Будьте настолько очевидными и прозрачными, насколько это возможно: для каждого обязательного поля, которое необходимо заполнить, поставьте отметку.
Как пометить обязательные поля?
Здесь есть как минимум два варианта: звездочка (красная или нет) и слово «обязательно».
Должна ли звездочка предшествовать или следовать за названием поля? Вряд ли это будет иметь практическое значение, но одна из причин, по которой его нужно поместить непосредственно перед описанием поля, состоит в том, чтобы помочь глазам легко распознать, какие поля требуются, просмотрев только самый первый символ названия полей.
Должна ли звездочка быть красной? Необязательно, но красный цвет стал ожидаемым требуемым цветом маркера в web, что само по себе является причиной для того, чтобы придерживаться этого выбора (согласно Jakob’s Law). В любом случае, есть некоторая ценность использования разных цветов для звездочки и для текстового названия поля: это позволяет пользователям быстро отделить их и сфокусироваться на названии поля, пытаясь осмыслить, что означает это поле. В то время как красный предпочтителен, мы настоятельно рекомендуем избегать бледно-серых или низко контрастных цветов для звездочки. В некоторых случаях приглушенные цвета могут иметь эстетические преимущества, но в реальности низко контрастные символы создадут проблемы доступности для слабовидящих или пожилых пользователей и замедляют визуальную обработку формы для всех.
Можно ли отмечать необязательные поля?
Хотя это и не обязательно, отметка опциональных полей снижает когнитивную нагрузку пользователя: при отсутствии этого обозначения пользователь должен осмотреть поля и сделать вывод, какие именно из них являются необязательными, если часть из них помечена как обязательные. Если слово «необязательно/опционально» находится рядом с названием поля, эта задача становится немного легче.
Не указать, что поле является необязательным, не является ошибкой, но, если его также отметить — это будет очевидным плюсом.
Как насчет форм авторизации?
Формы авторизации короткие и обычно состоят из двух полей: имени пользователя и пароля, оба из которых всегда обязательны для заполнения. Если вы используете звездочку, возможно необходимость пометки этих полей будет минимальной, однако это не будет ошибкой. Тем не менее, большинство пользователей сталкиваются со множеством форм авторизации, и они знают, что для входа в систему обязательно нужно ввести адрес электронной почты или имя пользователя и пароль. Так что, если вы категорически против звездочки, то можно совсем отказаться от неё в этих формах.
Однако опасно не отмечать обязательные поля в форме регистрации. Формы регистрации сильно различаются на разных сайтах — разные компании требуют разные типы информации при создании учетной записи. Если ваша регистрационная форма похожа на форму входа в систему, то можно безопасно пропустить необходимую информацию. Но если оно включает в себя больше полей, чем имя пользователя и пароль, отметьте все обязательные поля (включая поля имени пользователя и пароля).
Заключение
Формы — отнюдь не забава. Они требуют от пользователей достаточно работы. В реальности, многие формы оказываются брошенными, потому что заполнять их слишком сложно или утомительно. Чтобы повысить шансы того, что ваша форма будет до конца заполнена, минимизируйте усилия, которые придется приложить пользователям, и информацию, которую они должны запомнить. Есть много аспектов, которые способствуют этому, но отметить обязательные поля (и, опционально поля необязательные) — легкое и простое решение.