Формы для входа на сайт: best practices

0
785
views
verstka logo

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

×

Перевод статьи «Best Practices: Sign-In Forms».

Это, безусловно, не исчерпывающий список хороших практик. Я стремился создать общее руководство из простых и полезных советов. Считайте его своего рода отправной точкой.

HTML

  • Пользуйтесь элементом <label>, отдавайте предпочтение ему, а не тегам <placeholder>.
  • Размещайте элемент <label> выше элемента <input>.
  • Хотя теги <placeholder> могут быть полезны, не используйте их как замену для <label>.
  • Не заставляйте пользователей вводить информацию дважды. Это касается, в том числе, адресов электронной почты и паролей. Вместо этого дайте пользователям возможность подтвердить создание аккаунта, кликнув на ссылку в письме, которое придет на указанный адрес. Также сделайте как можно более простым сброс и замену пароля.
  • Побуждайте пользователей к использованию сильных паролей, а не просто длинных.
  • Используйте теги <button> для кнопок. Сделайте <label> кнопок SUBMIT более описательным. Подумайте, не стоит ли использовать «Sign In» или «Subscribe» («Войти» или «Подписаться») — чтобы пользователь точно знал, к чему приводит клик.
  • Базовые формы входа должны использовать подходящие HTML-элементы для каждой части, а не бесконечные <div>, которые рендерятся при помощи бессчетного числа строк JavaScript.

От редакции Techrocks: предлагаем почитать статью «6 не слишком известных HTML-элементов, полезных при создании форм».

Пример HTML-кода веб-формы

    <form>

    <section>
        <label for="email">Email</label>
        <input id="email">
    </section>

    <section>
    <label for="password">Password</label>
    <input id="password">
    </section>

    <button>Sign In</button>

    </form>

CSS

  • Для мобильных версий используйте padding приблизительно в 15px.
  • Для десктопных достаточно сделать padding в 10px.
  • Все поля ввода и кнопки должны быть четко видны и при использовании на мобильном устройстве давать достаточно простора для нажатия любого отдельного элемента.
  • Проектируя дизайн, рассчитывайте на нажатия большими пальцами рук.
  • Проектируя для мобильных устройств, увеличивайте font-size по крайней мере на 2px. Для некоторых шрифтов — и на все 4px.
  • Добавляйте атрибут autofocus в первом блоке ввода.
  • Ввод пароля должен всегда объявляться как <input type=password>. Это указывает браузеру, что по умолчанию вводимый текст должен быть скрыт.
  • Добавляйте атрибут required к полям для ввода email-адреса и пароля.
  • Пользуйтесь встроенным функционалом браузера для обнаружения невалидного инпута. Для этого не нужен JavaScript: просто используйте атрибут :invalid с <color: red> в CSS.

От редакции Techrocks: предлагаем почитать статью «Стилизуем формы при помощи CSS: руководство для начинающих».

Пример невалидного инпута (CSS)

    /** ХОРОШО */
    input[type=email]:invalid {
    color: red;
    }

    /** ЕЩЕ ЛУЧШЕ */
    input[type=email]:not(:placeholder-shown):invalid {
    color: red;
    }

Опциональные атрибуты инпута

    <input type="tel"> 
    <input type="number">

    <!-- Дает браузеру контекст, чтобы он мог предлагать сохранять
    новые пароли и использовать сохраненное для автозаполнения блоков,
    если у пользователя включена эта функция. -->
    <input type="current-password">
    <input type="password" autocomplete="new-password"> 
    <input type="password" autocomplete="current-password">

JavaScript

  • Используйте JavaScript для отображения иконки или кнопки с текстом «SHOW PASSWORD» («Показать пароль»).
  • Следите за тем, чтобы кнопка входа оставалась видимой на экране мобильного устройства и не перекрывалась клавиатурой. Один из почти безотказных способов это обеспечить — запрашивать email-адрес только на начальном экране, а затем переходить на второй экран, и уж там запрашивать ввод пароля.
  • ВАЖНО: создавайте дополнительную валидацию формы для дальнейшей проверки пользовательского ввода перед отправкой его на сервер. Проверяйте инпут на соответствие регулярным выражениям и MIME-типам.

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here