Добрый день. Конечно всем эта тема знакома уже много лет, но она будет кому то полезна особенно новичкам, которые ищут форму авторизации. Формы бывают разные и я буду добавлять новые, чтобы кто то не тратил много времени на поиски готовых решений. Это будут формы авторизации из двух полей, форма авторизации по номеру телефона, форма авторизации с "галочкой" запомнить, а так же формы авторизации с капчей от гугл. Еще добавлю, что все формы будут иметь уникальные классы блоков, что позволит их использовать на любых проектах, чтобы не ломать действующие возможные стили и пересечения классов блоков.
Базовая разметка простой формы авторизации:
Базовая разметка HTML для простой формы авторизации:
<div class="form_auth_block">
<div class="form_auth_block_content">
<p class="form_auth_block_head_text">Авторизация</p>
<form class="form_auth_style" action="#" method="post">
<label>Введите Ваш имейл</label>
<input type="email" name="auth_email" placeholder="Введите Ваш имейл" required >
<label>Введите Ваш пароль</label>
<input type="password" name="auth_pass" placeholder="Введите пароль" required >
<button class="form_auth_button" type="submit" name="form_auth_submit">Войти</button>
</form>
</div>
</div>
В данной разметке мы создали простой блок родитель в котором будут храниться все остальные блоки, как видно их не так много. Блоки названы одноименными классами, так легче понять о чем идет суть и какие стили к чему относятся в структуре. Обратите внимание на 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 {color:#3f3f44; padding-left: 10px;} // Это стили для placeholder
::-moz-placeholder {color:#3f3f44; padding-left: 10px;} // Это стили для placeholder
:-moz-placeholder {color:#3f3f44; padding-left: 10px;} // Это стили для placeholder
:-ms-input-placeholder {color:#3f3f44; padding-left: 10px;} // Это стили для placeholder
И вот что у нас получилось в итоге:
Простая форма авторизации из двух полей и небольшим количеством стилей. Давайте усложним задачу и сделаем эту форму более отзывчивой и добавим ей немного мобильной адаптации.