пожалуйста заполните это поле
Почему Chrome показывает подсказку «пожалуйста, заполните это поле» на пустых полях?
Я связался с моим клиентом, сказав, что жалоба пользователей говорит, что некоторые поля теперь показывают всплывающую подсказку с сообщением «пожалуйста, заполните это поле». Я не мог поверить своим ушам. но клиент прав-используя последнюю версию Chrome, некоторые поля показывают подсказку браузера с этим сообщением даже рядом с моими валидаторами!
в чем проблема? Что я упускаю?
HTML, созданный моим пользовательским элементом управления следующим образом:
мой doctype выглядит следующим образом:
должен ли мой браузер использовать HTML 5 для его анализа?
9 ответов
вы используете HTML5 требуются?
Это приведет к тому, что Chrome 10 отобразит воздушный шар, предлагающий пользователю заполнить поле.
вы можете отключить проверку в форме.
поставить novalidate=»novalidate» on
чтобы остановить всплывающее окно/воздушный шар Html5 в браузере Web-kit, используйте следующий CSS
на правильный решение состоит в том, чтобы полностью удалить ваши изобретенные атрибуты и заменить их что-нибудь разумное, например. классы ( class=»Montantetextfield fieldname-Montante required allow-decimal-values» ), или хранить их в JavaScript:
вам нужно добавить атрибут «formnovalidate» в элемент управления, который запускает проверку браузера, например:
если у вас есть html-форма, содержащая одно или несколько полей с» обязательными » атрибутами, Chrome (в последних версиях) проверит эти поля перед отправкой формы, и, если они не заполнены, пользователям будут показаны некоторые подсказки, которые помогут им получить отправленную форму (т. е. «пожалуйста, заполните это поле»).
чтобы избежать этой встроенной проверки браузера в формах, вы можете использовать «novalidate»
в Chrome (V.56-это то, что я использую, но я AFAIK это применяется в целом) вы можете установить title=» » (одно пространство), и автоматический текст заголовка будет переопределен и ничего не отображается. (Если вы попытаетесь сделать его просто пустой строкой, он будет относиться к нему так, как будто он не установлен, и добавит текст автоматической подсказки, который вы получаете).
Я не тестировал это в других браузерах, потому что я нашел его, делая расширение Google Chrome. Я уверен, что как только я переношу вещи в другие браузеры, однако, я посмотрю, работает ли он в них (если это даже необходимо).
Почему Chrome отображает всплывающую подсказку «Пожалуйста, заполните это поле» на пустых полях?
В чем проблема? Что мне не хватает?
HTML, сгенерированный моим пользовательским элементом управления, выглядит следующим образом:
Мой doctype выглядит следующим образом:
Должен ли мой браузер использовать HTML 5 для его анализа?
9 ответов
Вы можете отключить проверку в форме.
Вы используете обязательный атрибут HTML5?
Это приведет к тому, что Chrome 10 отобразит всплывающее окно, предлагающее пользователю заполнить поле.
Положил novalidate=»novalidate» на
В XHTML минимизация атрибутов запрещена, а атрибут novalidate должен быть определен как
Вам необходимо добавить атрибут «formnovalidate» в элемент управления, который запускает проверку браузера, например:
В Chrome (v.56 я использую, но, как мне кажется, это применимо в целом), вы можете установить title=» » (один пробел), и автоматический текст заголовка будет переопределен и ничего не будет отображаться. (Однако, если вы попытаетесь сделать ее просто пустой строкой, она будет обрабатываться так, как будто она не установлена, и добавит тот автоматически полученный текст всплывающей подсказки).
Я не проверял это в других браузерах, потому что нашел его во время создания расширения Google Chrome. Я уверен, что как только я перенесу вещи в другие браузеры, я посмотрю, будет ли это работать в них (если даже необходимо).
Вебинар
«Учебно-воспитательный процесс в современной школе: возможности
развития в цифровом обществе»
Регулярные вебинары стали традицией, которая ежегодно собирает на нашей платформе педагогов и методистов, желающих сделать учебный процесс максимально интересным, запоминающимся и увлекательным. Но в этом году у нас есть еще один, уникальный повод, пригласить вас к общению. Нашей платформе исполняется 10 лет и мы решили приурочить первый регулярный вебинар ГлобалЛаб именно к этой дате.
Мы приглашаем вас 15 сентября в 16.00 (МСК) присоединиться к вебинару «Учебно-воспитательный процесс в современной школе: возможности развития в цифровом обществе».
В начале нового учебного года мы обсудим перспективы развития учебно-воспитательного процесса в условиях цифрового общества, внедрение цифровых инноваций в традиционный образовательный процесс.
Также мы поговорим о том, как встраивать в учебный процесс цифровые технологии. Особое внимание будет уделено разработке социальных проектов как одному из направлений реализации Примерной программы воспитания.
Цифровые сервисы и решения – инструмент, позволяющий педагогу решать различные педагогические задачи. На вебинаре будут показаны возможности уникальной цифровой образовательной платформы Глобаллаб, позволяющей решать эти вопросы и задачи просто, легко, интересно.
Длительность вебинара 1 час. Для участия и получения сертификата необходима регистрация ниже.
Обязательно или нет? Как отмечать поля в формах
Привет, я Антон, UX-дизайнер в eLama — платформе для автоматизации интернет-рекламы. Мы довольно часто работаем с формами. Раньше мы выделяли обязательные поля, но увидели мнение, что этот подход не самый правильный. Мы решили разобраться, а как правильно, но быстро поняли, что единых правил нет: кто-то делает акцент на обязательных полях, кто-то, наоборот, говорит, что некоторые поля можно пропустить. Попробуем сравнить самые распространенные подходы.
Все делают по-разному
Самые распространенные способы
1. Отмечать обязательные поля звездочкой
➕ Занимает мало места.
➖ Обычно обязательных полей больше, чем необязательных, поэтому визуального шума тоже больше.
➖ Требуют расшифровки в коде для скринридера.
2. Подписывать необязательные поля
➕ Скорее всего, таких отметок будет немного, а значит, визуального шума будет меньше, чем от звездочек.
➕ Мы не давим на пользователя и не принуждаем его заполнять поля. Наоборот, мы экономим его время, показывая ему, что некоторые поля можно пропустить.
➖ Отметка может потеряться на фоне заголовка, и пользователь может ее не увидеть.
➖ Неочевидно, что поля в верхней части формы нужно заполнить обязательно. Пользователь может понять это, только когда увидит необязательные поля.
3. Вообще не отмечать поля, а показывать ошибки при отправке формы
➕ Отсутствие визуального шума. Особенно это важно в больших формах.
➖ Не всем понравится заполнять форму повторно после того, как она загорится красным.
➖ Не сразу понятно, какие поля можно пропустить, а какие нет.
4. Отмечать обязательные поля звездочкой, а необязательные —подписывать
➕ Согласно этому исследованию, такие формы самые удобные: пользователь сразу видит, какое поле пропустить можно, а какое нет.
➖ В больших формах такие отметки создают визуальный шум.
➖ Требуют расшифровки в коде для скринридера.
Важно: ставить обязательные поля выше необязательных
Если пользователь не заметит отметки, он скорее заполнит верхние поля. Если форма разбита на смысловые группы, в каждой из них обязательные поля должны быть выше, чем необязательные.
Как делаем в eLama
Мы решили использовать четвертый способ, потому что удобство пользователя важнее, и это преимущество перевешивает недостатки подхода.
Так обязательное поле не теряется даже в большой форме
Но в некоторых случаях мы используем и третий способ.
Когда не ставим отметки
1. Если поле одно
Чтобы разблокировать кнопку, можно сделать только одно: заполнить поле
2. Если можно заполнить любое поле
Кнопка разблокируется, если заполнить любое из полей
Вместо заключения
Кроме этих способов наверняка есть и другие. Важно выбрать один-два подхода, которые подходят вашему продукту.
Спасибо Сергею Токареву и Елене Отроковой за помощь в подготовке материала и редактуру.
Обязательные поля в формах — отмечать или нет?
Популярный вопрос, часто задаваемый на наших занятиях UX Conference: следует ли отмечать обязательные поля в форме? Как быть, если большинство полей в форме являются обязательными, следует ли их все отметить? (Это же так много отметок, в конце концов.) Короткий ответ — да. И в этой статье я дам объяснение, почему.
Искушение не отмечать обязательные поля
Часто дизайнеры чувствуют, что наличие отметки для каждого отдельного элемента — уродливое повторение, которое занимает слишком много места и, с более длинными формами, даже может выглядеть угнетающе (форма требует от пользователя очень много!). Таким образом, они обычно принимают одну или обе из следующих стратегий:
1. Они дают инструкцию в верхней части формы, говоря, что все поля обязательны для заполнения или все поля обязательны для заполнения, если не указано иное.
2. Они отмечают необязательные поля, так как их обычно меньше.
(В некоторых редких ситуациях они вообще ничего не делают: они просто полагают, что пользователи сами волшебным образом догадаются, какие поля обязательны. Ну а если они этого не сделают, им просто придется иметь дело с возникающей ошибкой.)
Что не так с этими подходами? Тут есть несколько проблем:
• Люди не читают инструкции в верхней части формы.
Это общеизвестный факт, что пользователи не читают инструкции, и наименее вероятнее всего они станут читать инструкции в верхней части формы. В конце концов, поля формы выглядят самодостаточно, каждое поле имеет собственную специфическую «инструкцию» — своё название, зачем вам нужно читать что-то еще, чтобы заполнять поля формы?
Вы можете подумать: если пользователи прочитают инструкцию перед заполнением формы, они не смогут ее забыть — это же так просто? Однако, они забывают — особенно если форма длинная или если они прерываются при заполнении (ситуация, которая часто встречается на мобильных устройствах). И даже если люди не забывают инструкции, вы увеличиваете их когнитивную нагрузку, заставляя хранить прочитанное в своей рабочей памяти. Другими словами, вы усложняете им задачу. Заполнение формы само по себе вызов для ваших пользователей — зачем вы хотите усложнить этот процесс?
Мы выяснили, что независимо от того, предоставили вы инструкции пользователю в шапке формы или нет, результат, скорее всего, будет одинаковым: их будут игнорировать или забывать. Итак, что происходит, когда пользователь заполняет форму? Как они понимают, что поле обязательно для заполнения? Наиболее прилежные пользователи будут присматриваться внимательно, пытаясь выяснить это — они просмотрят всю форму и найдут поле, отмеченное как необязательное (иногда для этого необходимо проскроллить страницу, как в примере с AmericanExpressвыше, где первое необязательное поле появляется ниже, за пределами экрана; если они найдут одно такое поле, они будут считать, что все не отмеченные поля — обязательные. Но это взаимодействие потребует времени и усилий — и опять же, зачем вам усложнять для пользователей заполнение формы?
Однако большинство пользователей не будут осматриваться по сторонам — они просто будут строить предположения. Они скажут: «Ну, номер телефона — им же реально не нужен мой номер телефона, не так ли? Оставлю это поле пустым». И даже если они не оставляют это поле пустым, необходимость сделать паузу, чтобы принять решение, нужно ли заполнять поле, замедляет взаимодействие и делает процесс более долгим и утомительным. (Помните, как бы вам ни хотелось думать иначе, никто не хочет заполнять форму — ни на маленьком, ни на большом экране.) Результатом будет ошибка отправки формы, которая будет означать еще больше потраченного времени на решение этой задачи.
Решение простое: отметьте все обязательные поля. Будьте настолько очевидными и прозрачными, насколько это возможно: для каждого обязательного поля, которое необходимо заполнить, поставьте отметку.
Как пометить обязательные поля?
Здесь есть как минимум два варианта: звездочка (красная или нет) и слово «обязательно».
Должна ли звездочка предшествовать или следовать за названием поля? Вряд ли это будет иметь практическое значение, но одна из причин, по которой его нужно поместить непосредственно перед описанием поля, состоит в том, чтобы помочь глазам легко распознать, какие поля требуются, просмотрев только самый первый символ названия полей.
Должна ли звездочка быть красной? Необязательно, но красный цвет стал ожидаемым требуемым цветом маркера в web, что само по себе является причиной для того, чтобы придерживаться этого выбора (согласно Jakob’s Law). В любом случае, есть некоторая ценность использования разных цветов для звездочки и для текстового названия поля: это позволяет пользователям быстро отделить их и сфокусироваться на названии поля, пытаясь осмыслить, что означает это поле. В то время как красный предпочтителен, мы настоятельно рекомендуем избегать бледно-серых или низко контрастных цветов для звездочки. В некоторых случаях приглушенные цвета могут иметь эстетические преимущества, но в реальности низко контрастные символы создадут проблемы доступности для слабовидящих или пожилых пользователей и замедляют визуальную обработку формы для всех.
Можно ли отмечать необязательные поля?
Хотя это и не обязательно, отметка опциональных полей снижает когнитивную нагрузку пользователя: при отсутствии этого обозначения пользователь должен осмотреть поля и сделать вывод, какие именно из них являются необязательными, если часть из них помечена как обязательные. Если слово «необязательно/опционально» находится рядом с названием поля, эта задача становится немного легче.
Не указать, что поле является необязательным, не является ошибкой, но, если его также отметить — это будет очевидным плюсом.
Как насчет форм авторизации?
Формы авторизации короткие и обычно состоят из двух полей: имени пользователя и пароля, оба из которых всегда обязательны для заполнения. Если вы используете звездочку, возможно необходимость пометки этих полей будет минимальной, однако это не будет ошибкой. Тем не менее, большинство пользователей сталкиваются со множеством форм авторизации, и они знают, что для входа в систему обязательно нужно ввести адрес электронной почты или имя пользователя и пароль. Так что, если вы категорически против звездочки, то можно совсем отказаться от неё в этих формах.
Однако опасно не отмечать обязательные поля в форме регистрации. Формы регистрации сильно различаются на разных сайтах — разные компании требуют разные типы информации при создании учетной записи. Если ваша регистрационная форма похожа на форму входа в систему, то можно безопасно пропустить необходимую информацию. Но если оно включает в себя больше полей, чем имя пользователя и пароль, отметьте все обязательные поля (включая поля имени пользователя и пароля).
Заключение
Формы — отнюдь не забава. Они требуют от пользователей достаточно работы. В реальности, многие формы оказываются брошенными, потому что заполнять их слишком сложно или утомительно. Чтобы повысить шансы того, что ваша форма будет до конца заполнена, минимизируйте усилия, которые придется приложить пользователям, и информацию, которую они должны запомнить. Есть много аспектов, которые способствуют этому, но отметить обязательные поля (и, опционально поля необязательные) — легкое и простое решение.