В этой статье мы разберем, как должна выглядеть идеальная страница или форма ввода логина и пароля. Не секрет, что такие формы достаточно просты в плане необходимых элементов, но очень часто разработчики пренебрегают теми или иными элементами.
Давайте посмотрим, какие из них действительно нужны, а какими стоит пренебречь...
1. Заголовок
Очень важный элемент, поясняющий смысл формы. А если это ваша страница ввода логина и пароля, то необходимо еще и указать имя вашего сайта, потому как посетители должны знать, где они находятся.
2. Гости
Гости, тем или иным способом, могут попасть на эту страницу. Почему бы не воспользоваться этим, и не показать им прямую ссылку регистрации, чтобы они смогли стать вашими пользователями.
3. Поля ввода и отображения
Обычно формы ввода логина и пароля содержат два элемента input (поля ввода) с двумя элементами label (этикетки).
И очень часто мы забываем привязать label к input. Это очень важно в плане юзабилити, поэтому, просто, не забывайте про привязку.
4. Ссылка восстановления забытого пароля
Очень важная ссылка, потому как, пользователи очень часто забывают пароли. Самым лучшим расположением ссылки будет место около поля ввода пароля.
5. Кнопка «Принять»
Самый известный элемент на форме. Для лучших результатов, надо, чтобы она выглядела, как кнопка.
6. Запомнить меня
Полезная фишка для пользователей, которые часто возвращаются на ваш сайт. Если приложение поддерживает запоминание пользователей, то они будут вам благодарны.
Еще одна вещь, которую не стоит забывать. Так как, очень часто «запомнить меня» состоит из элементов input и label, то не забывайте о их взаимной привязке, потому как, это увеличит область нажатия на данный элемент. Например, на сайте, на котором описаны множество пылесосов и отзывов к ним, также находится и отличный пример формы входа.
7. Ссылка «Назад»
Не забывайте про свободу пользователей. У них должен быть выбор, заходить на сайт или путешествовать на нем анонимно.
Валидация (проверка)
Помните, что проверка данных на JavaScript не должна быть единственной, не забывайте про проверку на стороне сервера. А JavaScript нужен для быстрой проверки вводимых данных.
Пример
Посмотрите, как работает пример или скачайте исходники формы. Сама страница содержит немного CSS3, простого проверочного кода, что просто идеально для изучения. Надеемся, вам понравилось.