Форма авторизации на простом HTML с пояснениями
Добрый день. Конечно всем эта тема знакома уже много лет, но она будет кому то полезна особенно новичкам, которые ищут форму авторизации. Формы бывают разные и я буду добавлять новые, чтобы кто то не тратил много времени на поиски готовых решений. Это будут формы авторизации из двух полей, форма авторизации по номеру телефона, форма авторизации с «галочкой» запомнить, а так же формы авторизации с капчей от гугл. Еще добавлю, что все формы будут иметь уникальные классы блоков, что позволит их использовать на любых проектах, чтобы не ломать действующие возможные стили и пересечения классов блоков.
Базовая разметка простой формы авторизации:
Базовая разметка HTML для простой формы авторизации:
Авторизация
В данной разметке мы создали простой блок родитель в котором будут храниться все остальные блоки, как видно их не так много. Блоки названы одноименными классами, так легче понять о чем идет суть и какие стили к чему относятся в структуре. Обратите внимание на type для двух input, поскольку первый является полем для ввода имейл адреса его тип выбран как email это позволит пользователю в простой проверке браузера избежать ошибки к примеру в отсутствии @ или попросту точки перед доменной зоной.
Второй input имеет тип password это скрывает пароль от глаз в виде точек. Это не так критично, многие предпочитают тип text, но правильнее все же будет использовать тип password, о других нюансах выбора типа поля input будет рассказано в другой статье.
Placeholder — простым словом «тег подсказка», он дает возможность указать для пользователя что ему требуется сделать, что разрешено, а что нет. Можно указать любое значение. Обратите внимание что тег placeholder можно изменить с помощью стилей CSS.
Обратите внимание что в input так же задано свойство name, оно необходимо для последующей работы с формой, когда дело доходит до ее обработки на сервере. Это значение нужно делать уникальным и желательно схожим по названию отражающем его сущность. Если это форма авторизации, то логичнее всего задать name=»auth_email», таким образом мы будем понимать что это свойство отвечает за передачу email адреса из формы авторизации. Многие новички в последующем делают частую ошибку работая с обработкой этих данных на сервере, особенно работая по паттерну MVC, когда в контроллере срабатывает событие к примеру submit а данные свойства name остаются везде одинаковые к примеру name=»email».
Простые стили к форме авторизации без адаптации под мобильные устройства:
.form_auth_block < width: 500px; height: 500px; margin: 0 auto; background: url(http://www.dailycompass.org/wp-content/uploads/2013/01/Bubbles.jpg); background-size: cover; border-radius: 4px; >.form_auth_block_content < padding-top: 15%; >.form_auth_block_head_text < display: block; text-align: center; padding: 10px; font-size: 20px; font-weight: 600; background: #ffffff; opacity: 0.7; >.form_auth_block label < display: block; text-align: center; padding: 10px; background: #ffffff; opacity: 0.7; font-weight: 600; margin-bottom: 10px; margin-top: 10px; >.form_auth_block input < display: block; margin: 0 auto; width: 80%; height: 45px; border-radius: 10px; border:none; outline: none; >input:focus < color: #000000; border-radius: 10px; border: 2px solid #436fea; >.form_auth_button < display: block; width: 80%; margin: 0 auto; margin-top: 10px; border-radius: 10px; height: 35px; border: none; cursor: pointer; >::-webkit-input-placeholder // Это стили для placeholder ::-moz-placeholder // Это стили для placeholder :-moz-placeholder // Это стили для placeholder :-ms-input-placeholder // Это стили для placeholder
И вот что у нас получилось в итоге:
Простая форма авторизации из двух полей и небольшим количеством стилей. Давайте усложним задачу и сделаем эту форму более отзывчивой и добавим ей немного мобильной адаптации.
Поле для пароля
Поле для пароля — обычное текстовое поле, но отличается от него тем, что все вводимые символы отображаются звездочками, точками или другими знаками (это зависит от браузера). Поле предназначено для того, чтобы никто не подглядел вводимый пароль.
Синтаксис создания следующий.
Атрибуты совпадают с атрибутами текстового поля и перечислены в табл. 1.
| Атрибут | Описание |
|---|---|
| size | Ширина поля с паролем, которая определяется числом звездочек моноширинного шрифта. |
| maxlength | Устанавливает максимальное число символов, которое может быть введено пользователем в поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным. Если этот атрибут опустить, то можно вводить строку длинее самого поля. |
| name | Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. |
| value | Начальный текст, который выводится в поле. Этот текст не отображается и заменяется звездочками. |
Создание поля для пароля показано в примере 1.
В результате получим следующее (рис. 1).
Рис. 1. Вид поля с паролем в браузере Chrome
Показать/скрыть пароль
Чтобы включить отображение пароля в поле password нужно заменить атрибут type=»password» на type=»text» , сделать это можно на jQuery или чистом JS.
Показать пароль по чекбоксу
$('body').on('click', '.password-checkbox', function() < if ($(this).is(':checked'))< $('#password-input').attr('type', 'text'); >else < $('#password-input').attr('type', 'password'); >>); Результат:
Показать пароль по ссылке
$('body').on('click', '.password-control', function() < if ($('#password-input').attr('type') == 'password')< $(this).html('Скрыть пароль'); $('#password-input').attr('type', 'text'); >else < $(this).html('Показать пароль'); $('#password-input').attr('type', 'password'); >return false; >); Результат:
Показать пароль по иконке
.password < position: relative; >.password-control < position: absolute; top: 11px; right: 6px; display: inline-block; width: 20px; height: 20px; background: url(/view.svg) 0 0 no-repeat; >.password-control.view < background: url(/no-view.svg) 0 0 no-repeat; >$('body').on('click', '.password-control', function() < if ($('#password-input').attr('type') == 'password')< $(this).addClass('view'); $('#password-input').attr('type', 'text'); >else < $(this).removeClass('view'); $('#password-input').attr('type', 'password'); >return false; >);Результат:
Без jQuery
function show_hide_password(target) < var input = document.getElementById('password-input'); if (input.getAttribute('type') == 'password') < target.classList.add('view'); input.setAttribute('type', 'text'); >else < target.classList.remove('view'); input.setAttribute('type', 'password'); >return false; >Результат:
Комментарии
Другие публикации
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а.
По спецификации HTML в option нельзя вставить ссылку, если все-таки её туда вставить, то работать она не будет. В таких случаях можно сделать перенаправление браузера по клику на JS или имитацию.