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

Перевод статьи «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-типам.

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]