Поле password обязательно для заполнения
Пометка обязательных полей в формах
Перевод статьи Nielsen Norman Group.
Аннотация: Использование звездочки для пометки обязательных полей — это простой способ улучшить удобство использования ваших форм. Отметка только необязательных полей затрудняет заполнение формы.
Общий вопрос на многих наших UX Conference: следует ли помечать обязательные поля в форме? Если большинство полей в форме являются обязательными, должны ли мы пометить их? (Это много пометок,в конце концов.) Краткий ответ — да. И оставшуюся часть статьи я объясню, почему.
Искушение не пометить обязательные поля
Часто дизайнеры считают, что наличие пометок для каждого обязательного поля это уродливо, повторяющееся, занимает слишком много места, а с более длинными формами, может даже показаться деспотичным (форма требует от пользователя так много!). Таким образом, они обычно принимают одну или обе из следующих стратегий:
- Дизайнеры показывают инструкции в верхней части формы, говоря, что Все поля обязательны для заполнения или Все поля обязательны для заполнения, если не указано иное.
- Они помечают необязательные поля, так как их обычно меньше.
(Редко, в некоторых ситуациях дизайнеры ничего не делают: они просто предполагают, что пользователи будут волшебным образом знать, какие поля требуется обязательно заполнить; если пользователи этого не делают, им просто придется иметь дело с возникающей ошибкой.)
Приложение для кредитных карт Citicards (слева) содержит инструкции, написанные маленьким шрифтом и курсивом. Все поля обязательны для заполнения, если не указано иное в верхней части формы; Форма American Express (справа) вообще не содержала инструкций. В обеих формах были отмечены только необязательные поля: в случае Ситибанка с несколько неясной аббревиатурой опт.
Что не так с этими “стратегиями”? Есть несколько проблем:
Люди не читают инструкции в верхней части форм
Известно, что пользователи не читают инструкции, и еще реже они читают инструкции в верхней части формы. Поля формы кажутся самодостаточными — в конце концов, каждое поле имеет определенную инструкцию — свою метку, зачем нужно читать что-то еще, чтобы заполнить ее?
Даже если люди прочитали инструкции, они могут забыть их.
Вы можете подумать: если пользователи прочитали инструкцию сверху, то как они смогут так быстро забыть? Но они забывают — особенно если форма длинная или если они отвлекаются при заполнении (ситуация, которая часто встречается на мобильных устройствах). И даже если люди не забывают инструкции, вы увеличиваете их когнитивную нагрузку, заставляя помнить ненужную информацию. Другими словами, вы усложняете им задачу. Заполнение формы — это итак задача не из легких для пользователей, почему вы хотите усложнить это еще?
Люди должны анализировать форму, чтобы определить, является ли поле обязательным
Мы увидели, что независимо от того, указали ли вы инструкции в верхней части формы или нет, результат, скорее всего, будет одинаковым — люди будут их игнорировать или забывать. Итак, что происходит, когда пользователь заполняет форму? Как они узнают, обязательно ли поле для заполнения?
Что ж, более прилежные пользователи будут оглядываться, пытаясь выяснить — они анализируют форму и находят поле, помеченное как необязательное (иногда прокручивая страницу выше, как в примере с American Express, где первое необязательное поле появляется ниже мобильного сгиба); если пользователи найдут такое поле, они будут считать, что все, что не отмечено, обязательно для заполнения. Но это требует времени и затрат на взаимодействие — и опять же, зачем вам усложнять заполнение формы для ваших пользователей?
Однако большинство пользователей не будут искать примеров и анализировать форму, они просто сделают предположения. Например, они скажут: «Ну, номер телефона — им действительно не нужен мой номер телефона, не так ли? Может быть, я оставлю это поле пустым ». И даже если они заполняют это поле, необходимость сделать паузу, чтобы решить, нужно ли заполнение, замедляет взаимодействие и делает процесс более длительным и утомительным.(Помните, как бы вам ни хотелось думать иначе, никто не хочет заполнять форму — ни на маленьком, ни на большом экране.) Результатом будет ошибка отправки формы, которая означает, что потребуется еще больше времени на решение проблемы.
Решение простое: отметьте все обязательные поля. Будьте максимально честными и прозрачными: каждое поле, которое необходимо заполнить, отметьте как обязательное.
Как пометить обязательные поля?
Здесь есть как минимум два варианта: звездочка (красная или нет) и слово «обязательно».
Поле password обязательно для заполнения
Serpstat использует файлы cookie для обеспечения работоспособности сервиса, улучшения навигации, предоставления возможности связаться с командой поддержки, а также маркетинговых активностей Serpstat.
Нажав кнопку «Принять и продолжить», вы соглашаетесь с Политикой конфиденциальности
| How-to | – Читать 6 минут – | 15 апреля 2019 |
Элемент формы для ввода пароля предназначен для регистрации пользователей на сайте. Как правило, текст, который вводит пользователь в данное поле, заменяется в целях безопасности на специальные символы — звездочки или точки.
На мобильных устройствах введенный символ обычно на секунду показывается, чтобы пользователь мог убедиться в правильности ввода на небольшой виртуальной клавиатуре.
В данное поле можно добавить идентификатор либо название:
Данные, введенные пользователем, опасно передавать по незащищенному протоколу HTTP, поскольку при этом возникает угроза различных хакерских атак.
Существуют такие варианты незащищенного использования данных пользователей:
Из-за небезопасности протокола HTTP необходимо на любых сайтах, где используются пользовательские данные, применять HTTPS. Данный протокол предназначен для защиты персональных данных пользователей от перехвата и изменения.
В браузерах для информирования пользователей о потенциальной угрозе на сайтах, использующих HTTP-протокол, отображаются предупреждения о незащищенности соединения. В Google Chrome — более категоричная формулировка:
Согласно исследованию, около половины пользователей негативно реагируют на подобные сообщения браузера. При этом 46% этих пользователей не вводят на таких сайтах личную информацию, а 64% — сразу же покидают незащищенные ресурсы.
Яндекс.Браузер пока что сообщает о HTTP-протоколе сайта в более мягкой форме:
Предупреждения о небезопасности ресурса также могут негативно влиять на репутацию бренда. Учитывая совокупные данные о том, что HTTPS-протокол — фактор ранжирования, и влияние предупреждений браузеров на поведение посетителей, — специалисты однозначно рекомендуют перейти на безопасный протокол.
Чтобы на сайте не было сообщения, отпугивающего потенциальных клиентов, необходимо использовать SSL-сертификат, в таком случае сообщение браузера будет информировать о безопасности сайта:
Бывают ситуации, когда новостные и развлекательные сайты, на которых посетители не вводят конфиденциальную и финансовую информацию, не относятся достаточно ответственно к хранению данных о логинах и паролях. В этом случае существует высокая угроза безопасности пользователей, которые используют одинаковые наборы логинов и паролей на различных сайтах.
Злоумышленники могут атаковать такой новостной портал, получить пароли и логины, а затем использовать их на других сайтах, содержащих важную финансовую информацию, например, сервисах онлайн-банкинга. Соответственно, обеспечение безопасности личных данных зависит не только от грамотных действий разработчиков сайта, но и от самих пользователей.
Существуют определенные правила использования паролей, которые сведут к минимуму угрозу похищения личных данных. Некоторые рекомендации по защите данных относятся к владельцам сайтов, другие — к пользователям.
Рекомендации для администраторов:
Поле password обязательно для заполнения
используется для создания интерактивных элементов управления в веб-формах.»> элементы типа «password» предоставляют пользователю возможность безопасного ввода пароль. Элемент представлен как однострочный текстовый редактор, в котором текст затенен, чтобы его нельзя было прочитать, как правило, путем замены каждого символа другим символом, таким как звездочка («*») или точка («•»). Этот символ будет меняться в зависимости от user agent и OS.
Особенности работы процесса ввода могут отличаться от браузера к браузеру; мобильные устройства, например, часто отображают вводимый символ на мгновение, прежде чем закрывать его, чтобы позволить пользователю быть уверенным, что они нажали клавишу, которую они хотели нажать; это полезно, учитывая небольшой размер клавиш и легкость, с которой может быть нажата неправильная, особенно на виртуальных клавиатурах.
Любые формы, содержащие конфиденциальную информацию, такую как пароли (например, формы входа), должны обслуживаться через HTTPS; В Firefox теперь реализованы несколько механизмов для предупреждения от небезопасных форм входа в систему — см. Небезопасные пароли. Другие браузеры также реализуют аналогичные механизмы.
| Value | DOMString представляет пароль или пустую строку |
| События | change и input |
| Общие поддерживаемые атрибуты | autocomplete , inputmode , maxlength , minlength , pattern , placeholder , readonly , required , and size |
| IDL атрибуты | selectionStart , selectionEnd , selectionDirection , и value |
| Методы | select() , setRangeText() , и .»> setSelectionRange() |
Значения
Атрибут value содержит DOMString , значение которого является текущим содержимым элемента редактирования текста, используемого для ввода пароля. Если пользователь еще ничего не указал, это значение представляет собой пустую строку ( «» ). Если указано свойство required , то поле ввода пароля должно содержать значение, отличное от пустой строки, которое должно быть действительным.
Если указан атрибут pattern , содержимое элемента управления «password» считается действительным только в том случае, если значение проходит проверку; см. Validation для получения дополнительной информации.
Символы строки (U+000A) и возврата каретки(U+000D) недопустимы в значении поля «password» . При вставке пароля, возвращаемые символы удаляются из значения.
Использование полей ввода пароля
Поля ввода пароля обычно работают так же, как и другие текстовые поля ввода; основное отличие состоит в том, чтобы скрывать введенный контент, чтобы люди, не знакомые с пользователем, не могли прочитать его пароль.
Простое поле ввода пароля
Здесь мы видим самый простое поле ввода пароля, с меткой, установленной с помощью элемента представляет собой подпись к элементу пользовательского интерфейса.»> .
Поддержка автозаполнения
Чтобы менеджер паролей пользователя автоматически вводил пароль, укажите атрибут autocomplete . Для паролей должно быть одно из следующих значений:
«on» Разрешить браузеру или менеджеру паролей автоматически заполнять поле пароля. Это не так информативно, как использование «current-password» или «new-password» . «off» Запрещает браузеру или менеджеру паролей автоматически заполнять поле пароля. «current-password» Разрешить браузеру или менеджеру паролей вводить текущий пароль для сайта. Это дает больше информации, чем «on» , так как позволяет браузеру или менеджеру паролей знать, что в настоящее время известен пароль для сайта в поле, а не используется новый. «new-password» Разрешить браузеру или менеджеру паролей автоматически вводить новый пароль для сайта. Он может быть автоматически сгенерирован на основе других атрибутов элемента управления или может просто указать браузеру представить виджет «предлагаемого нового пароля».
Обязательное заполнение пароля
Чтобы сообщить браузеру пользователя, что поле пароля должно иметь действительное значение перед отправкой формы, просто укажите Boolean атрибут required .
Указание режима ввода
Если ваше приложение лучше обслуживается с использованием другого режима ввода, чем по умолчанию, вы можете использовать атрибут inputmode для определенного запроса. Наиболее очевидным вариантом использования является то, что ваше приложение использует в качестве пароля числовое значение (например, ПИН). Например, мобильные устройства с виртуальными клавиатурами могут переключаться на макет цифровой клавиатуры вместо полной клавиатуры, чтобы облегчить ввод пароля.
Настройка длины пароля
Как обычно, вы можете использовать атрибуты minlength и maxlength , чтобы установить минимальную и максимальную допустимую длину пароля , Этот пример дополняет предыдущий, указав, что PIN-код пользователя должен быть не менее четырех и не более восьми цифр. Атрибут size используется для обеспечения того, чтобы элемент управления ввода пароля имел ширину в восемь символов.
Выделение текста
Как и другие элементы управления текстовой записью, вы можете использовать метод select() для выбора всего текста в поле пароля.
JavaScript
Результат
Вы также можете использовать selectionStart и selectionEnd , чтобы получить (или установить), какой диапазон символов в элементе управления, и selectionDirection , чтобы узнать, какой выбор направления произошел (или будет расширен в зависимости от вашей платформы, см. его документацию для объяснения) , Однако, учитывая, что текст затенен, их полезность несколько ограничена.
Валидация
Если ваше приложение имеет ограничения по набору символов или любые другие требования для фактического содержимого введенного пароля, вы можете использовать атрибут pattern , чтобы установить регулярное выражение, чтобы автоматически гарантировать, что ваши пароли соответствуют этим требованиям.
В этом примере допустимы только значения, состоящие как минимум из четырех и не более восьми шестнадцатеричных цифр.
Этот Boolean атрибут указывает, что поле пароля недоступно для взаимодействия. Кроме того, отключенные значения полей не отправляются с формой.
Примеры
Запрос номера социального страхования
В этом примере принимается только ввод, который соответствует формату действительного номера социального страхования Соединенных Штатов. Эти цифры, используемые для целей налогообложения и идентификации в США, представлены в форме «123-45-6789». Также существуют различные правила, для которых допустимы значения в каждой группе.
Здесь используется pattern , который ограничивает введенное значение строками, представляющими номера юридической информации Социальной защиты. Очевидно, что это регулярное выражение не гарантирует действительный SSN, но гарантирует, что число может быть единым; он обычно избегает недопустимых значений. Кроме того, он позволяет разделять три группы цифр пробелом, тире («-«) или ничем.
В inputmode установлено значение «number» , чтобы побудить устройства с виртуальными клавиатурами переключаться на макет цифровой клавиатуры для облегчения ввода. Для атрибутов minlength и maxlength установлено значение 9 и 12 соответственно, чтобы требовалось, чтобы значение было не менее девяти и не более 12 символов (первый не разделяет символы между группами цифр и последними с ними). Атрибут required используется для указания того, что этот элемент управления должен иметь значение. Наконец, autocomplete установлен «off» , чтобы избежать попыток установить пароли менеджеров паролей.
JavaScript
Результат
Спецификация
| Спецификация | Статус | Комментарий |
|---|---|---|
| HTML Living Standard Определение ‘ ‘ в этой спецификации. | Живой стандарт | Начальное определение |
| HTML 5.1 Определение ‘ ‘ в этой спецификации. | Рекомендация | Начальное определение |
Совместимость с браузером
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 1.0 | 1.0 (1.7 или ранее) | 2 | 1.0 | 1.0 |
| accesskey | 1.0 | (Да) | 6 | 1.0 | ? |
| autocomplete | 17.0 | 4.0 (2.0) | 5 | 9.6 | 5.2 |
| autofocus | 5.0 | 4.0 (2.0) | 10 | 9.6 | 5.0 |
| disabled | 1.0 | 1.0 (1.7 или ранее) [4] | 6 | 1.0 | 1.0 |
| form | 9.0 | 4.0 (2.0) | ? | 10.62 | ? |
| formaction | 9.0 | 4.0 (2.0) | 10 | 10.62 | 5.2 |
| formenctype | 9.0 | 4.0 (2.0) | 10 | 10.62 | ? |
| formmethod | 9.0 | 4.0 (2.0) | 10 | 10.62 | 5.2 |
| formnovalidate | 5.0 [1] | 4.0 (2.0) | 10 | 10.62 | ? |
| formtarget | 9.0 | 4.0 (2.0) | 10 | 10.62 | 5.2 |
| inputmode | Нет | Нет | Нет | Нет | Нет |
| maxlength | 1.0 | 1.0 (1.7 или ранее) | 2 | 1.0 | 1.0 |
| minlength | 40.0 | ? | ? | ? | ? |
| name | 1.0 | 1.0 (1.7 или ранее) | 2 | 1.0 | 1.0 |
| pattern | 5.0 | 4.0 (2.0) | 10 | 9.6 | Нет |
| placeholder | 10.0 | 4.0 (2.0) | 10 | 11.00 | 5.0 |
| readonly | 1.0 | 1.0 (1.7 или ранее) | 6 [2] | 1.0 | 1.0 |
| required | 5.0 10 [3] | 4.0 (2.0) | 10 | 9.6 | Нет |
| size | 1.0 | 1.0 (1.7 или ранее) | 2 | 1.0 | 1.0 |
| Crossed out lock in address bar to indicate insecure login page | Implementing something similar | 51 (51) | ? | ? | ? |
| Message displayed next to password field to indicate insecure login page, plus autofill disabled | Нет | 52 (52) | Нет | Нет | Нет |
| Feature | Chrome mobile | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | (Да) | 4.0 (2.0) | (Да) | (Да) | (Да) |
| accesskey | ? | ? | ? | ? | ? |
| autocomplete | ? | 4.0 (2.0) | (Да) | (Да) | (Да) |
| autofocus | 3.2 | 4.0 (2.0) | ? | (Да) | ? |
| disabled | (Да) | 4.0 (2.0) | (Да) | (Да) | (Да) |
| form | ? | ? | ? | ? | ? |
| formaction | ? | 4.0 (2.0) | ? | 10.62 | 5.0 |
| formenctype | ? | ? | ? | ? | ? |
| formmethod | ? | 4.0 (2.0) | ? | 10.62 | 5.0 |
| formnovalidate | ? | 4.0 (2.0) | ? | 10.62 | ? |
| formtarget | ? | 4.0 (2.0) | ? | 10.62 | 5.0 |
| inputmode | Нет | Нет | Нет | Нет | Нет |
| maxlength | (Да) | 4.0 (2.0) | (Да) | (Да) | (Да) |
| minlength | ? | ? | ? | 27.0 | ? |
| name | (Да) | 4.0 (2.0) | (Да) | (Да) | 1.0 |
| pattern | ? | 4.0 (2.0) | ? | (Да) | (Да) |
| placeholder | 2.3 | 4.0 (2.0) | ? | 11.10 | 4 |
| required | ? | (Да) | ? | (Да) | ? |
| size | (Да) | 4.0 (2.0) | (Да) | (Да) | (Да) |
| Crossed out lock in address bar to indicate insecure login page | Implementing something similar | 51.0 (51) | ? | ? | ? |
| Message displayed next to password field to indicate insecure login page, plus autofill disabled | Нет | 52.0 (52) | Нет | Нет | Нет |
[1] В версии 6.0 он работал только с типом документа HTML5, поддержка проверки в 7.0 была отключена и повторно включена в 10.0.
[2] Отсутствует для type=»checkbox» и type=»radio» .
[4] Firefox, в отличие от других браузеров, по умолчанию pсохраняет состояние динамического отключения и (если применимо) динамическую проверку из для загрузки страницы. Установка значения атрибута autocomplete в off отключает эту функцию; это работает, даже если атрибут autocomplete обычно не применяется к в силу его type . Смотри баг 654072.
Настройка пользователей API
В мобильной платформе поддерживаются два вида аутентификации пользователей:
собственная аутентификация платформой;
аутентификация внешней LDAP-системой.
Примечание . При выборе LDAP аутентификации необходимо задать настройки подключения к каталогу LDAP.
Для управления учетными записями пользователей API используйте подраздел « Пользователи API » в выбранном проекте:
В рабочей области отображается список содержащихся учетных записей пользователей с параметрами.
Для добавления учетной записи пользователя:
Нажмите кнопку « Добавить пользователя ».
После выполнения действия будут отображены параметры учетной записи:
Тип аутентификации . Выберите тип аутентификации пользователя:
Локально . Проверка подлинности пользователя происходит в локальной базе данных на сервере мобильной платформы;
Сервер LDAP . Проверка подлинности пользователя происходит на сервере LDAP, где хранится база данных пользователей со всем описанием;
Примечание . LDAP аутентификация доступна при настроенном подключении к каталогу LDAP.
Сервер название источника данных в проекте > . Аутентификация пользователя происходит в источнике данных «SAP» или «Foresight Web». Использование авторегистрации и сервер аутентификации задается при редактировании проекта.
Поле обязательно для заполнения.
Логин . Задайте имя пользователя длиной не более 104 символов. Допустимы цифры и буквы, а также некоторые спецсимволы. Поле обязательно для заполнения;
Активен . Установите флажок для активации пользователя в системе и для доступа к работе с мобильной платформой. Активному пользователю доступна аутентификация и выполнение различных API-запросов. Если флажок не установлен, то пользователь деактивирован;
Срок действия учётной записи (в днях) . Задайте срок действия учетной записи в днях. По умолчанию учетная запись является бессрочной, период действия не задан. При задании срока действия учетной записи отображается сообщение «Учётная запись действительна до дата >» в режиме редактирования учетной записи. После истечения срока действия учётная запись автоматически становится неактивной;
Пароль . Задайте пароль учетной записи в соответствии с заданными требованиями к паролю для авторизации пользователя API через мобильное устройство и последующей смены пароля пользователем, если установлен флажок « Одноразовый пароль ». Для автоматической генерации пароля с учетом заданных требований нажмите кнопку « Сгенерировать ». Сгенерированный пароль будет отображен в поле « Пароль » и доступен для редактирования. Для проверки соответствия пароля заданным требованиям используйте API-метод check_new_password, для смены пароля — API-метод change_password. Поле обязательно для заполнения;
Повторитe пароль . Повторите заданный пароль учетной записи. Поле обязательно для заполнения;
Одноразовый пароль . Установите флажок для использования заданного пароля пользователем один раз;
Примечание . Пользователь может использовать одноразовый пароль только один раз до смены пароля. При авторизации появляется сообщение о требовании сменить пароль.
Максимальный период действия пароля (в днях) . Задайте максимальный период действия пароля в днях. По умолчанию задано количество дней, указанное в параметрах пароля. При задании периода действия пароля отображается сообщение «Пароль действителен до дата >» в режиме редактирования учетной записи. Если дата истечения срока действия пароля меньше текущей даты, то отображается сообщение «Срок действия пароля истёк»;
Заблокирован по соображениям безопасности . Снимите флажок для разблокировки пользователя при неуспешных попытках авторизации или дождитесь окончания заданного количества времени блокировки пользователя, после которого пользователь будет разблокирован автоматически. При блокировке пользователя API флажок устанавливается автоматически и отображается сообщение «Заблокирован до дата >» в режиме редактирования учетной записи;
ФИО . Введите при необходимости ФИО пользователя;
Примечание . Если выбрана LDAP аутентификация, то данные будут загружены из каталога LDAP.
Группы . Выберите группы пользователей, в которые будет входить пользователь;
Учётные данные . Выберите учетные данные для доступа к источнику данных;
Примечание . Если пользователь API состоит в группе пользователей с заданными учётными данными, то учётные данные для конкретного пользователя API не задаются.
DSS логин . Введите при необходимости логин учетной записи DSS для настройки цифровой подписи.
Нажмите кнопку « Сохранить ».
После выполнения действий учетная запись будет добавлена в список пользователей.
Для редактирования учетной записи пользователя:
Нажмите на имя пользователя.
Измените параметры, заданные при добавлении учетной записи.
Нажмите кнопку « Сохранить ».
После выполнения действий учетная запись будет отредактирована и обновлена в списке пользователей.
Для удаления учетной записи нажмите кнопку « Удалить », расположенную напротив имени пользователя.
После выполнения действия будет запрошено подтверждение об удалении учетной записи. При положительном ответе учетная запись удалится из списка.
В консоли администратора для пользователей API можно посмотреть привязанные устройства и добавить пользователей в группы для разграничения прав доступа к ресурсам источника данных.
