Html форма авторизации: Как сделать адаптивную форму входа авторизации

Содержание

Примеры форм авторизации

В этой статье мы рассмотрим несколько вариантов создания креативных форм авторизации. В настоящее время, почти каждый веб-сервис, приложение, игра и т.д. позволяют (или даже требуют) авторизацию пользователя, что означает, что им всем нужны формы для регистрации пользователей и их авторизации на сайте.

Имея это в виду, я попытался создать несколько примеров различных форм авторизации. Цель состояла в том, чтобы сделать акцент на некоторые особенности каждой из них.

Необходимо отметить несколько вещей, прежде чем начать:

В статье пропущены префиксы CSS-кода, но вы, конечно, можете найти их в исходных файлах.
Целью урока является показать потенциал CSS, в частности, CSS3, поэтому внешний вид форм может быть отличаться в браузерах младше IE8-. Если вы планируете поддерживать эти браузеры, не забудьте сделать fallback.
Я не использовал атрибуты для тега формы, такие как action, method, так как я сделал основной акцент на дизайне.

Лично я использую бокс-модель, где [width] = [element-width] + [padding] + [borders]. Я активировал её следующим кодом:

*,
*:after,
*:before {
box-sizing: border-box;
}

Теперь давайте перейдем непосредственно к созданию форм!

Пример 1

Как я уже говорил ранее, я попытался сделать каждую форму с некоторой своей особенностью. В данном случае это будет кнопка submit, которая как бы выходит за пределы блока, и имеет круглую форму.

Разметка

Итак, наш первый пример довольно прост, мы не будем использовать какие-либо лэйблы. Но нам нужно указать нашему пользователю, что они должны написать в этих полях, поэтому мы используем … иконки. Для этого используем тег <i/>.

Примечание: я не буду рассматривать здесь, как использовать шрифт иконок, такой как FontAwesome. Если вы хотите узнать о нем больше, вы можете посмотреть примеры на их сайте.

Теперь у нас есть два контейнера, которые содержат текстовое поле и иконку. Кнопка Submit имеет собственный контейнер, мы используем тег <button/> вместо <input/> с иконой внутри.

Мы также будем использовать placeholder, чтобы назначение полей стало еще более ясным для всех кто использует современные браузеры. Более подробную информацию о поддержке браузерами атрибута placeholder можно найти на CanIUse.com.

CSS

Мы начнем с определения некоторых стилей для элемента form. Форма является основной оболочкой для нашего примера, поэтому мы зададим ей ширину и расположим в центре при помощи свойства margin.

.form-1 {
/* Размер и положение */
width: 300px;
margin: 60px auto 30px;
padding: 10px;
position: relative; /* For the submit button positioning */

/* Styles */
box-shadow:
0 0 1px rgba(0, 0, 0, 0.3),
0 3px 7px rgba(0, 0, 0, 0.3),
inset 0 1px rgba(255,255,255,1),
inset 0 -3px 2px rgba(0,0,0,0.25);
border-radius: 5px;
background: linear-gradient(#eeefef, #ffffff 10%);
}

.form-1 .field {
position: relative; /* For the icon positioning */
}

Важно: мы задали для формы position:relative, чтобы иметь возможность разместить кнопку Submit с абсолютным позиционированием. Мы делаем то же самое для контейнеров с классом

.field, чтобы также поместить с абсолютным позиционированием иконки.
Теперь зададим стили для значков.

.form-1 .field i {
/* Size and position */
left: 0px;
top: 0px;
position: absolute;
height: 36px;
width: 36px;

/* Line */
border-right: 1px solid rgba(0, 0, 0, 0. 1);
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.7);

/* Styles */
color: #777777;
text-align: center;
line-height: 42px;
transition: all 0.3s ease-out;
pointer-events: none;
}

Мы добавим тонкие линии по правой стороне иконки, установим правую границу и тень.

Теперь нам нужно задать некоторые стили для текстовых полей:

.form-1 input[type=text],
.form-1 input[type=password] {
font-family: ‘Lato’, Calibri, Arial, sans-serif;
font-size: 13px;
font-weight: 400;
text-shadow: 0 1px 0 rgba(255,255,255,0.8);

/* Size and position */
width: 100%;
padding: 10px 18px 10px 45px;

/* Styles */
border: none; /* Remove the default border */

box-shadow:
inset 0 0 5px rgba(0,0,0,0.1),
inset 0 3px 2px rgba(0,0,0,0.1);
border-radius: 3px;
background: #f9f9f9;
color: #777;
transition: color 0.3s ease-out;
}

.form-1 input[type=text] {
margin-bottom: 10px;
}

Прежде чем идти дальше, не забудем определить стили для состояний :hover и :focus.

.form-1 input[type=text]:hover ~ i,
.form-1 input[type=password]:hover ~ i {
color: #52cfeb;
}

.form-1 input[type=text]:focus ~ i,
.form-1 input[type=password]:focus ~ i {
color: #42A2BC;
}

.form-1 input[type=text]:focus,
.form-1 input[type=password]:focus,

.form-1 button[type=submit]:focus {
outline: none;
}

Обратим внимание на следующие вещи: мы используем родственный селектор (~), чтобы изменить цвет иконки при работе с полями: светло-синий при наведении мыши, темно-синий при активном поле. И мы также удаляем контур для Chrome.

Последнее, что мы должны сделать — это кнопку «Отправить».

.form-1 .submit {
/* Size and position */
width: 65px;
height: 65px;
position: absolute;
top: 17px;
right: -25px;
padding: 10px;
z-index: 2;

/* Styles */
background: #ffffff;
border-radius: 50%;
box-shadow:

0 0 2px rgba(0,0,0,0.

1),
0 3px 2px rgba(0,0,0,0.1),
inset 0 -3px 2px rgba(0,0,0,0.2);
}

Все довольно просто: мы создаем круглый элемент и помещаем его вверху нашей формы, слегка сдвинув его в правую сторону. Тени подчеркнут эффект перекрытия.

.form-1 .submit:after {
/* Size and position */
content: «»;
width: 10px;
height: 10px;
position: absolute;
top: -2px;
left: 30px;

/* Styles */
background: #ffffff;

/* Other masks trick */

box-shadow: 0 62px white, -32px 31px white;
}

Последнее, но не менее важное, наша фактическая кнопка отправки:

.form-1 button {
/* Size and position */
width: 100%;
height: 100%;
margin-top: -1px;

/* Icon styles */
font-size: 1.4em;
line-height: 1.75;
color: white;

/* Styles */
border: none; /* Remove the default border */
border-radius: inherit;
background: linear-gradient(#52cfeb, #42A2BC);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
0 1px 2px rgba(0,0,0,0.35),
inset 0 3px 2px rgba(255,255,255,0.2),
inset 0 -3px 2px rgba(0,0,0,0.1);

cursor: pointer;
}

И, наконец, стили для наведения, фокуса (например, при переходе по клавиши табуляции) и активного (нажатого) состояния кнопки:

.form-1 button:hover,
.form-1 button[type=submit]:focus {
background: #52cfeb;
transition: all 0.3s ease-out;
}

.form-1 button:active {
background: #42A2BC;
box-shadow:
inset 0 0 5px rgba(0,0,0,0.3),
inset 0 3px 4px rgba(0,0,0,0.3);
}

Тут все довольно просто: просто меняем цвет при наведении и фокусировке. Но подождите, это еще не все! Так как мы используем градиент для состояния по умолчанию, а для градиентов не могут быть использованы переходы, браузер сначала отключает градиент, затем применяет цвет фона.

Данное поведение вызывает белую вспышку при наведении курсора, которая, на мой взгляд, выглядит довольно привлекательно.

Пример 2

Еще одна простая форма, но с некоторыми новые опциями, такими как: «Войти через Twitter» и «Показать пароль». Это потребует некоторого кода JavaScript.

Разметка

<form>
<h2><span>Войти</span> или <span>зарегистрироваться</span></h2>
<p>
<label for=»login»><i></i>Логин</label>
<input type=»text» name=»login» placeholder=»Логин или email»>

</p>
<p>
<label for=»password»><i></i>Пароль</label>
<input type=»password» name=»password» placeholder=»Пароль»>
</p>
<p>
<a href=»#»>Войти через Twitter</a>
<input type=»submit» name=»submit» value=»Войти»>
</p>
</form>

Здесь мы будем использовать заголовок. Я выбрал h2, но вы можете использовать любой тег. Мы также используем теги label, связанные с текстовыми полями при помощи атрибута for.

CSS

Давайте начнем с некоторых общих стилей для формы:

.form-2 {
/* Size and position */
width: 340px;
margin: 60px auto 30px;
padding: 15px;
position: relative;

/* Styles */
background: #fffaf6;
border-radius: 4px;
color: #7e7975;
box-shadow:
0 2px 2px rgba(0,0,0,0.2),
0 1px 5px rgba(0,0,0,0.2),
0 0 0 12px rgba(255,255,255,0.4);
}

Мы создадим полупрозрачные границы и применим тени.

Теперь, когда мы задали некоторые основные стили для нашей формы, разберемся с заголовком. Мы используем 3 различных стиля для заголовка:

.form-2 h2 {
font-size: 15px;
font-weight: bold;
color: #bdb5aa;
padding-bottom: 8px;
border-bottom: 1px solid #EBE6E2;
text-shadow: 0 2px 0 rgba(255,255,255,0. 8);
box-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

.form-2 h2 .log-in,
.form-2 h2 .sign-up {
display: inline-block;
text-transform: uppercase;
}

.form-2 h2 .log-in {
color: #6c6763;
padding-right: 2px;
}

.form-2 h2 .sign-up {
color: #ffb347;
padding-left: 2px;
}

Далее, мы используем два параграфа, которые будут размещены рядом друг с другом. Каждый займет 50% от доступного пространства формы, а благодаря “border-box” box-sizing, отступы рассчитываются внутри этих 50%. Вот почему мы можем задать расстояние между ними.

.form-2 .float {
width: 50%;
float: left;
padding-top: 15px;
border-top: 1px solid rgba(255,255,255,1);
}

.form-2 .float:first-of-type {
padding-right: 5px;
}

.form-2 .float:last-of-type {
padding-left: 5px;
}

Теперь стили для внутренних элементов! Там у нас находятся лэйбл и текстовое поле. Иконка будет находится внутри лэйбла в этом примере:

.form-2 label {
display: block;
padding: 0 0 5px 2px;
cursor: pointer;
text-transform: uppercase;
font-weight: 400;
text-shadow: 0 1px 0 rgba(255,255,255,0.8);
font-size: 11px;
}

.form-2 label i {
margin-right: 5px; /* Gap between icon and text */
display: inline-block;
width: 10px;
}

Примечание: использование cursor: pointer для лэйблов помогает пользователям понять, что они могут нажать на них. Это важная деталь.

.form-2 input[type=text],
.form-2 input[type=password] {
font-family: ‘Lato’, Calibri, Arial, sans-serif;
font-size: 13px;
font-weight: 400;
display: block;
width: 100%;
padding: 5px;
margin-bottom: 5px;
border: 3px solid #ebe6e2;
border-radius: 5px;
transition: all 0.3s ease-out;
}

Не забывайте о состояниях hover и focus:

. form-2 input[type=text]:hover,
.form-2 input[type=password]:hover {
border-color: #CCC;
}

.form-2 label:hover ~ input {
border-color: #CCC;
}

.form-2 input[type=text]:focus,
.form-2 input[type=password]:focus {
border-color: #BBB;
outline: none; /* Remove Chrome’s outline */
}

Проверьте, как мы используем родственный селектор (~), чтобы вызвать состояние hover на текстовом поле, когда мы наводим мышь на лэйбл. Разве это не круто?

Теперь кнопка submit.

.clearfix:after {
content: «»;
display: table;
clear: both;
}

.form-2 input[type=submit],
.form-2 .log-twitter {
/* Size and position */
width: 49%;
height: 38px;
float: left;
position: relative;

/* Styles */
box-shadow: inset 0 1px rgba(255,255,255,0.3);
border-radius: 3px;
cursor: pointer;

/* Font styles */
font-family: ‘Lato’, Calibri, Arial, sans-serif;
font-size: 14px;
line-height: 38px; /* Same as height */
text-align: center;
font-weight: bold;
}

.form-2 input[type=submit] {
margin-left: 1%;
background: linear-gradient(#fbd568, #ffb347);
border: 1px solid #f4ab4c;
color: #996319;
text-shadow: 0 1px rgba(255,255,255,0.3);
}

.form-2 .log-twitter {
margin-right: 1%;
background: linear-gradient(#34a5cf, #2a8ac4);
border: 1px solid #2b8bc7;
color: #ffffff;
text-shadow: 0 -1px rgba(0,0,0,0.3);
text-decoration: none;
}

Обе кнопки имеют ширину 49%, и у них есть левый/правый отступ, чтобы сделать небольшой зазор между ними. Сейчас мы зададим стили для активного состояния и состояния при наведении курсора мыши.

.form-2 input[type=submit]:hover,
.form-2 .log-twitter:hover {
box-shadow:
inset 0 1px rgba(255,255,255,0. 3),
inset 0 20px 40px rgba(255,255,255,0.15);
}

.form-2 input[type=submit]:active,
.form-2 .log-twitter:active{
top: 1px;
}

Благодаря относительному позиционированию, мы можем применить top: 1px к кнопкам в активном состоянии, чтобы они выглядели так, как будто они вдавливаются при нажатии.

Важно: для браузеров, которые не поддерживают box-shadow (такие все еще существуют, правда?), мы используем вместо этого изменение background-color. Класс no-boxshadow применяется к тегу HTML при помощи Modernizr, в случае если браузер не поддерживает box-shadow. Это хороший пример того, как можно создать простой «fallback» для старых браузеров:

.no-boxshadow .form-2 input[type=submit]:hover {
background: #ffb347;
}

.no-boxshadow .form-2 .log-twitter:hover {
background: #2a8ac4;
}

JavaScript

Эй, вы не забыли про нашу маленькую фичу «показать пароль»? Сейчас мы сделаем это! Во-первых, вы знаете, что мы не можем изменить тип атрибута для поля? Для того, чтобы показать пароль, мы должны удалить фактическое ввода для пароля и создать новое текстовое поле.

Я не очень хорошо знаю jQuery, так что я нашел маленький фрагмент кода от Aaron Saray:

$(function(){
$(«.showpassword»).each(function(index,input) {
var $input = $(input);
$(«<p/>»).append(
$(«<input type=’checkbox’ />»).click(function() {
var change = $(this).is(«:checked») ? «text» : «password»;
var rep = $(«<input placeholder=’Password’ type='» + change + «‘ />»)
.attr(«id», $input.attr(«id»))
.attr(«name», $input.attr(«name»))
.attr(‘class’, $input.attr(‘class’))
.val($input.val())
.insertBefore($input);
$input.remove();
$input = rep;
})
). append($(«<label for=’showPassword’/>»).text(«Показать пароль»)).insertAfter($input.parent());
});
});

Так что же это скрипт делает?

Он находит поле с классом .showpassword.
Создает новый контейнер (.opt).
Внутри этого контейнера, он создает чекбокс с надписью.
Вставляет этот контейнер после поля с классом .showpassword.
Когда чекбокс отмечен, он удаляет поле .showpassword и создает еще одно, с соответствующим атрибутом type.

Не забудем задать некоторые стили для нашего чекбокса:

.form-2 p:last-of-type {
clear: both;
}

.form-2 .opt {
text-align: right;
margin-right: 3px;
}

.form-2 label[for=showPassword] {
display: inline-block;
margin-bottom: 10px;
font-size: 11px;
font-weight: 400;
text-transform: capitalize;
}

.form-2 input[type=checkbox] {
vertical-align: middle;
margin: -1px 5px 0 1px;
}

Последнее, но не менее важное, мы добавим несколько строк jQuery, чтобы изменить значок, когда чекбокс отмечен! Довольно просто, но весьма эффективно!

$(‘#showPassword’).click(function(){
if($(«#showPassword»).is(«:checked»)) {
$(‘.icon-lock’).addClass(‘icon-unlock’);
$(‘.icon-unlock’).removeClass(‘icon-lock’);
} else {
$(‘.icon-unlock’).addClass(‘icon-lock’);
$(‘.icon-lock’).removeClass(‘icon-unlock’);
}
});

Пример 3

Этот пример вдохновлен старой работой от Virgil Pana с Dribbble. К сожалению, похоже, что он удалил её с Dribbble, так что я не могу показать вам оригинальную концепцию. В любом случае, вы, наверное, поняли смысл, и я покажу вам, как создать этот удивительный световой эффект при помощи чистого CSS!

Разметка

<form>
<p>
<label for=»login»>Логин</label>
<input type=»text» name=»login» placeholder=»Логин»>
</p>
<p>
<label for=»password»>Пароль</label>
<input type=»password» name=»password» placeholder=»Пароль»>
</p>
<p>
<input type=»checkbox» name=»remember»>
<label for=»remember»>Запомнить меня</label>
</p>
<p>
<input type=»submit» name=»submit» value=»Войти»>
</p>
</form>

Обратите внимание, что мы добавили новое поле: «Запомнить меня». Оно используется в формах авторизации, что позволяет приложению запоминать вас.

CSS

.form-3 {
font-family: ‘Ubuntu’, ‘Lato’, sans-serif;
font-weight: 400;
/* Size and position */
width: 300px;
position: relative;
margin: 60px auto 30px;
padding: 10px;
overflow: hidden;

/* Styles */
background: #111;
border-radius: 0.4em;
border: 1px solid #191919;
box-shadow:
inset 0 0 2px 1px rgba(255,255,255,0.08),
0 16px 10px -8px rgba(0, 0, 0, 0.6);
}

Тень под формой входа будет выглядеть особенно, поэтому зададим отрицательный радиус распространения. Мы можем как бы сжать тень.

Давайте добавим стили для лэйблов и текстовых полей:

.form-3 label {
/* Size and position */
width: 50%;
float: left;
padding-top: 9px;

/* Styles */
color: #ddd;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 0 1px 0 #000;
text-indent: 10px;
font-weight: 700;
cursor: pointer;
}

.form-3 input[type=text],
.form-3 input[type=password] {
/* Size and position */
width: 50%;
float: left;
padding: 8px 5px;
margin-bottom: 10px;
font-size: 12px;

/* Styles */
background: linear-gradient(#1f2124, #27292c);
border: 1px solid #000;
box-shadow:
0 1px 0 rgba(255,255,255,0.1);
border-radius: 3px;

/* Font styles */
font-family: ‘Ubuntu’, ‘Lato’, sans-serif;
color: #fff;

}

.form-3 input[type=text]:hover,
.form-3 input[type=password]:hover,
.form-3 label:hover ~ input[type=text],
.form-3 label:hover ~ input[type=password] {
background: #27292c;
}

.form-3 input[type=text]:focus,
.form-3 input[type=password]:focus {
box-shadow: inset 0 0 2px #000;
background: #494d54;
border-color: #51cbee;
outline: none; /* Remove Chrome outline */
}

Теперь у нас есть красивые поля и мы должны создать наш маленький флажок «Запомнить меня», и кнопку отправки. Эти две вещи размещенны рядом друг с другом:

.form-3 p:nth-child(3),
.form-3 p:nth-child(4) {
float: left;
width: 50%;
}

Давайте начнем с чекбокса и его лэйбла:

.form-3 label[for=remember] {
width: auto;
float: none;
display: inline-block;
text-transform: capitalize;
font-size: 11px;
font-weight: 400;
letter-spacing: 0px;
text-indent: 2px;
}

.form-3 input[type=checkbox] {
margin-left: 10px;
vertical-align: middle;
}

Поскольку этот лэйбл довольно сильно отличается от других, мы должны настроить несколько вещей: в первую очередь это удаление ранее установленных стилей. Что касается чекбокса, мы добавим маленький отступ справа, чтобы предотвратить «прилипание» лэйбла к нему.

Последнее, наша кнопка отправки:

.form-3 input[type=submit] {
/* Width and position */
width: 100%;
padding: 8px 5px;

/* Styles */
border: 1px solid #0273dd; /* Fallback */
border: 1px solid rgba(0,0,0,0.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 10px 10px rgba(255,255,255,0.1);
border-radius: 3px;
background: #38a6f0;
cursor:pointer;

/* Font styles */
font-family: ‘Ubuntu’, ‘Lato’, sans-serif;
color: white;
font-weight: 700;
font-size: 15px;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}

.form-3 input[type=submit]:hover {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

.form-3 input[type=submit]:active {
background: #287db5;
box-shadow: inset 0 0 3px rgba(0,0,0,0.6);
border-color: #000; /* Fallback */
border-color: rgba(0,0,0,0.9);
}

.no-boxshadow .form-3 input[type=submit]:hover {
background: #2a92d8;
}

Но где, черт возьми, наш обещанный световой эффект? Ладно, ребята, давайте займемся им. Чтобы добиться этого, нам нужны три элемента:

Один для линии градиента в верхней части формы
Один для небольшую вспышки на предыдущей строке
Один для большого отражения в правой части формы

Начнем с первых двух элементов, при помощи псевдо-элементов для тега form.

/* Gradient line */
.form-3:after {
/* Size and position */
content: «»;
height: 1px;
width: 33%;
position: absolute;
left: 20%;
top: 0;

/* Styles */
background: linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
}

/* Small flash */
.form-3:before {
/* Size and position */
content: «»;
width: 8px;
height: 5px;
position: absolute;
left: 34%;
top: -7px;

/* Styles */
border-radius: 50%;
box-shadow: 0 0 6px 4px #fff;
}

Наконец, наше отражение света. Но подождите, мы не имеем достаточно псевдо-элементов! Не волнуйтесь, мы будем использовать наш первый параграф для этого.

.form-3 p:nth-child(1):before{
/* Size and position */
content: «»;
width: 250px;
height: 100px;
position: absolute;
top: 0;
left: 45px;

/* Styles */
transform: rotate(75deg);
background: linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
pointer-events: none;
}

Важно: вы должны отключить события click при помощи свойства pointer-events. Если вы этого не сделаете, вы не сможете нажать на input, так как там будет слой поверх них. Мы будем вынуждены удалить отражения для браузеров, которые не поддерживают pointer-events (мы добавили соответствующий класс при помощи Modernizr):

.no-pointerevents .form-3 p:nth-child(1):before {
display: none;
}

Пример 4

Особенностью этой формы является отсутствие лэйблов или иконок. Да, я помню, что я говорил ранее, что нам необходимо иметь что-то, чтобы сообщить пользователям, что нужно вводить в то или иное поле. И у нас это есть! Мы будем использовать placeholders. А для браузеров, которые не поддерживают их, мы сделаем видимыми лэйблы!

Разметка

<form>
<h2>Форма входа</h2>
<p>
<label for=»login»>Логин или email</label>
<input type=»text» name=»login» placeholder=»Логин или email» required>
</p>
<p>
<label for=»password»>Пароль</label>
<input type=»password» name=’password’ placeholder=»Пароль» required>
</p>

<p>
<input type=»submit» name=»submit» value=»Продолжить»>
</p>
</form>

Обратите внимание на атрибут required. Этот атрибут позволяет браузеру, если он его поддерживает, проверять пустое поле или нет, и сабмитить форму если поле заполнено.

Важно: вы всегда должны добавлять серверную проверку после отправки формы. При помощи веб-инспектора или firebug-a очень легко удалить этот атрибут и JavaScript также может быть отключен, так что не полагайтесь только на валидацию стороне клиента.

CSS

Как всегда, начнем с формы и названия, так как это довольно просто.

.form-4 {
/* Size and position */
width: 300px;
margin: 60px auto 30px;
padding: 10px;
position: relative;

/* Font styles */
font-family: ‘Raleway’, ‘Lato’, Arial, sans-serif;
color: white;
text-shadow: 0 2px 1px rgba(0,0,0,0.3);
}

.form-4 h2 {
font-size: 22px;
padding-bottom: 20px;
}

Давайте перейдем к полям:

.form-4 input[type=text],
.form-4 input[type=password] {
/* Size and position */
width: 100%;
padding: 8px 4px 8px 10px;
margin-bottom: 15px;

/* Styles */
border: 1px solid #4e3043; /* Fallback */
border: 1px solid rgba(78,48,67, 0. 8);
background: rgba(0,0,0,0.15);
border-radius: 2px;
box-shadow:
0 1px 0 rgba(255,255,255,0.2),
inset 0 1px 1px rgba(0,0,0,0.1);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

/* Font styles */
font-family: ‘Raleway’, ‘Lato’, Arial, sans-serif;
color: #fff;
font-size: 13px;
}

Теперь изменим стили для placeholders (где это возможно):

.form-4 input::-webkit-input-placeholder {
color: rgba(37,21,26,0.5);
text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}

.form-4 input:-moz-placeholder {
color: rgba(37,21,26,0.5);
text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}

.form-4 input:-ms-input-placeholder {
color: rgba(37,21,26,0.5);
text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}

Далее, давайте добавим стили для состояний hover и focus:

.form-4 input[type=text]:hover,
.form-4 input[type=password]:hover {
border-color: #333;
}

.form-4 input[type=text]:focus,
.form-4 input[type=password]:focus,
.form-4 input[type=submit]:focus {
box-shadow:
0 1px 0 rgba(255,255,255,0.2),
inset 0 1px 1px rgba(0,0,0,0.1),
0 0 0 3px rgba(255,255,255,0.15);
outline: none;
}

/* Fallback */
.no-boxshadow .form-4 input[type=text]:focus,
.no-boxshadow .form-4 input[type=password]:focus {
outline: 1px solid white;
}

И кнопки отправки:

.form-4 input[type=submit] {
/* Size and position */
width: 100%;
padding: 8px 5px;

/* Styles */
background: linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));
border-radius: 5px;
border: 1px solid #4e3043;
box-shadow:
inset 0 1px rgba(255,255,255,0. 4),
0 2px 1px rgba(0,0,0,0.1);
cursor: pointer;
transition: all 0.3s ease-out;

/* Font styles */
color: white;
text-shadow: 0 1px 0 rgba(0,0,0,0.3);
font-size: 16px;
font-weight: bold;
font-family: ‘Raleway’, ‘Lato’, Arial, sans-serif;
}

.form-4 input[type=submit]:hover {
box-shadow:
inset 0 1px rgba(255,255,255,0.2),
inset 0 20px 30px rgba(99,64,86,0.5);
}

/* Fallback */
.no-boxshadow .form-4 input[type=submit]:hover {
background: #594642;
}

А теперь, давайте займемся запасным вариантом, на тот случай когда браузер не поддерживает placeholders.

.form-4 label {
display: none;
padding: 0 0 5px 2px;
cursor: pointer;
}

.form-4 label:hover ~ input {
border-color: #333;
}

.no-placeholder .form-4 label {
display: block;
}

Это очень просто, если placeholders не поддерживается, то будут видны лэйблы.

Пример 5

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

Разметка

Минималистичная разметка для минималистичного вида. 😉

CSS

.form-5 {
/* Size and position */
width: 300px;
margin: 60px auto 30px;
position: relative;

/* Styles */
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,0. 1), 0 3px 2px rgba(0,0,0,0.1);
}

Стили для параграфов и полей:

.form-5 p {
width: 70%;
float: left;
border-radius: 5px 0 0 5px;
border: 1px solid #fff;
border-right: none;
}

.form-5 input[type=text],
.form-5 input[type=password] {
/* Size and position */
width: 100%;
height: 50px;
padding: 0 10px;

/* Styles */
border: none; /* Remove the default border */
background: white; /* Fallback */
background: rgba(255,255,255,0.2);
box-shadow:
inset 0 0 10px rgba(255,255,255,0.5);

/* Font styles */
font-family: ‘Montserrat’, sans-serif;
text-indent: 10px;
color: #ee4c8d;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
font-size: 20px;
}

.form-5 input[type=text] {
border-bottom: 1px solid #fff; /* Fallback */
border-bottom: 1px solid rgba(255,255,255,0.7);
border-radius: 5px 0 0 0;
}

.form-5 input[type=password] {
border-top: 1px solid #CCC; /* Fallback */
border-top: 1px solid rgba(0,0,0,0.1);
border-radius: 0 0 0 5px;
}

Давайте попробуем применить некоторые стили при наведении мыши и стили для placeholders:

.form-5 input[type=text]:hover,
.form-5 input[type=password]:hover,
.form-5 input[type=text]:focus,
.form-5 input[type=password]:focus {
background: #f7def7; /* Fallback */
background: rgba(255,255,255,0.4);
outline: none;
}

.form-5 input::-webkit-input-placeholder {
color: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
font-family: ‘Handlee’, cursive;
}

.form-5 input:-moz-placeholder {
color: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
font-family: ‘Handlee’, cursive;
}

.form-5 input:-ms-input-placeholder {
color: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0. 4);
font-family: ‘Handlee’, cursive;
}

А теперь для кнопки отправки. Тег i будет содержать значок стрелки, но мы будем делать его видимым только при наведении курсора мыши. Обратите внимание, что мы используем тег span внутри кнопки, чтобы включить текст без включения кнопки.

.form-5 button {
/* Size and position */
width: 30%;
height: 102px;
float: left;
position: relative;
overflow: hidden;

/* Styles */
background:
url(../images/noise.png),
radial-gradient(ellipse at center, #ee4c8d 0%,#b53467 100%);
border-radius: 0 5px 5px 0;
box-shadow:
inset 0 0 4px rgba(255, 255, 255, 0.7),
inset 0 0 0 1px rgba(0, 0, 0, 0.2);
border: none;
border-left: 1px solid silver;
cursor: pointer;
line-height: 102px; /* Same as height */
}

.form-5 button i {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: -20px;
font-size: 64px;
line-height: 109px;
color: #8d1645;
opacity: 0;
text-shadow: 0 1px 0 rgba(255,255,255,0.4);
transition: all 0.2s ease-out;
}

.form-5 button span {
display: block;

/* Font styles */
color: #8d1645;
font-family: ‘Montserrat’, Arial, sans-serif;
font-size: 20px;
text-shadow: 0 1px 0 rgba(255,255,255,0.4);
transform: rotate(-90deg);
transition: all 0.2s linear;
}

В случае, если браузер не поддерживает свойство transform, текст просто не поворачивается. Ничего страшного.
Мы добавили тонкую текстуру для кнопки, применяя два фона: текстуру и радиальный градиент.

Теперь, давайте добавим стили для состояний hover, focus и active:

.form-5 button:focus {
outline: none;
}

.form-5 button:hover span,
.form-5 button:focus span {
opacity: 0;
transform: rotate(-90deg) translateY(-20px);
}

. form-5 button:hover i,
.form-5 button:focus i {
opacity: 0.5;
left: 0;
transition-delay: 0.2s;
}

/* Click on button */

.form-5 button:active span,
.form-5 button:active i {
transition: none;
}

.form-5 button:active span {
opacity: 0;
}

.form-5 button:active i {
opacity: 0.5;
left: 0;
color: #fff;
}

JavaScript

Мы используем код JavaScript для добавления поведения HTML5 placeholder для браузеров, которые не поддерживают его. Мы собираемся использовать jQuery плагин от Mathias Bynens. Смотрите на GitHub.

После подключения jQuery и скрипта, мы просто вызовем следующий код:

$(function(){
$(‘input, textarea’).placeholder();
});

И это будет добавить placeholder в старые браузеры.

И это все! Спасибо за чтение этого урока, надеюсь вам понравилось!

Скачать исходные файлы

Перевод статьи с http://tympanus.net/codrops/

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Форма авторизации и регистрации при помощи HTML5 и CSS3

В этом уроке мы собираемся создать две формы на HTML5, для авторизации и регистрации, которые будут переключаться между собой при помощи псевдо-класса CSS3 — :target. Идея этого урока в том, чтобы показать пользователю форму авторизации и предоставить ссылку для «переключения» на форму регистрации на этой же странице.

Обратите внимание, что эти примеры будут работать только в браузерах, которые поддерживают псевдо-класс :target, и вы не должны использовать этот код на действующем сайте без предоставления запасного варианта для старых браузеров.

В статье будет описание примера из Demo 1.

HTML-код

В HTML-коде, мы создадим две формы, при этом вторую скроем при помощи CSS. Вот код, я объясню некоторые интересные части позже.

<div >
<!— hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4 —>
<a></a>
<a></a>
<div>
<div>
<form action=»mysuperscript.php» autocomplete=»on»>
<h2>Log in</h2>
<p>
<label for=»username» data-icon=»u» > Your email or username </label>
<input name=»username» required=»required» type=»text» placeholder=»myusername or <span>Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в вашем браузере должен быть включен Javascript.</span><script type=’text/javascript’>
document.getElementById(‘cloakfe2ac8836f0119882bc2696c273dfdf1’).innerHTML = »;
var prefix = ‘ma’ + ‘il’ + ‘to’;
var path = ‘hr’ + ‘ef’ + ‘=’;
var addyfe2ac8836f0119882bc2696c273dfdf1 = ‘mymail’ + ‘@’;
addyfe2ac8836f0119882bc2696c273dfdf1 = addyfe2ac8836f0119882bc2696c273dfdf1 + ‘mail’ + ‘.’ + ‘com’;
var addy_textfe2ac8836f0119882bc2696c273dfdf1 = ‘mymail’ + ‘@’ + ‘mail’ + ‘.’ + ‘com’;document.getElementById(‘cloakfe2ac8836f0119882bc2696c273dfdf1’).innerHTML += ‘<a ‘ + path + ‘\» + prefix + ‘:’ + addyfe2ac8836f0119882bc2696c273dfdf1 + ‘\’>’+addy_textfe2ac8836f0119882bc2696c273dfdf1+'<\/a>’;
</script>»/>
</p>
<p>
<label for=»password» data-icon=»p»> Your password </label>
<input name=»password» required=»required» type=»password» placeholder=»eg. X8df!90EO» />
</p>
<p>
<input type=»checkbox» name=»loginkeeping» value=»loginkeeping» />
<label for=»loginkeeping»>Keep me logged in</label>
</p>
<p>
<input type=»submit» value=»Login» />
</p>
<p>
Not a member yet ?
<a href=»#tosubscribe»>Join us</a>
</p>
</form>
</div>

<div>
<form action=»mysuperscript. php» autocomplete=»on»>
<h2> Sign up </h2>
<p>
<label for=»usernamesignup» data-icon=»u»>Your username</label>
<input name=»usernamesignup» required=»required» type=»text» placeholder=»mysuperusername690″ />
</p>
<p>
<label for=»emailsignup» data-icon=»e» > Your email</label>
<input name=»emailsignup» required=»required» type=»text» placeholder=»<span>Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в вашем браузере должен быть включен Javascript.</span><script type=’text/javascript’>
document.getElementById(‘cloak875691859696d3996d5e298e3751b3f1’).innerHTML = »;
var prefix = ‘ma’ + ‘il’ + ‘to’;
var path = ‘hr’ + ‘ef’ + ‘=’;
var addy875691859696d3996d5e298e3751b3f1 = ‘mysupermail’ + ‘@’;
addy875691859696d3996d5e298e3751b3f1 = addy875691859696d3996d5e298e3751b3f1 + ‘mail’ + ‘.’ + ‘com’;
var addy_text875691859696d3996d5e298e3751b3f1 = ‘mysupermail’ + ‘@’ + ‘mail’ + ‘.’ + ‘com’;document.getElementById(‘cloak875691859696d3996d5e298e3751b3f1’).innerHTML += ‘<a ‘ + path + ‘\» + prefix + ‘:’ + addy875691859696d3996d5e298e3751b3f1 + ‘\’>’+addy_text875691859696d3996d5e298e3751b3f1+'<\/a>’;
</script>»/>
</p>
<p>
<label for=»passwordsignup» data-icon=»p»>Your password </label>
<input name=»passwordsignup» required=»required» type=»password» placeholder=»eg. X8df!90EO»/>
</p>
<p>
<label for=»passwordsignup_confirm» data-icon=»p»>Please confirm your password </label>
<input name=»passwordsignup_confirm» required=»required» type=»password» placeholder=»eg. X8df!90EO»/>
</p>
<p>
<input type=»submit» value=»Sign up»/>
</p>
<p>
Already a member ?
<a href=»#tologin»> Go and log in </a>
</p>
</form>
</div>

</div>
</div>

Мы использовали некоторые из возможностей HTML5. Поле с type=email позволяет браузеру проверить, ввел ли пользователь правильный адрес электронной почты. Мы также использовали атрибут require=required, браузеры, которые поддерживают этот атрибут, не позволят пользователю отправить форму пока это поле не будет заполнено, без использования JavaScript. Атрибут autocomplete=on позволяет заполнять значения, основываясь на ранее введенных пользователем данных.

Теперь два сложных момента. Вы могли заметить две <a href> ссылки в верхней части формы. Это маленькая хитрость, которая позволит вести себя нашей форме правильно, и не «прыгать» на длинных страницах, когда мы нажимаем на ссылку переключения и вызываем псевдо-класс :target.

Вторая маленькая хитрость связана с использованием шрифта с иконками. Мы будем использовать data-attribute для отображения иконок. Установив data-icon=”icon_character” с соответствующим символом в HTML, нам теперь нужно только одно CSS правило для всех значков. Узнайте больше об этой технике здесь: 24 Ways: Displaying Icons with Fonts and Data- Attributes.

CSS

В этой статье, для чистоты кода, я буду опускать все префиксы браузеров, но вы, конечно, можете найти их в исходных файлах. Итак, давайте начнем.

Стили для формы, используя CSS3

Во-первых, давайте зададим нашим формам некоторые общие стили.

#subscribe,
#login{
position: absolute;
top: 0px;
width: 88%;
padding: 18px 6% 60px 6%;
margin: 0 0 35px 0;
background: rgb(247, 247, 247);
border: 1px solid rgba(147, 184, 189,0.8);
box-shadow:
0pt 2px 5px rgba(105, 108, 109, 0.7),
0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
border-radius: 5px;
}
#login{
z-index: 22;
}

Мы добавили симпатичную тень, которая состоит из двух теней: внутренней, для создания внутреннего голубого свечения, и внешней тени

Теперь зададим стили для текста:

/**** общие стили для текста ****/
#wrapper h2{
font-size: 48px;
color: rgb(6, 106, 117);
padding: 2px 0 10px 0;
font-family: ‘FranchiseRegular’,’Arial Narrow’,Arial,sans-serif;
font-weight: bold;
text-align: center;
padding-bottom: 30px;
}

/** На данный момент только webkit поддерживает background-clip:text; */
#wrapper h2{
background:
-webkit-repeating-linear-gradient(-45deg,
rgb(18, 83, 93) ,
rgb(18, 83, 93) 20px,
rgb(64, 111, 118) 20px,
rgb(64, 111, 118) 40px,
rgb(18, 83, 93) 40px);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}

#wrapper h2:after{
content:’ ‘;
display:block;
width:100%;
height:2px;
margin-top:10px;
background:
linear-gradient(left,
rgba(147,184,189,0) 0%,
rgba(147,184,189,0. 8) 20%,
rgba(147,184,189,1) 53%,
rgba(147,184,189,0.8) 79%,
rgba(147,184,189,0) 100%);
}

Обратите внимание, что на данный момент только webkit-браузеры поддерживают background-clip:text, так что мы будем здесь создавать обрезанный фон только для webkit.

Мы также создали исчезающую линию под заголовком с помощью псевдо-класса :after. Мы используем градиент с высотой 2px и изменяем непрозрачность фона до 0 на обоих концах.

Теперь давайте определим стили для полей формы, чтобы они приятнее выглядели.

/**** advanced input styling ****/
/* placeholder */
::-webkit-input-placeholder {
color: rgb(190, 188, 188);
font-style: italic;
}
input:-moz-placeholder,
textarea:-moz-placeholder{
color: rgb(190, 188, 188);
font-style: italic;
}
input {
outline: none;
}

Мы удалили контур (outline) для полей. Но имейте ввиду: контур позволяет пользователю понять какое поле активное на текущий момент. Поэтому, если вы убираете его, то нужно определить стили для псевдо-классов :active и :focus.

/* all the input except submit and checkbox */
#wrapper input:not([type=»checkbox»]){
width: 92%;
margin-top: 4px;
padding: 10px 5px 10px 32px;
border: 1px solid rgb(178, 178, 178);
box-sizing : content-box;
border-radius: 3px;
box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
transition: all 0.2s linear;
}
#wrapper input:not([type=»checkbox»]):active,
#wrapper input:not([type=»checkbox»]):focus{
border: 1px solid rgba(91, 90, 90, 0.7);
background: rgba(238, 236, 240, 0.2);
box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
}

Здесь мы использовали псевдо-класс :not, задали стили для всех полей, за исключением checkbox.

А теперь самое интересное: шрифт со значками. Поскольку мы не можем использовать псевдо-классы :before и :after в input-ах, мы сделаем небольшую хитрость: мы добавим значок в label, а затем поместить его в input. Я использую библиотеку fontomas, которая содержит множество хороших иконок. Вы можете сами сопоставить иконки с нужной буквой. Помните атрибут data-icon? Именно в него нужно вставить букву. Я использовал data-icon=’u’ для логина, ‘e’ — для электронной почты, ‘p’ — для пароля. После того как я выбрал буквы, я скачал шрифт и использовал fontsquirrel font generator, для конвертации в совместимый формат для @font-face.

@font-face {
font-family: ‘FontomasCustomRegular’;
src: url(‘fonts/fontomas-webfont.eot’);
src: url(‘fonts/fontomas-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘fonts/fontomas-webfont.woff’) format(‘woff’),
url(‘fonts/fontomas-webfont.ttf’) format(‘truetype’),
url(‘fonts/fontomas-webfont.svg#FontomasCustomRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

/** the magic icon trick ! **/
[data-icon]:after {
content: attr(data-icon);
font-family: ‘FontomasCustomRegular’;
color: rgb(106, 159, 171);
position: absolute;
left: 10px;
top: 35px;
width: 30px;
}

Да, нам не нужно создавать класс для каждого значка. Мы использовали content: attr(data-icon), чтобы получить букву с атрибута data-icon, так что мы только должны объявить шрифт, выбрать хороший цвет и его позицию.

Теперь давайте стилизуем кнопку отправки для обоих форм.

/*стили для submit buttons */
#wrapper p.button input{
width: 30%;
cursor: pointer;
background: rgb(61, 157, 179);
padding: 8px 5px;
font-family: ‘BebasNeueRegular’,’Arial Narrow’,Arial,sans-serif;
color: #fff;
font-size: 24px;
border: 1px solid rgb(28, 108, 122);
margin-bottom: 10px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
border-radius: 3px;
box-shadow:
0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
0px 0px 0px 3px rgb(254, 254, 254),
0px 5px 3px 3px rgb(210, 210, 210);
transition: all 0. 2s linear;
}
#wrapper p.button input:hover{
background: rgb(74, 179, 198);
}
#wrapper p.button input:active,
#wrapper p.button input:focus{
background: rgb(40, 137, 154);
position: relative;
top: 1px;
border: 1px solid rgb(12, 76, 87);
box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
}
p.login.button,
p.signin.button{
text-align: right;
margin: 5px 0;
}

Затем мы зададим стили для checkbox-a, здесь ничего особенного нет:

/* styling the checkbox «keep me logged in»*/
.keeplogin{
margin-top: -5px;
}
.keeplogin input,
.keeplogin label{
display: inline-block;
font-size: 12px;
font-style: italic;
}
.keeplogin input#loginkeeping{
margin-right: 5px;
}
.keeplogin label{
width: 80%;
}

Зададим стили для нижней части формы, с помощью повторяющихся линейных градиентов создадим полосатый фон.

p.change_link{
position: absolute;
color: rgb(127, 124, 124);
left: 0px;
height: 20px;
width: 440px;
padding: 17px 30px 20px 30px;
font-size: 16px ;
text-align: right;
border-top: 1px solid rgb(219, 229, 232);
border-radius: 0 0 5px 5px;
background: rgb(225, 234, 235);
background: repeating-linear-gradient(-45deg,
rgb(247, 247, 247) ,
rgb(247, 247, 247) 15px,
rgb(225, 234, 235) 15px,
rgb(225, 234, 235) 30px,
rgb(247, 247, 247) 30px
);
}
#wrapper p.change_link a {
display: inline-block;
font-weight: bold;
background: rgb(247, 248, 241);
padding: 2px 6px;
color: rgb(29, 162, 193);
margin-left: 10px;
text-decoration: none;
border-radius: 4px;
border: 1px solid rgb(203, 213, 214);
transition: all 0.4s linear;
}
#wrapper p.change_link a:hover {
color: rgb(57, 191, 215);
background: rgb(247, 247, 247);
border: 1px solid rgb(74, 179, 198);
}
#wrapper p. change_link a:active{
position: relative;
top: 1px;
}

Теперь, как вы можете видель, у нас есть две симпатичных формы, но нам нужно видеть одновременно только одну из них на экране. Поэтому сейчас самое время для создания анимации!

Создание анимации

Первое, что нужно сделать, чтобы скрыть вторую форму, установить непрозрачность (opacity) равную 0:

#register{
z-index: 21;
opacity: 0;
}

Помните, что наша форма авторизации имела z-index: 22? Мы зададим второй форме z-index:21, поместим её «под» форму авторизации.

А теперь самая интересная часть: переключение формы с использованием псевдо класса :target. Мы будем использовать якоря, чтобы сделать переход. Нормальное поведение якоря — это прыжок на определенный элемент страницы. Но мы не хотим куда-либо «прыгать», мы только хотим «переключить» форму. И тут приходит на помощь наш трюк с использованием двух ссылок в начале страницы. Вместо того, чтобы направить нас ко второй форме, рискуя испытать эффект “прыжка”, мы зададим ссылкам параметр display: none. Это поможет избежать прыжков. Я нашел этот трюк тут: CSS3 create (на французском).

#toregister:target ~ #wrapper #register,
#tologin:target ~ #wrapper #login{
z-index: 22;
animation-name: fadeInLeft;
animation-delay: .1s;
}

Итак, что происходит когда мы нажимаем на кнопку Join us, мы переходим на #toregister. Затем мы создаем анимацию, с помощью селектора ~ находим наш элемент #register. Мы используем анимацию, которую называют fadeInLeft. Так как мы «скрываем» форму, используя нулевую прозрачность, мы будем использовать анимацию, которая блекнет, чтобы форма появилась. Мы также изменили z-index, чтобы форма появилась поверх другой формы.
То же самое происходит и для другой формы.

А вот код для анимации. Мы используем CSS3 animation framework от Dan Eden и адаптировали его для этого урока.

.animate{
animation-duration: 0.5s;
animation-timing-function: ease;
animation-fill-mode: both;
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20px);
}

100% {
opacity: 1;
transform: translateX(0);
}
}

Форма, которая «исчезает» будет иметь другую анимацию, которая будет исчезать слева:

#toregister:target ~ #wrapper #login,
#tologin:target ~ #wrapper #register{
animation-name: fadeOutLeftBig;
}

@keyframes fadeOutLeft {
0% {
opacity: 1;
transform: translateX(0);
}

100% {
opacity: 0;
transform: translateX(-20px);
}
}

Теперь Вы можете использовать другие анимации из animate.css: просто настройте класс .animate, и замените название анимации.

Ну, вот и все. Надеюсь, вам понравился урок!

Обратите внимание, что в некоторых браузерах background-clip: text не поддерживается. В Internet Explorer 9 переходы и анимация не работают, так что не будет переключения формы. В Internet Explorer 8 и ниже псевдо-класс :target не поддерживается, поэтому он не будет работать вообще (вы увидите только форму авторизации).

Демонстрация

Скачать исходные файлы

Перевод статьи с tympanus.net/codrops

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

50 бесплатных HTML5 и CSS3 форм входа для вашего сайта

Автор: Елизавета Гуменюк Рейтинг топика: +1 Просто люблю писать, переводить и давать людям возможность читать интересный контент. И пусть я не всегда идеальна — есть к чему стремиться!!!

Формы входа присутствуют повсюду в Интернете. Вы пользуетесь социальными сетями? Необходимо зайти через форму входа. У вас есть электронная почта? Вы вступили в какое-либо сообщество или форум? Вы хотите оставить комментарий на сайте WordPress? Чтобы получить доступ к чему-нибудь в Интернете, скорее всего, вам придется пройти через процесс входа в систему. Вам, вероятно, придется сначала зарегистрироваться или оставить какую-то информацию о себе, а затем использовать форму входа, чтобы совершить какое-либо действие онлайн.

Так почему формы входа нужно делать с помощью HTML и CSS? Это две существенные части.

HTML — это стандартный язык разметки, используемый для создания веб-страниц. HTML-элементы являются строительными блоками всех веб-сайтов.

CSS — это язык, используемый для описания внешнего вида и форматирования документа, написанного с использованием языка разметки. Такого как HTML.

Мы используем HTML для создания веб-сайта и CSS, чтобы он выглядел красиво. Это то, с чем большинство пользователей сталкиваются в интернете.

Мы составили список из 50 бесплатных форм входа, которые можно использовать на вашем сайте WordPress, в блоге, на форуме или где-нибудь еще. Каждая форма была тщательно протестирована, чтобы гарантировать, что присутствуют все компоненты, а исходный код доступен с каждой загрузкой. Конечно, вы можете использовать эти формы для личных и коммерческих целей, без необходимости атрибуции.

Creative Login Form

Простая, но креативная форма входа, созданная с использованием HTML5 и CSS3. Эта форма может быть также использована, как форма регистрации. Это наш любимый шаблон в этом списке благодаря своей гибкости и подобия.

DropDown Login Form

Форма будет скрыта, пока вы не нажмете на опцию “Вход”. Действительно отличная возможность для современных веб-сайтов, которые хотят избежать создания отдельной страницы для форма входа. Таким образом, вы можете отобразить форму в любом месте на вашем сайте с помощью этого мощного инструмента.

Floating Sign Up Form

Дизайн для формы регистрации, использующей вкладки и плавающую форму меток.

Simple Login Form

Эта форма стала очень популярной, благодаря своей простоте и аккуратному дизайну.

Flat Login – Sign Up Form

После нажатия кнопки “Click me” в верхнем правом углу, вы получите плавную анимацию, которая превращает эту форму для входа в форму регистрации.

Login With Self-Contained SCSS Form

Это форма с автономным SCSS. Расширение CSS, которое добавляет силу и элегантность основному языку, что позволяет использовать различные опции и элементы.

Facebook Login

Это простая форма Facebook, которая с легкостью может быть импортирована в ваш сайт.

Animated Login Form

Это на самом деле анимированная форма входа, с надписью вверху “Эй ты, входи уже” трансформируется в поля для входа внизу формы.

Login Form Using CSS3 And HTML5

Это пример того, как создать простую регистрационную форму с помощью HTML5 и CSS3. Форма использует псевдо элементы (:after и :before), чтобы создать многостраничный эффект. Эти элементы поворачиваются с помощью свойства преобразования CSS3. Эта форма использует HTML5, чтобы сделать более простой подачу и валидацию.

iPhone Login Template

Творческий способ, чтобы продемонстрировать форму входа на iPhone.

Login With Shake Effect

После того, как вы ввели неверный пароль в этой форме, отличный эффект дрожания предупредит вас о том, что вы ввели неправильный пароль. Простое и эффективное решение, которое будет указывать на проблему неправильных паролей.

Boxy Login Form

Квадратная форма входа с небольшим сюрпризом. Попробуйте “admin” в качестве имени пользователя и “1234” в качестве пароля для полноценного опыта.

Animated Login Form

Изящная форма входа. Как только вы нажмете на “Вход” на левой стороне, эффект анимации создает аккуратную форму входа справа. Определенно уникальный подход!

Elegant Login

Material Design Form

Bootstrap Snippet Form

Login With Flat UI

Trendy UI Kits Form

Flat Login With Flat Design

Dashboard CSS3 HTML5 Form

Login With Recovery Form

Flat Login Form

Transparent Login

Login With Google Chrome Extension

Elegant Flat Form

Stylized Login Form

jQuery Animated Sliding Login Form

Responsive Login

Transparent Form

Login With Social Integration

Show And Hide Password Form Example

Log ‘N Load Animated Form

Flat Modern Login Form

Flat CSS3 Form With Animated Background

CSS3 Cloud Animated Background Form

My Login Form

Simple Form For Inspiration

CSS3 Form With Logo

CSS3 Form With Shadow

Flat UI Form V2

Simple Login Widget

Fancy Login Form

Green And Yellow Form

Simple Form With Spinning Loader

Material Shadow Form

Password Protected Form

Paper Login CSS3 Form

Bootstrapped Twitter Login Form

Transparent Form With Logo

Modern Login Form

Источник

Элегантная форма авторизации с использованием CSS3

Продолжаю делиться версткой элементов интерфейса для сайтов. Как и в своей предыдущей статье, я взял интересный пример с сайта PremiumPixels.com и сверстал его, используя CSS3. На этот раз это форма авторизации.

В дизайне этой формы используются приятные нежные цвета, поэтому выглядит она действительно элегантно. Глядя на подобную красоту, у меня всегда возникает мысль о том, как же здорово быть дизайнером и уметь вытворять такие вещи.

Я для себя уже нашел применение этой формы. Если и вам она тоже понравилась, то вы также можете использовать ее на своих сайтах. Далее в статье, пройдя по соответствующим ссылкам, вы найдете необходимый исходный код.

Примеры

Для удобства вы можете посмотреть живой пример сверстанной формы на сайте jsFiddle, либо скачать код архивом по следующей ссылки:

Особенности

В верстке данной формы используется всего одно изображение – для фона страницы. Хотя и оно не обязательно. Возможности CSS3 позволили обойтись без изображения при создании кнопки.
Максимально приближенно к исходному дизайну форма выглядит в правильных браузерах: Opera, Firefox, Chrome, Safari (исключение составляет лишь больший радиус закругления у внешней обводки полей ввода). Есть некоторые недочеты в IE9 (некорректные закругления углов полей ввода, отсутствие градиента у кнопки). Ну а если смотреть в более ранних версиях IE, то, как обычно, всей красоты мы лишаемся. Конечно, при желании в IE кнопку можно сделать изображением.
Широкая обводка, которая присутствует у полей ввода помимо бордюра, реализована с помощью свойства box-shadow. В связи с особенностью этого свойства, радиус закругления получился больше, чем на исходном дизайне, но, я думаю, это не портит картину.

Пользуйтесь на здоровье.

* * *

На специализированном сайте представлены материалы по css html для чайников. Рассматриваются различные практичные примеры, а также публикуются советы и рекомендации для новичков в html-верстке.

Форма авторизации html css

Так почему формы входа нужно делать с помощью HTML и CSS? Это две существенные части.

Дизайн для формы регистрации, использующей вкладки и плавающую форму меток.

Эта форма стала очень популярной, благодаря своей простоте и аккуратному дизайну.

Это простая форма Facebook, которая с легкостью может быть импортирована в ваш сайт.

Творческий способ, чтобы продемонстрировать форму входа на iPhone.

Dashboard CSS3 HTML5 Form

CSS / CSS3
Flexbox CSS
JavaScript

JavaScript с нуля
JS и Jquery

Уроки по 1С-Битрикс

Контент менеджер

Авторизация на сайте

Элементы управления

Работа с информацией

Управление структурой

Сайт на 1С-Битрикс

Создание landing page

Видео новости

Модули расширений

Расширения и плагины

Bootstrap

ПОДПИСКА на УРОКИ

Бесплатные ВИДЕО-УРОКИ

В данном разделе Вашему вниманию предлагаются бесплатные видео уроки по «Управлению сайтом» на платформе 1С БИТРИКС, HTML, CSS и многое другое. Вы сможете пройти видео-обучение на БИТРИКС, узнать новые возможности в Веб-разработке и научится чему то новому. Сможете самостоятельно использовать платформу cms битрикс и разобраться в HTML, CSS, PHP и т.д.

Уроки не только освещают теорию, но и имеют практически примеры, которые будет полезны начинающему разработчику!

7 урок: Описание в description (1C-Bitrix)

Мы с вами написали общий план и далее с чего начать разработать компонент в 1С-Битрикс? Первым делом нужно отобразить компонент в виртуальном дереве редактора. Как это сделать? Смотрите в данном обучающем видео по описанию компонента в файле .descrip.

Денис Горелов 08.10.2018 Создание сайта Урок: 7 Просмотров: 1357

6 урок: План разработки компонента 1С-Битрикс

После того как установили 1С-Битрикс, внедрили в него HTML шаблон верстки сайта который писали сами или скачали с сети. Что делать дальше? Ведь сайт у нас отображается и перед нами стоит вопрос какой дальнейший план работ нужно провести. Так вот, в д.

Денис Горелов 03.10.2018 Создание сайта Урок: 6 Просмотров: 1121

5 урок: Устанавливаем наш ШАБЛОН в 1С-Битрикс

В данном выпуске покажу как зарегистрировать бесплатно Хостинг на 93 дня. Проведем его предварительную настроем под 1С-Битрикс, затем установим на него саму CMS и далее перенесем в нее шаблон из предыдущего урока с данной рубрики.

Денис Горелов 03.10.2018 Создание сайта Урок: 5 Просмотров: 2191

(УРОК — 3) Файловая структура простого компонента

Третий урок из видеокурса «Программирование: Новый взгляд на 1С-Битрикс». В нем разберем более подробно файловую структуру компонентов. Познакомимся с содержанием таких файлов, как component, parameters, #description и разберем структуру фа.

Денис Горелов 20.09.2018 1С-Битрикс Урок: 3 Просмотров: 455

(УРОК-2) Размещение и подключение компонента

Второй урок из видеокурса «Программирование: Новый взгляд на 1С-Битрикс». Тут рассмотрим, где компоненты размещаются в 1С-Битрикс. Как строится их наименование и что такое пространство имен. Как устанавливать компонент на странице, а также .

Денис Горелов 20.09.2018 1С-Битрикс Урок: 2 Просмотров: 1725

(УРОК-1) Введение. Что такое компоненты?

Первый урок из видеокурса «Программирование: Новый взгляд на 1С-Битрикс». В данном уроке познакомимся с компонентами и их видами. Рассмотрим принцип работы системы 1С-Битрикс, какие задачи компоненты выполняют в ней. Какие виды компонентов .

Денис Горелов 18.09.2018 1С-Битрикс Урок: 1 Просмотров: 902

Вывод СВОЙСТВ из инфоблока в 1С-БИТРИКС

Данный выпуск посвящен CMS 1С Битрикс. В нем разберем, как добавлять свои свойства к инфоблоку, и выводить их на страницу сайта. Практически вся информация отображаемая на сайте представлена при помощи компонентов, с помощью их мы выводим информацию .

Денис Горелов 03.08.2018 1С-Битрикс Просмотров: 2685

FORM — Анимация на transform (урок #7)

Это заключительный седьмой урок из серии уроков по форме. В нем закрепляем работу с псевдоэлементами, которые проходили в предыдущих уроках и на базе их, реализуем эффект анимированной обводки у социальных иконок.

Денис Горелов 16.06.2018 CSS и CSS3 Урок: 7 Просмотров: 1562

FORM — анимация ЧЕКБОКСА (урок #6)

Это шестой урок по форме. В нем разбираем эффект анимирующего чекбокса, который сделаем при помощи одного псевдо элемента ::before и далее при помощи transform придадим ему динамику по нажатию на текст.

Денис Горелов 25.05.2018 CSS и CSS3 Урок: 6 Просмотров: 860

FORM — ::before и ::after (урок #5)

Это пятый урок по Form, в данном видео разберем псевдоэлементы ::before и ::after, рассмотрим как с ними можно работать, для чего они нужны, а затем при помощи их реализуем эффект по наведению у кнопки.

Не будет преувеличением сказать, что более половины всех существующих сайтов имеют форму для авторизации или регистрации. При желании, можно модернизировать, улучшить любую форму. Достаточно знать HTML, CSS и немного JavaScript.

Сегодня хотел поделиться своей подборкой красивых форм. Они могут стать прекрасным стартом для создания ваших, оригинальных web-элементов. В эту коллекцию попали наиболее удачные на мой взгляд формы. Они просты для установки, имеют большое разнообразие «свистелок», легко впишутся в адаптивную верстку, и просто эффектно смотрятся. Представленные формы соответствуют разным стилям: плоские, объемные, и ряд других. Все же, лучше один раз увидеть, чем 100 раз услышать.

lenchv/RegistrationForm: Форма регистрации и авторизации пользователя, MySQL, JS, PHP, AJAX

GitHub — lenchv/RegistrationForm: Форма регистрации и авторизации пользователя, MySQL, JS, PHP, AJAX

Форма регистрации и авторизации пользователя, MySQL, JS, PHP, AJAX

Files

Permalink Failed to load latest commit information.

Type

Name

Latest commit message

Commit time

Форма регистрации и авторизации пользователя, MySQL, JS, PHP, AJAX.

После копирования на сервер директории registration-form, форма будет доступна по ссылке <название сайта>/registration-form. Также файлы с директории registration-form можно положить куда угодно на сервер, и форма будет доступна по соответствующей ссылке. Т.е. форма не завязана по абсолютному пути.

db.sql — дамп базы данных mysql.

Структура файлов:

css/ — файлы стилей
reset.css — сбрасывает все стандартные стили элементов
style.css — главный файл стилей формы и страницы пользователя
img/ico — используемые пиктограммы
js/ — java script файлы
main.js — содержит javascript управления регистрационной формой
php/language/ — файлы содержащие языковые конфиги
en.php, ru.php — английский и русский конфиги, соотвтетственно, состоят из ассоциативного массива, описывающего выводимые надписи на странице.
model/ — файлы обработки данных
validation.php — файл содержит класс, который проверяет введенные пользователем данные в регистрационной форме, и взводит флаги ошибок, в случае если что-то введено неверно, также, здесь же происходит обработка введенных данных.
Database.php — абстрактный класс для работы с базой данных.
MyDatabase.php — класс, наследуемый от Database, содержит методы для работы с базой данных mydb
view/ — файлы отображения
header.php — заголовочный файл, содержит доктайп, тайтл, подключение стилей.
lang-switch.php — файл содержит переключатель языка.
registration-form.php — формы регистрации и авторизации.
user.php — страница пользователя.
footer.php — подвал сайта.
uploads/img — файлы с изображениями пользователей.

index.php — главный файл, который выводит на страницу необходиымую информацию.
register.php — скрипт обработки регистрации.
auth.php — скрипт авторизации.
city.php — скрипт вывода списка городов из базы данных.

About

Форма регистрации и авторизации пользователя, MySQL, JS, PHP, AJAX

Resources

You can’t perform that action at this time. You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Ваша первая HTML форма — Изучение веб-разработки

Первая статья в данной главе предоставит вам первый опыт создания веб-форм, в том числе проектирование простой формы, её реализацию с использованием HTML-элементов управления формой и других HTML-элементов, добавление стилей через CSS и описание того, как данные из формы отсылаются на сервер. Мы более подробно остановимся на каждой из этих подтем далее в статье.

Необходимые знания:	Базовое представление о компьютерах и базовое понимание HTML.
Цель:	Ознакомиться с веб-формами, узнать, для чего они используются, как их проектировать, и какие базовые HTML-элементы могут понадобиться в простых ситуациях.

Веб-формы являются одним из основных элементов взаимодействия между пользователем и сайтом или приложением. Формы позволяют пользователю ввести данные, которые затем отправляются на сервер для их дальнейшей обработки и хранения или используются на стороне клиента для обновления интерфейса (например, добавление нового элемента в список или открытие и закрытие элемента интерфейса).

Веб-формы — их также часто называют HTML-формы — состоят из одного или нескольких элементов управления форм (иногда их также называют виджетами) и некоторых дополнительных элементов для структурирования формы. Элементами управления могут быть однострочные или многострочные текстовые поля, выпадающие списки, кнопки, чекбоксы, радиокнопки, большинство из которых создаются через html-элемент <input>, однако есть и другие элементы, о которых тоже стоит узнать.

В элементах управления форм можно задать правила, указывающие на определённый формат данных или значений, которые могут быть введены (валидация форм), а также к ним могут быть добавлены текстовые строки, описывающие эти элементы для зрячих и незрячих пользователей.

Перед тем, как начать программировать, всегда лучше остановиться и подумать о вашей форме. Создание быстрого наброска поможет определить верный набор данных, которые вы хотите получить от пользователя. С точки зрения UX, удобства использования интерфейса, важно помнить о том, что чем длиннее ваша форма, тем больше риск потерять пользователей. Сделайте форму краткой и лаконичной: спрашивайте только о той информации, которая вам действительно необходима.

Проектирование форм является важным этапом при создании сайта или приложения. Удобство использования форм (UX) выходит за рамки данной статьи, однако если вы хотите углубиться в эту тему, то вам следует прочитать следующие статьи:

В этой статье мы создадим простую контактную форму. Давайте сделаем набросок.

Наша форма будет состоять из трёх текстовых полей и одной кнопки. Мы узнаём у пользователя его имя, e-mail и сообщение, которое он хочет отправить. После нажатия на кнопку данные будут отправлены на веб-сервер.

Итак, теперь мы готовы обратиться к HTML и создать нашу форму. Для этого мы будем использовать следующие HTML-элементы: <form>, <label>, <input>, <textarea> (en-US) и <button>.

Прежде, чем продолжить, скопируйте простой HTML-шаблон — вы будете создавать свою форму внутри него.

Элемент

<form>

Создание форм начинается с элемента <form>:

<form action="/my-handling-form-page" method="post">

</form>

Этот элемент формально определяет форму. Он является элементом-контейнером, как HTML-элементы <div> или <p>, но при этом он поддерживает некоторые специфические атрибуты для настройки поведения формы. Все атрибуты являются опциональными, но в стандартной практике принято указывать атрибуты action и method:

Атрибут action определяет адрес, куда должны быть посланы данные после отправки формы.
Атрибут method указывает, какой HTTP-метод будет использован при передаче данных (это может быть «get» или «post»).

Теперь добавьте указанный выше код с элементом <form> внутрь тега <body> в вашем HTML.

Элементы

<label>, <input> и <textarea> (en-US)

Наша контактная форма несложная: часть, в которую будут вводиться данные, состоит из трёх текстовых полей, каждое их которых связано с HTML-элементом <label>:

Поле ввода для имени — single-line text field (en-US)
Поле ввода для e-mail — input of type email (en-US): однострочное текстовое поле, которое принимает только e-mail адреса.
Поле ввода для сообщения — <textarea> (en-US), многострочное текстовое поле.

В терминах HTML нам нужен код наподобие представленного ниже, чтобы добавить виджеты форм:

<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" name="user_name">
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" name="user_mail">
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea name="user_message"></textarea>
    </li>
  </ul>
</form>

Добавьте в вашу форму код, чтобы она выглядела так же, как форма выше.

Здесь элементы <li> используются для структурирования кода и облегчения стилизации (будет разобрано далее в статье). Для доступности и удобства использования мы указали определённый текст-подсказку для каждого элемента управления. Обратите внимание на использование атрибута for на каждом элементе <label>, который принимает в качестве значение id элемента управления формы, с которым он связан — этот подход позволяет привязать тексты-подсказки к форме.

Такой подход полезен тем, что позволяет пользователям с мышью, трекпадом и сенсорным устройством кликнуть на текст-подсказку для активации связанного с ним виджета формы, а также обеспечивает читабельное имя для пользователей скрин-ридеров. Вы найдёте более детальный разбор текстов-подсказок в статье Как структурировать HTML-форму.

В HTML-элементе <input> самым важным атрибутом является атрибут type. Этот атрибут чрезвычайно важен, потому что он определяет внешний вид и поведение элемента <input>. Вы найдёте больше информации об этом далее в статье Стандартные виджеты форм.

В нашем простом примере мы используем <input/text> (en-US) для первого поля ввода — значение по умолчанию для данного атрибута. Оно представляет однострочное текстовое поле, которое может принимать любые значения.
Для второго поля ввода мы используем тип <input/email> (en-US), который представляет собой однострочное текстовое поле, которое принимает в качестве значения корректно составленный e-mail адрес. Он делает простое текстовое поле «умным», позволяя проверять введённые пользователем данные на корректность. Также это позволяет открывать более подходящие для ввода e-mail адреса клавиатуры (например, с символом @ при базовой раскладке) на устройствах с динамической клавиатурой, таких как смартфоны. Вы найдёте более подробную информацию про валидацию форм далее в статье Валидация формы.

Последнее, но не менее важное, обратите внимание на разницу синтаксиса у HTML-элементов <input> и <textarea></textarea>. Это одна из странностей HTML. Тег <input> — это пустой элемент, то есть он не нуждается в закрывающем теге. <textarea> (en-US) — это непустой элемент, что говорит о том, что ему необходим закрывающий тег. Это важно при использовании одного из свойств форм: определения значения по умолчанию. Для определения начального значения для HTML-элемента <input> вам необходимо использовать атрибут value следующим образом:

<input type="text" value="по умолчанию в этом элементе находится этот текст" />

Если вы хотите определить значение по умолчанию для HTML-элемента <textarea> (en-US), вам просто нужно поместить это начальное значение между открывающим и закрывающим тегами:

<textarea>
по умолчанию в этом элементе находится этот текст
</textarea>

Элемент

<button>

Разметка нашей формы почти готова, но нам ещё необходимо добавить кнопку, которая позволит пользователю отправлять или «представлять» информацию после заполнения формы. Это делается с помощью HTML-элемента <button>. Необходимо добавить следующий код перед закрывающим тегом </form>:

<li>
  <button type="submit">Send your message</button>
</li>

HTML-элемент <button> также принимает атрибут type, который может быть равен одному из трёх значений: submit, reset или button.

Клик по кнопке submit (значение по умолчанию) отправляет данные из формы на страницу, определённую в атрибуте action элемента <form>.
Клик по кнопке reset сбрасывает значения всех элементов управления формы к их начальному значению. С точки зрения UX, это считается плохой практикой.
Клик по кнопке button не делает ничего! Звучит странно, но на самом деле это очень удобно использовать для создания собственных кнопок — вы можете определить их поведение через JavaScript.

Примечание: вы также можете использовать HTML-элемент <input> с соответствующим атрибутом type , чтобы создать кнопку: <input type="submit">. Главным преимуществом HTML-элемента <button> в сравнении с элементом <input> заключается в том, что <input> может принимать в себя только простой текст, в то время как <button> позволяет использовать весь HTML для создания более стилизованного текста внутри кнопки.

Теперь после того, как вы закончили писать HTML-код формы, сохраните его и откройте в браузере. Вы увидите, что на данный момент форма выглядит достаточно не красиво.

Красиво стилизовать формы достаточно сложно. Эта тема выходит за рамки этой статьи, поэтому на данный момент мы просто добавим некоторый CSS-код для приведения формы в нормальный вид.

Сначала необходимо добавить HTML-элемент <style> на вашу страницу внутрь тега head в HTML. Это должно выглядеть следующим образом:

<style>

</style>

Внутри тега стилей добавьте следующий код:

form {
  
  margin: 0 auto;
  width: 400px;
  
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

form li + li {
  margin-top: 1em;
}

label {
  
  display: inline-block;
  width: 90px;
  text-align: right;
}

input,
textarea {
  
  font: 1em sans-serif;

  
  width: 300px;
  box-sizing: border-box;

  
  border: 1px solid #999;
}

input:focus,
textarea:focus {
  
  border-color: #000;
}

textarea {
  
  vertical-align: top;

  
  height: 5em;
}

.button {
  
  padding-left: 90px; 
}

button {
  
  margin-left: .5em;
}

Теперь наша форма выглядит намного лучше.

Последняя и, наверно, самое сложное — это обработка данных формы на стороне сервера. HTML-элемент <form> определяет куда и каким способом отправить данные благодаря атрибутам action и method.

Мы определяем имя name для каждого виджета формы. Указание имён важно как для браузера, так и для сервера: браузер узнаёт, какие имена дать каждой части данных, а сервер может получить эти данные, обратясь к ним по заданному имени. Данные форму отправляются на сервер в виде пары имя/значение.

Чтобы переименовать данные, вам необходимо использовать атрибут name на каждом виджете формы, который будет собирать определённую часть информации. Давайте взглянем на код нашей формы ещё раз:

<form action="/my-handling-form-page" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" name="user_name" />
  </div>
  <div>
    <label for="mail">E-mail:</label>
    <input type="email" name="user_email" />
  </div>
  <div>
    <label for="msg">Message:</label>
    <textarea name="user_message"></textarea>
  </div>

  ...

В нашем примере форма отправит три куска данных с именами «user_name«, «user_email» и «user_message«. Эти данные будут отправлены на URL «/my-handling-form-page» через метод HTTP POST.

На стороне сервера скрипт, расположенный на URL «/my-handling-form-page» получит данные в виде списка из 3 элементов вида ключ/значение, содержащихся в HTTP-запросе. То, как скрипт будет обрабатывать данные, зависит от вас. Каждый язык серверного программирования (PHP, Python, Ruby, Java, C# и т.д.) имеет свой механизм обработки данных из формы. Эта тема выходит за рамки данной статьи, если вы хотите углубиться в неё, мы привели несколько примеров далее в статье Отправка данных формы.

Поздравляем! Вы создали свою первую HTML-форму. Вживую это выглядит так:

Однако это только начало — пришло время взглянуть глубже. HTML-формы намного мощнее, чем то, что мы видели здесь, и другие статьи этого раздела помогут освоить остальное.

Дополнительные темы

HTML-форма входа — javatpoint

Следующий код описывает, как создать отзывчивую форму входа в систему с помощью CCS:

Страница входа <стиль> Тело { семейство шрифтов: Calibri, Helvetica, sans-serif; цвет фона: розовый; } кнопка { цвет фона: # 4CAF50; ширина: 100%; оранжевый цвет; отступ: 15 пикселей; маржа: 10px 0px; граница: нет; курсор: указатель; } форма { граница: 3px solid # f1f1f1; } input [type = text], input [type = password] { ширина: 100%; маржа: 8px 0; отступ: 12 пикселей 20 пикселей; дисплей: встроенный блок; граница: 2 пикселя сплошного зеленого цвета; размер коробки: рамка-рамка; } button: hover { непрозрачность: 0.7; } .cancelbtn { ширина: авто; отступ: 10 пикселей 18 пикселей; маржа: 10px 5px; } .container { отступ: 25 пикселей; цвет фона: светло-голубой; }

Форма входа студента

<форма>

Имя пользователя: Пароль: Запомнить меня Забыли пароль?

Проверить это сейчас

Выход:

Как создать простую страницу входа с помощью HTML и CSS

Введение

HTML означает язык разметки гипертекста.Это самый важный язык разметки, который можно использовать для создания веб-страницы. Он используется для отображения текста, изображений, аудио и видео на веб-странице.

CSS означает каскадные таблицы стилей. Он используется для стилизации HTML-документов. CSS может создавать адаптивные веб-страницы и используется для стилизации и сбора правил форматирования. Используется в конструкторских целях. Расширение CSS — (.CSS).

Существует три типа CSS:

Встроенный CSS
Внутренний CSS
Внешний CSS

Шаг 1

Создайте новую папку и дайте имя для Папка.В папке сохраните файл HTML и CSS. После создания папок откройте превосходный текстовый редактор.

Шаг 2

Щелкните Файл, выберите новый файл и щелкните Сохранить. Дайте файлу имя «index.html».

Шаг 3

Затем щелкните Файл, затем Новый файл и щелкните Сохранить. Дайте файлу имя «style.css»

Step 4

Теперь свяжите HTML и CSS с файлом HTML, который вы только что скопировали, и вставьте этот код в тег заголовка:

Шаг 5

Затем создайте структуру для страницы входа, используя HTML, имя пользователя и пароль.

Форма входа
Страница входа
Имя пользователя
Пароль
< input type = "checkbox" id = "check">
Запомнить меня
Забыли пароль
< / form>

Шаг 6

Затем напишите код в CSS, чтобы применить некоторый стиль к HTML, чтобы вы могли изменить внешний вид страницы входа.

корпус
{
маржа: 0;
отступ: 0;
цвет фона: # 6abadeba;
семейство шрифтов: ‘Arial’;
}
.login {
width: 382px;
переполнение: скрыто;
маржа: авто;
маржа: 20 0 0 450 пикселей;
отступ: 80 пикселей;
фон: # 23463f;
border-radius: 15px;
}
h3 {
выравнивание текста: по центру;
цвет: # 277582;
отступ: 20 пикселей;
}
этикетка {
цвет: # 08ffd1;
размер шрифта: 17 пикселей;
}
#Uname {
width: 300px;
высота: 30 пикселей;
граница: отсутствует;
border-radius: 3px;
padding-left: 8px;
}
#Pass {
width: 300px;
высота: 30 пикселей;
граница: отсутствует;
border-radius: 3px;
padding-left: 8px;
}
#log {
width: 300px;
высота: 30 пикселей;
граница: отсутствует;
border-radius: 17px;
padding-left: 7px;
цвет: синий;
}
пролет {
цвет: белый;
размер шрифта: 17 пикселей;
}
a {
поплавок: правый;
цвет фона: серый;
}

Шаг 7

До использования кода CSS результат выглядел так:

После использования кода CSS результат выглядит следующим образом:

Сводка

Мы успешно создали страницу входа.Надеюсь, эта статья будет вам полезна. Если у вас есть какие-либо комментарии к этой статье, спрашивайте в разделе комментариев.

10 шаблонов страниц входа с открытым исходным кодом на основе HTML и CSS

Создание страницы быстрого входа может показаться не таким уж большим. В конце концов, это всего лишь форма и кнопка отправки.

Тем не менее, если вы углубитесь в различные страницы форм входа в систему, вы найдете массу дизайнерских идей. А если у вас есть несколько фрагментов кода для работы, вы можете быстро создавать страницы форм входа, не кодируя все это с нуля.

Эта коллекция предлагает 10 страниц входа с открытым исходным кодом, которые вы можете использовать и переформатировать для любого веб-проекта.

Панель инструментов веб-дизайнера

Неограниченное количество скачиваний: более 1 000 000 веб-шаблонов, тем, плагинов, ресурсов дизайна и многое другое!

1. Пользовательский интерфейс страницы входа

Разработчик

Халед Мнеймнех создал этот элегантный пользовательский интерфейс входа в систему с некоторыми базовыми свойствами CSS3.

Округлые поля ввода довольно просто воспроизвести, а эффект тени тоже не требует много строк кода.Все это может легко работать на любом веб-сайте, если отредактировать стили и цвета.

Но одна часть, которая выделяется мне, — это настраиваемый градиент в кнопке отправки. Это внимание к деталям.

2. Градиент формы

Тайлер Фрай разработал забавную градиентную страницу с темной формой входа в систему.

Больше всего мне здесь нравится более темный фон и то, как он отлично работает с более светлым текстом в форме.

Обычно дизайнеры придерживаются темно-серого фона для темных страниц, но этот выглядит фантастически, используя более темные оттенки в градиенте.

Даже поля ввода имеют немного стиля, когда вы фокусируетесь. Присмотритесь повнимательнее, и вы увидите, как тени появляются в фокусе.

3. Чистый HTML5

Форма входа в систему с бумажной стопкой — довольно распространенная техника для дизайнеров. В настоящее время мы наблюдаем это не так часто из-за популярности плоского дизайна.

Тем не менее, я до сих пор являюсь поклонником этого стиля, и именно поэтому эта HTML5-форма Владимира Бандуристова заслуживает похвалы. Он полностью работает в HTML и CSS с очень чистым дизайном ввода форм.

Но выделяется вся страница, и это дизайн, который вы можете добавить практически на любой веб-сайт.

Это может даже работать как шаблон для настраиваемой страницы входа в WordPress, если вы хотите зайти так далеко.

4. Показать / скрыть поле пароля

Базовый темный дизайн в этом фрагменте очень чистый и простой в использовании. Но главное даже не в этом.

Когда вы будете работать с формой, вы заметите, что в поле пароля есть кнопка «показать / скрыть». Обычно это используется в мобильных приложениях, поскольку там сложнее вводить пароли.

Но вы можете добавить эту функцию во все поля входа в систему, чтобы пользователям было спокойнее. Это поможет людям избежать ошибочного входа в систему, и это не проблема безопасности, если только кто-то не стоит прямо за экраном.

5. Чистая форма входа

Вот супер чистая синяя страница входа с великолепными эффектами градиента.

Поля ввода на самом деле имеют небольшое внешнее свечение со светлыми границами и более темным стилем текста. Все это просто невероятно профессионально, и я видел, что эта форма входа используется во всем, от стартапов до корпоративных веб-сайтов.

В целом, я большой поклонник этого дизайна с блестяще оформленным логином, который привлекает внимание любого человека.

6. Логин Apple Dev

Разработчик

Кристоф Молина создал это поле для входа в систему в стиле Apple, предназначенное для практической панели Apple Dev.

Это не то, что большинство пользователей Apple узнают или даже используют изо дня в день.

Но у него действительно сумасшедший стиль дизайна со скевоморфизмом и блестящей лентой заголовка.

Не говоря уже о том, что вся форма работает на чистом CSS, что само по себе является большим достижением.

7. Анимированная форма

Всегда весело добавлять анимацию в дизайн пользовательского интерфейса. Вот что предлагает эта форма с короткой анимацией формы на основе jQuery.

Его легко преобразовать в рабочее поле формы, даже если демонстрация мало что делает. Однако вы также можете обрабатывать вводимые пользователем данные непосредственно в jQuery, если это вам больше нравится.

В целом чертовски простой дизайн с непростой анимацией. Но это должно быть достаточно легко для репликации, если потребуется некоторое время для редактирования кода.

8. Темный вход

Темный дизайн пользовательского интерфейса не является нормой в сети. Но когда все сделано правильно, я лично считаю, что темные цвета намного привлекательнее.

Взгляните на эту темную форму входа, созданную Андреасом Стормом. Он использует ярко-салатовые цвета для кнопки входа и настраиваемого переключателя.

Это, пожалуй, одна из самых эстетичных форм во всем этом списке, но без особых ослепляющих особенностей.

Я настоятельно рекомендую протестировать это для любого темного веб-сайта .Он отлично подойдет как пользовательская страница входа или даже как форма, встроенная на ваш сайт.

9. Авторизация через модальную регистрацию

В настоящее время вы видите множество модальных окон входа и регистрации, все они работают на JavaScript. А этот от Энди Трана — всего лишь еще один пример хорошего дизайна, смешанного с отличным пользовательским интерфейсом.

Фон страницы чистый, а поля формы достаточно большие, чтобы быстро привлечь внимание. Но если вы щелкните маленькую синюю боковую панель справа, вы увидите окно регистрации.

Это отображается поверх формы входа, поэтому оно работает как обычное модальное окно. Довольно крутой эффект!

Требуется немного jQuery, но в целом это работает на 25 строках JS. Это впечатляет, учитывая невероятное удобство использования этой формы.

10. Минималистичный логин

Супер легкий и супер базовый — лучший способ описать эту легкую форму, разработанную Марчелло Африкано.

Это настоящая базовая страница, и сама форма также достаточно минималистична, чтобы вписаться в любой макет.Перо использует только HTML и CSS, так что вы можете получить этот рабочий без JavaScript, если не хотите бросать вызов ярким эффектам.

40 Бесплатная форма входа на HTML5 и CSS3 для вашего веб-сайта 2021

Формы входа есть повсюду в Интернете. Но теперь все формы входа в систему красивы и имеют хороший интерфейс, поэтому мы решили создавать эти логины из шаблонов и делиться ими бесплатно.

Вы пользуетесь социальными сетями? Вы должны пройти через какую-то форму входа в систему. У вас есть имейл? Вы участвовали в каких-либо форумах? Вы пробовали оставить комментарий на сайте WordPress? Чтобы получить доступ к чему-либо в Интернете, скорее всего, вам придется пройти какой-то процесс входа в систему.Вам, вероятно, придется сначала зарегистрироваться, зарегистрироваться или оставить какую-то информацию. Вам нужно будет использовать какую-то форму входа в систему, чтобы делать что-либо в Интернете.

Итак, какое отношение формы входа имеют к HTML и CSS? Оба они являются важными частями форм входа.

HTML (язык разметки гипертекста) — это стандартный язык разметки, используемый для создания веб-страниц. Элементы HTML являются строительными блоками всех веб-сайтов.

CSS (каскадная таблица стилей) — это язык, используемый для описания внешнего вида и форматирования документа, написанного на языке разметки.Такие как HTML!

Мы используем HTML для создания веб-сайта и CSS, чтобы он выглядел красиво. Это то, с чем сталкивается большинство пользователей при просмотре веб-страниц.

Мы составили список из 50 бесплатных дизайнов форм входа, которые вы можете использовать на своем сайте WordPress, в блоге, форуме или где-либо еще. Это список, подобранный Colorlib для обеспечения высочайшего качества форм. Каждая форма была тщательно протестирована, чтобы убедиться, что все компоненты отсутствуют, а исходный код доступен при каждой загрузке. Конечно, вы можете использовать эти формы в личных и коммерческих целях без указания авторства.

Изучите 2,5 миллиона цифровых активов, включая лучшие шаблоны WordPress 2021 года.

Более 2 миллионов элементов на крупнейшем в мире рынке шаблонов, тем и дизайнерских материалов HTML5. Будь то то, что вам нужно, или вы сразу после нескольких стоковых фотографий — все это можно найти здесь, на Envato Market.

СКАЧАТЬ СЕЙЧАС

Настройка входа в систему WordPress

Остальной список и формы входа на основе HTML / CSS, но здесь вы можете увидеть лучший плагин настройки входа в систему для WordPress.Он поставляется с несколькими определенными шаблонами, которые вы можете настроить в соответствии с дизайном вашего веб-сайта. Благодаря этому плагину вы, наконец, можете избавиться от утомительной страницы WordPress wp-admin и создать поистине уникальный опыт для себя и своих пользователей.

Скачать

Мы действительно искали в Интернете классные формы входа, но было сложно найти красивые формы. Поэтому мы решили попробовать их. Мы хотели бы представить 20 форм входа в систему, разработанных и разработанных командой Colorlib.

Форма входа 1 от Colorlib

Простая, креативная и яркая форма входа с градиентным фоном. Вы можете использовать его для любых целей, таких как веб-приложения, мобильные или настольные приложения. Но проявите творческий подход к нему, если хотите, так как вы можете легко настроить и настроить его в соответствии с вашей основной целью. Брендируйте это, если хотите.

Загрузить предварительный просмотр

Креативный дизайн формы входа в систему

Чистая, но креативная форма входа, созданная с использованием HTML5 и CSS3.Вы также можете использовать эту форму для регистрационной формы. Это наш любимый шаблон в этом списке, благодаря его гибкости и схожести, что позволяет создавать форму, которая точно соответствует вашему вкусу. Не только это, но и простота дизайна каждый раз выигрывает.

Скачать

Форма входа 2 от Colorlib

Минимальная и сложная форма входа от Colorlib с градиентной кнопкой с анимацией и логотипом. Используйте его, измените и сделайте прекрасным дополнением к вашему и без того отличному веб-пространству.Иногда вам нужно только немного творчества, чтобы оживить и улучшить общий опыт. Результат этой формы входа будет исключительным.

Предварительный просмотр

Форма входа 3 от Colorlib

Великолепная страница входа с фоновым изображением с тенью и полем формы градиента с эффектом наведения кнопки входа. Единственное ограничение, которое у вас есть, — это ваше воображение, поэтому расширьте кругозор и используйте Форму входа 3 в полную силу. Если вы ищете что-то другое, это прекрасная альтернатива — и она совершенно бесплатна!

Скачать предварительный просмотр

Форма входа 4 от Colorlib

Творчество не знает границ, как и Форма входа 4.Вот он, в вашем распоряжении, готов и настроен для того, чтобы вы могли загрузить его и использовать с пользой. Не беспокойтесь о быстродействии, поскольку инструмент работает без сбоев на всех устройствах, от карманного компьютера до настольного компьютера. Вы также можете активировать кнопки социальных сетей и связать их со своими процветающими учетными записями в социальных сетях.

Скачать предварительный просмотр

Форма входа 5 от Colorlib

Великолепная, чистая и современная форма с возможностью входа через Facebook или Google. У всех кнопок есть эффектный эффект наведения, который делает впечатление более ярким.Сложная, профессиональная и привлекательная форма входа в систему, которая вам ничего не стоит, но при этом результат будет очень премиальным. Сделайте его своим, настройте при необходимости или просто вставьте нестандартную версию.

Загрузить предварительную версию

Форма входа 6 от Colorlib

Если ваша страница уже супер аккуратная и аккуратная, форма входа не должна отличаться. Вот тот, который легко оправдает ваши ожидания, если минимализм — ваша чашка чая. Форма входа 6 настолько чиста, насколько это возможно, но в ней присутствует творческий подход, благодаря которому вовлеченность пользователей остается на рекордно высоком уровне.И теперь вы можете использовать его для своей формы входа, обслуживая своих пользователей во всем великолепии.

Скачать предварительный просмотр

Форма входа 7 от Colorlib

Форма с трехсторонней возможностью входа в учетную запись. Они предпочитают либо Facebook, либо Twitter, либо электронную почту, это тот тип инструмента, который вам нужно разместить на своей странице. А если у них еще нет учетной записи, вы также можете связать ее со своей страницей регистрации. Множество опций, чтобы сделать его максимально удобным для ваших пользователей.

Скачать превью

Форма входа 8 от Colorlib

Еще одна современная, модная и привлекательная форма входа с округленными элементами. Это особенно подходит для мобильных пользователей из-за его очень популярного в настоящее время стиля закругленных углов. Излишне говорить, что вы можете изменить цвета и заставить форму соответствовать вашим правилам брендинга до мельчайших деталей.

Загрузить предварительную версию

Форма входа 9 от Colorlib

Если вы не хотите использовать белый или сплошной цвет фона, вам следует рассмотреть эту страницу формы входа.Он не только поддерживает полный фон изображения, но также имеет наложение градиента и возможность входа в систему с помощью Facebook или Google. Короче говоря, дизайн очень привлекателен для глаз, с возможностью соответствовать вашему творческому потоку.

Скачать предварительный просмотр

Форма входа 10 от Colorlib

Несколько полная противоположность предыдущей — это Форма входа 10. Она почти не может быть более минималистичной, но в то же время сохраняет ощущение последней минуты. Всем минималистам лучше не пропустить этот, так как он легко интегрируется в ваш веб-сайт или приложение.

Загрузить предварительную версию

Форма входа 11 от Colorlib

С нашей коллекцией лучших форм входа в HTML5 и CSS3 вы сэкономите время и силы (в том числе деньги). Вместо того, чтобы создавать один с нуля, вот еще один готовый к использованию шаблон, который вы можете использовать. Хотя это не будет стоить вам ни цента, вы можете ожидать, что конечный продукт будет очень профессиональным и изысканным.

Предварительный просмотр

Форма входа 12 от Colorlib

Фон изображения с наложением синей тени, именем, изображением и обязательной формой; вот что случилось с формой входа 12.Также есть классный эффект наведения на кнопку входа в систему, который дает вам возможность связать его с вашей регистрационной формой для всех новых пользователей. Кроме того, макет очень отзывчивый, он работает на мобильных устройствах, как мечта.

Загрузить предварительный просмотр

Форма входа 13 от Colorlib

Форма регистрации с разделенным экраном, где две трети отведены под изображение, а одна треть — под форму. Это бесплатный инструмент, которым вы можете начать пользоваться прямо сейчас. Просто скачайте макет и работайте с ним на полную катушку.С помощью изображения и наложения градиента вы можете привлечь всеобщее внимание, заставив их заполнить форму еще быстрее.

Скачать предварительный просмотр

Форма входа 14 от Colorlib

В этой коллекции мы имеем смесь упрощенных и немного более сложных и продвинутых форм входа. Короче говоря, каждый найдет что-то для себя, и Форма входа 14 более минималистична. Но зачем вообще усложнять форму входа? Каждому свое. Станьте свидетелем плавной интеграции, которая требует быстрой реализации.

Загрузить предварительную версию

Форма входа 15 от Colorlib

Хотя все еще сводится к минимуму, одним интересным дополнением к форме входа 15 является баннер с изображением прямо над формой. С помощью этой небольшой функции вы можете сделать работу немного более увлекательной. Вы можете добавить любое изображение или даже логотип, оба варианта работают фантастически хорошо.

Загрузить предварительный просмотр

Форма входа 16 от Colorlib

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

Загрузить предварительный просмотр

Форма входа 17 от Colorlib

Чтобы сделать его более личным, этот шаблон формы входа в рамку лучше всего подходит для вас. У него есть сторона изображения и сторона формы, но сводится к минимуму, сохраняя при этом профессионализм. Вы можете дополнить форму любым изображением, которым хотите поделиться со своей аудиторией, показывая себя или демонстрируя свою работу.

Скачать предварительную версию

Форма входа 18 от Colorlib

Если вы хотите выделиться и сохранять оригинальность, рассмотрите возможность использования формы входа 18. В то время как некоторым нравятся супер базовые страницы входа, другие хотят иметь некоторые дополнительные преимущества, раскачивающие макет. И если вам нужно добавить картинку, то эта для вас. Он также поставляется с иконками социальных сетей и гарантирует полную гибкость.

Загрузить предварительную версию

Форма входа 19 от Colorlib

Яркая, энергичная и привлекающая внимание — вот что представляет собой следующая форма входа на основе HTML5 и CSS3.Он также полностью адаптивен и готов к работе с мобильными устройствами, а также совместим со всеми основными веб-браузерами. Сделайте его простым, но в то же время сделайте его заметным, это то, что вы можете ожидать от формы входа 19.

Загрузить предварительный просмотр

Форма входа 20 от Colorlib

Градиентный фон, черная кнопка входа с эффектом наведения, поля имени пользователя и пароля вместе с настраиваемым текстом и «Забыли пароль?» Раздел, да, это все часть формы входа 20. Звучит ошеломляюще, но на самом деле это далеко не так.Чтобы добавить всплывающую страницу входа, теперь вы знаете, где ее найти.

Загрузить предварительный просмотр

Выпадающая форма входа в систему

Форма скрыта, если вы не нажмете на опцию «Войти». Действительно отличная функция для современных веб-сайтов, которые хотят избежать отдельной страницы для формы входа. Вы можете отобразить форму в любом месте вашего веб-сайта с помощью этого мощного инструмента.

Скачать

Плавающая форма регистрации

Дизайн формы регистрации с использованием вкладок и ярлыков плавающей формы.

Скачать

Простая форма входа в систему

Изначально созданная для того, чтобы люди не могли заходить на сайт WordPress одного человека, она стала очень популярной благодаря своей простоте и аккуратному дизайну.

Скачать

Flat Login — Форма регистрации

После того, как вы нажмете кнопку «Click me» в правом верхнем углу, вы получите плавную анимацию, которая преобразует эту форму входа в форму регистрации.

Скачать

Войти с помощью автономной формы SCSS

Это форма с автономной формой SCSS.Расширение CSS, которое добавляет мощности и элегантности базовому языку. Он позволяет использовать переменные, вложенные правила, миксины, встроенный импорт и многое другое.

Скачать

Анимированная форма входа в систему

На самом деле это анимированная форма входа в систему, где вверху «Привет, вы уже авторизовались», переходящая в форму внизу. Плавные эффекты анимации.

Скачать

Форма входа с использованием CSS3 и HTML5

Это пример того, как создать простую форму входа с использованием HTML5 и CSS3.Эта форма использует псевдоэлементы (: after и: before) для создания многостраничного эффекта. Эти элементы вращаются с помощью свойства преобразования CSS3. В этой форме используется HTML5, чтобы упростить проверку и отправку.

Скачать

Войти с эффектом встряхивания

Если вы ввели неправильный пароль в этой форме, красивый эффект встряхивания предупредит вас, что вы ввели неправильный пароль. Простое и эффективное решение, которое укажет на проблему неправильных паролей.

Скачать

Boxy Login Form

Квадратная форма для входа с небольшим сюрпризом.Попробуйте ввести «admin» в качестве имени пользователя и «1234» в качестве пароля для полноценного использования.

Скачать

Анимированная форма входа

Маленькая аккуратная форма входа. После того, как вы нажмете «ВХОД» с левой стороны, эффект анимации создаст небольшую аккуратную форму входа в систему справа. Однозначно уникальный подход!

Скачать

Material Design Form

Довольно простая и удобная форма входа в систему, которую вы можете добавить в свой блог или любой другой веб-сайт и оживить опыт. Не нужно усложнять с такой простой вещью, как форма входа в систему.Даже если вы просто собираете подписчиков, вы также можете поэкспериментировать с этим макетом и добиться успеха.

Скачать

Bootstrap Snippet Form

Очевидно, что следующая бесплатная форма входа в HTML5 основана на популярной платформе Bootstrap Framework. Это говорит о том, что вы можете рассчитывать на некоторую приятную гибкость, которую должен практиковать любой современный веб-сайт и элемент. Адрес электронной почты, пароль и флажок, чтобы отметить, если пользователь хочет, чтобы платформа запомнила его или ее информацию. Легко и по делу.

Скачать

Войти с помощью Flat UI

Независимо от вашего основного веб-дизайна, с такими вещами, как формы входа, вы не хотите чрезмерно усложнять его. Вместо этого вы хотели бы сделать его простым и позволить ему работать, предоставляя пользователям беспрепятственный доступ к своим учетным записям. Вы, несомненно, достигнете этой цели с помощью этой формы входа с плоским пользовательским интерфейсом.

Загрузите

Dashboard CSS3 HTML5 Form

Все формы входа в HTML5 и CSS3, которые вы найдете в этом списке, просты в использовании и легко прикрепляются к вашей веб-платформе.У этого даже есть «Забыли пароль?» справа внизу для всех, кто просто не может вспомнить свои пароли. Шаблон идеально подходит для входа в вашу панель инструментов, но вы можете применить его и для других нужд.

Скачать

Плоская форма входа в систему

Бесплатная плоская форма входа с потрясающим и элегантным темным макетом в сочетании с зеленой кнопкой с призывом к действию. Конечно, вы можете изменить инструмент по своему вкусу, но вы также можете использовать его в том виде, в каком он есть, и мгновенно разместить его на своем веб-сайте.Поиграйте с его функциями и настройте все так, как вам нравится.

Скачать

Прозрачный логин

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

См. Форму входа Pen Day 001 Мохана Хадки (@khadkamhn) на CodePen.

Скачать форму

, защищенную паролем

Броская форма, защищенная паролем, которая дает три возможности ввести правильный, прежде чем она предложит вам восстановить ее. Ничего слишком сложного, но результат выглядит фантастическим и достаточно адаптивным, чтобы без проблем добавить его на свой веб-сайт или в приложение. Сделайте его своим, отредактировав его внешний вид и сделав так, чтобы он соответствовал требованиям вашего бренда.

Скачать

Современная форма входа в систему

Говоря о современном, некоторые думают о минимализме, в то время как другие представляют что-то супер креативное и продвинутое.Если первое — это то, что вы копаете больше всего, то вам понравится эта современная форма входа в систему с аккуратным эффектом наведения на кнопку с призывом к действию. Виджет также дает вам возможность связать его со страницей / формой восстановления пароля.

Скачать

Мы перечислили много великолепных форм входа в систему выше, но мы создали еще десятки, которые вы можете найти здесь.

25 CSS Логин / Регистрационные формы

Коллекция отобранных вручную бесплатных HTML и CSS форм для входа (регистрация / вход) примеров кода.Обновление коллекции за октябрь 2018 г. 9 новинок.

Формы входа для начальной загрузки
CSS-формы
CSS Контактные формы
CSS формы оформления заказа
CSS Формы подписки
Загрузочные формы

Автор

Лариса Рабелло
22 апреля 2019

О коде

Режим регистрации

Модальная форма регистрации.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: bootstrap.css, jquery.js, bootstrap.js, popper.js

О коде

Форма входа / выхода с двойным слайдером

Форма входа с двойным слайдером в HTML, CSS и JavaScript.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: font-awesome.css

Автор

Тони Бэник
24 октября 2018

О коде

Форма входа

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

bertdida
17 октября 2018

О коде

Простая регистрационная форма

Простая регистрационная форма HTML и CSS с проверкой.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор

Mert Cukuren
1 октября 2018 г.

Сделано с

HTML / CSS (SCSS) / JS (Babel)

О коде

Модальная форма входа

Модальная форма входа на HTML и CSS с небольшим количеством JavaScript.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

Форма входа в Cube

Кнопки и входы куба на чистом CSS для формы входа со стилями градиента.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

Пабло Эухенио Лухамбио Мартинес
23 мая 2018

О коде

Форма входа с плавающими метками

Чистый CSS форма входа с плавающими метками.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Сделано с

HTML / CSS (SCSS) / JavaScript

О коде

Призматические формы

Призматический вход, регистрация и другие формы.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Сделано с

HTML / CSS (SCSS) / JavaScript

О коде

Анимация формы входа

Страница входа в систему шаблон анимации, созданный с использованием элементов DOM CSS3 и ванильного JavaScript.Обязательно попытаюсь обновить его с помощью более качественных анимационных эффектов.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

Сделано с

HTML / CSS (SCSS) / JavaScript

О коде

Анимация формы входа / регистрации

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

Даниэль Гонсалес
26 февраля 2018

Сделано с

HTML / Мопс
CSS / SCSS
JavaScript

О коде

Анимация пользовательского интерфейса формы

Пользовательский интерфейс смены форм основан на ведении Доминика Маркушича.

Автор

Микаэль Айналем
12 февраля 2018

Сделано с

HTML
CSS
JavaScript (anime.js)

О коде

Подсветка змеи

Скользящее выделение в форме входа.

Автор

sean_codes
17 ноября 2017

О коде

Форма входа

Только форма входа на CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

Даниэль Винчианович
29 июля 2017

О коде

Волнистая форма входа

Симпатичная форма входа в систему с анимацией вертикальной волны.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Форма входа

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: font-awesome.css

Автор

Максим Коновал
21 мая 2016

О коде

Анимированная форма

Регистрационная форма с анимацией на чистом CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Пользовательский интерфейс регистрации

Простая концепция регистрации.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

Фабио Оттавиани
11 февраля 2016

О коде

Форма регистрации

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: font-awesome.css

Автор

Коул Уолдрип
7 января 2016

Сделано с

HTML / CSS (SCSS) / JavaScript

О коде

Кнопка входа и форма

Кнопка находится в состоянии наведения, при котором на цвет фона кнопки накладывается перекошенный прозрачный белый слой.При нажатии кнопки внутри кнопки появляется форма входа .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

Марко Бидерманн
15 ноября 2015

О коде

Форма регистрации UI

Пользовательский интерфейс формы регистрации на чистом CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

Мохан Хадка
30 июня 2015 г.

О коде

Форма входа

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Форма входа

Простая форма входа в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

Clément Guillou
21 июня 2013 г.

О коде

Простая темная форма

Простая темная форма входа.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

90+ бесплатных CSS HTML шаблонов страниц для форм входа

В этой статье мы покажем вам несколько креативных и бесплатных шаблонов страниц для форм входа в формате css html, использующих современный дизайн с CSS3, и HTML5.Фактически, в настоящее время популярные веб-сервисы и веб-приложения разрешают или требуют подписки пользователей, а это означает, что им потребуются какие-то формы для пользователей, чтобы зарегистрироваться и войти в систему на своем веб-сайте. Чтобы помочь вам, я попытался найти различные красивые формы входа в систему, некоторые из которых вдохновлены концепциями веб-дизайна.

Я считаю, что веб-дизайн шаблонов форм входа css css3 html5 должен быть чистым и эффективным. Имея в виду, что дизайн формы должен иметь другой стиль, форма входа в систему должна включать всего три элемента: имя пользователя, пароль и ввод для отправки.Поскольку разметка настолько проста, она обеспечивает большую гибкость, когда мы кодируем ее в HTML и CSS.

Форма входа на чистом CSS3

Пример простой формы входа в csc3 со значком SVG. В будущем будет добавлена функция вкладок для переключения от входа к регистрации и обратно.

больше информации / скачать

Форма входа и регистрации HTML5 CSS3

Этот бесплатный шаблон оформления страницы входа в систему css3 с zip-файлом Facebook и twitter etch вместе с этой загрузкой предоставит вам шаблоны css, html5 и js.Также доступна регистрация в социальных сетях с опциями отображения / скрытия пароля для удобного ввода пароля на экране.

больше информации / скачать

Чистая форма входа

больше информации / скачать

CSS3 HTML5 панель входа в систему

больше информации / скачать

День 001 Форма входа

больше информации / скачать

Экран входа в Calm breeze

больше информации / скачать

Концепция анимации входа / выхода

больше информации / скачать

Концепция окна входа

больше информации / скачать

Адаптивная форма входа

больше информации / скачать

Фрагмент начальной загрузки: Форма входа

больше информации / скачать

Вход и регистрация во всплывающем окне с помощью jQuery

Это всплывающее окно входа в модальное окно и поле регистрации создано с помощью HTML5, CSS3 и LeanModal.js плагин.

больше информации / скачать

Форма случайного входа

больше информации / скачать

Адаптивное модальное окно входа в систему

больше информации / скачать

Material Compact Анимация входа в систему

больше информации / скачать

Концепция формы входа и регистрации

Концепция формы входа и регистрации, нажмите «Войти» и «Зарегистрируйтесь», чтобы изменить и просмотреть эффект

больше информации / скачать

Концепция входа в приложение

больше информации / скачать

Страница входа в систему Absolute Center с начальной загрузкой

больше информации / скачать

Простой виджет входа в систему

Это простой виджет входа в систему с анимацией CSS3 и простой проверкой jQuery.Не стесняйтесь повторно использовать компоненты или все это.

больше информации / скачать

Переход для простого входа в систему с заполнителем

больше информации / скачать

Flat UI Login с всплывающим окном

Просто случайная страница входа, разработанная с учетом Flat UI.

больше информации / скачать

Форма входа — модальная

Это модальное окно входа с двумя панелями, вдохновленное материалами. Панель входа в систему и панель регистрации, которая по умолчанию скрыта. Панель регистрации можно запустить, щелкнув видимую вкладку справа.После нажатия панель регистрации выдвинется и перекрывает панель входа в систему.

больше информации / скачать

Css Форма входа

больше информации / скачать

Форма входа в систему Material Design

больше информации / скачать

Директива о угловой форме входа

больше информации / скачать

Панель входа Bananaplate

больше информации / скачать

Войти через Facebook или Twitter

больше информации / скачать

Элегантная форма входа

больше информации / скачать

Вход / переход формы регистрации

больше информации / скачать

Мой клиентский кабинет

больше информации / скачать

Анимированный экран загрузки и входа в систему

Поиграйте с несколькими различными анимациями для отображения анимации загрузки, а также входа в систему с возможностями для ссылок нижнего колонтитула.

больше информации / скачать

Переключить форму входа / регистрации

Небольшой эксперимент по использованию одной и той же формы для входа и регистрации. Используя CSS и jQuery.

больше информации / скачать

Панда Логин

больше информации / скачать

Концепция формы входа в 3D

больше информации / скачать

Мигающий логин

Форма входа в виде стекла с мерцающим эффектом CSS3. Нажмите кнопку отправки, чтобы переключиться между допустимым и недопустимым состояниями.

больше информации / скачать

Эластичная форма входа

больше информации / скачать

Форма входа в систему Бэтмен

больше информации / скачать

Форма для входа в концептуальный материал

больше информации / скачать

Login — Dribbble Shot

больше информации / скачать

Выпадающее меню входа

больше информации / скачать

Экран входа в систему Polanquette

больше информации / скачать

Маска пароля для входа в систему

больше информации / скачать

Вход в Tumblr / Регистрация Переключатель CSS

Небольшой переработанный дизайн страницы входа / регистрации в Tumblr.Обязательно нажмите ссылку «Зарегистрироваться», чтобы увидеть, как работает переключатель CSS.

больше информации / скачать

Монотонный вход администратора CSS

больше информации / скачать

Войти в Everdwell

больше информации

Форма регистрации материалов

Лучшие формы для вашего модного магазина с Google Material Design становятся популярнее, чем плоские.

больше информации / скачать

Анимированная форма входа в CSS3

больше информации / скачать

Форма входа через Facebook

скачать

Развертывание формы входа

скачать

Элегантная форма входа

больше информации / скачать

Entrar Shadow Flat Log в шаблоне формы

Entrar Shadow Flat Form Template Виджет для ваших веб-сайтов делает ваш веб-сайт или веб-приложение входом в систему, страница регистрации выглядит лимонно-желтым фоном.

демо больше информации / скачать

Классическая форма входа в CSS3

больше информации / скачать

Войти через форму Подключиться к Facebook

больше информации / скачать

Шаблон плоской формы всплывающего окна входа

Виджет шаблона плоской формы всплывающего окна входа в систему для вашего веб-сайта делает ваш веб-сайт или веб-приложение входом в систему, страница регистрации выглядит Проверено фон.

демо больше информации / скачать

Форма входа в CSS3

больше информации / скачать

Фиолетовый шаблон формы входа

демо больше информации / скачать

Форма входа в Facebook

больше информации / скачать

Плоский анимированный шаблон формы входа

Форма входа в плоский виджет с анимированным шаблоном для ваших веб-сайтов заставляет ваш сайт или веб-приложение войти в систему, страница регистрации выглядит размытым фоном.

демо больше информации / скачать

Интерфейс оповещения о форме входа в систему в PSD и CSS

Это виджеты предупреждений для ответов на формы, панель входа в форму с кнопками «Войти / Зарегистрироваться» и другие различные элементы. Помимо PSD, мы предоставляем полностью закодированные версии CSS и HTML, чтобы сэкономить вам время!

больше информации / скачать

Золотой шаблон формы входа

демо больше информации / скачать

Хорошая форма входа в CSS3

больше информации / скачать

Элегантная форма входа

демо скачать

Яркий интерфейс входа в систему PSD и HTML / CSS

Нам очень понравился этот дизайн интерфейса входа / регистрации.Он предоставляется как в формате PSD, так и в виде полностью закодированной версии HTML / CSS, поэтому вы можете сразу приступить к его интеграции.

больше информации / скачать

Простая тема администратора: страница входа

демо больше информации / скачать

Форма входа с HTML5

демо больше информации / скачать

Логин Apple Dev

больше информации / скачать

Минимальная форма входа в систему

больше информации / скачать

Форма входа в систему с 3D-преобразованиями CSS

демо скачать

Пользовательский стиль формы входа

демо скачать

Переключение анимированных форм с помощью jQuery

В этом уроке мы создадим простой переключатель анимированной формы с тремя очень распространенными формами.Идея состоит не в том, чтобы покинуть страницу, когда пользователь переходит в другую форму, а вместо этого заставить новую форму появляться в том же контейнере, расширяясь или сужаясь до размеров новой формы.

демо скачать

Форма входа и регистрации с HTML5

демо скачать

Форма входа и регистрации с обработкой ошибок

демо скачать

Форма входа HTML / CSS3 / jQuery демо скачать демо

Форма входа в систему с помощью PHP, JQuery

демо больше информации / скачать

Анимированная форма входа с jQuery и CSS3

Это простая анимированная форма входа в систему, которую вы можете легко интегрировать в свои веб-проекты.

демо скачать

Стильная анимированная форма входа и регистрации с JQuery и CSS3

Это потрясающая анимированная и стильная форма jquery для входа / регистрации, которая проста в использовании. Я добавил немного анимации, которая добавила привлекательности. Если кому-то нужна эта форма, то для ее работы нужен только внутренний код.

демо скачать

Форма входа в систему анимации

скачать

Форма входа в стиле Apple с 3D-преобразованиями CSS

В этом уроке мы увидим, как мы можем использовать эти преобразования для создания интересного эффекта переворачивания в форме входа в систему, вдохновленной Apple.

демо скачать

Пакет плоских форм

скачать

Зи-4-Формы

Хорошие, чистые и простые в использовании формы CSS3, в которые включены 4 формы. Это чистый и приятный дизайн для входа, регистрации, восстановления пароля и контактных форм в пользовательском интерфейсе HTML с сообщениями для каждого поля, которые помогут посетителям или участникам вашего сайта.

скачать

Страница входа в день / ночь

Day / Night Login Forms — имеет чистый и уникальный дизайн. В комплекте 2 psd файла с 3 формами.В двух цветах белый и темный. Так же в комплект входит 4 стильных пуговицы. Благодаря формам входа в систему «день / ночь» разработчики могут сэкономить время и деньги на разработке дизайна. И дизайнеры могут увидеть пример правильной организации слоев.

скачать

CSS3 PopUp формы входа и подписки

Не так давно для достижения таких эффектов мы использовали JS. Но теперь в CSS3 есть все необходимые инструменты для создания всплывающих окон.

скачать

Набор форм на чистом CSS3

Pure CSS3 Forms Set позволяет создавать формы любой сложности и для любых нужд (логин, регистрация, контакты, поиск, оформление заказа и т. Д.).

скачать

Используемая форма входа и регистрации CSS

Чистая и удобная форма входа и регистрации предназначена для каждого разработчика. Это очень быстрый чистый CSS. Состояния обработки ошибок, кнопки социальных сетей и состояние забытого пароля.

скачать

Форма входа

Я создал эту форму входа, чтобы блокировать внешний интерфейс большинства моих внештатных проектов WordPress на этапе разработки. Это всего лишь HTML / CSS, но он использует систему входа в wordpress.

больше информации / скачать

Простая и плоская форма входа

больше информации / скачать

Переделка первой формы входа

больше информации / скачать

Форма входа с гладкой отрицательной маржей

больше информации / скачать

Форма входа в плоский интерфейс

больше информации / скачать

Простая форма регистрации v2

больше информации / скачать

Форма входа / регистрации со счетчиком пропусков

больше информации / скачать

Depicto — Пакет форм для входа и регистрации

больше информации / скачать

Страница входа в социальные сети

демо больше информации / скачать

Адаптивный шаблон формы плоского окна входа

Плоский шаблон адаптивного виджета формы окна входа в систему для ваших веб-сайтов.Этот виджет разработан с использованием таких веб-технологий, как HTML5 и CSS3. Его можно загрузить совершенно бесплатно и сразу же использовать на своем веб-сайте. Он имеет виджет формы входа в систему HTML CSS3, который можно использовать для веб-проектов.

демо больше информации / скачать

Шаблон формы входа в плоский бизнес-профиль

демо больше информации / скачать

Создание системы входа в систему с использованием HTML, PHP и MySQL

Это руководство по созданию системы входа в систему с помощью HTML, PHP и MySQL.Ваш веб-сайт должен быть динамичным, и ваши посетители должны иметь к нему мгновенный доступ. Поэтому они хотят входить в систему как можно больше раз. Система аутентификации входа очень распространена для любого веб-приложения. Он позволяет зарегистрированным пользователям получать доступ к веб-сайту и функциям только для членов. Это также полезно, когда мы хотим хранить информацию для пользователей. Он охватывает все: от торговых сайтов, образовательных сайтов до членских сайтов и т. Д.

Это руководство состоит из 4 частей.

Система регистрации
Система входа в систему
Страница приветствия
Сценарий выхода из системы

1) Создание системы регистрации

В этой части мы создадим систему регистрации, которая позволит пользователям создавать новую учетную запись в системе.Наш первый шаг — создать регистрационную форму HTML. Форму довольно просто создать. Он запрашивает только имя, адрес электронной почты, пароль и пароль для подтверждения. Адреса электронной почты будут уникальными для каждого пользователя. Использование нескольких учетных записей для одного и того же адреса электронной почты не допускается. Он покажет сообщение об ошибке пользователям, которые попытаются создать несколько учетных записей с одним и тем же адресом электронной почты.

Шаг 1. Создание регистрационной формы в HTML

Мы создадим файл PHP с именем register.php со следующим кодом в нем.Это простая HTML-форма с некоторой базовой проверкой. Если вы не знакомы с HTML, вы можете получить его на многих интернет-сайтах, которые предоставляют готовые шаблоны форм входа в систему html5.

Вывод HTML-формы выше будет выглядеть следующим образом.

Зарегистрироваться

Все поля ввода обязательны с добавлением атрибута «обязательный» , который является атрибутом HTML по умолчанию. Использование type = "email" проверит адрес электронной почты, предоставленный пользователями, и выдаст ошибку, если адрес электронной почты недействителен.Для регистрационной формы мы использовали бутстрап для быстрой разработки. Если вы хотите сэкономить время на HTML-коде, вы всегда можете использовать несколько бесплатных шаблонов html5 для своего проекта.

Шаг 2. Создание таблицы базы данных MySQL

Вам нужно будет создать новую базу данных с любым подходящим именем. После этого выполните приведенный ниже SQL-запрос, чтобы создать таблицу пользователя внутри вашей вновь созданной базы данных MySQL.

Шаг 3. Создание файла конфигурации базы данных

Теперь мы создали таблицу пользователей.Давайте создадим новый файл PHP с именем config.php для подключения к базе данных MySQL. Вставьте следующий код в файл config.php и измените имя базы данных на любое, выбранное вами при создании базы данных.

Шаг 4. Создание файла сеанса

Создадим файл с именем session.php . В этом файле мы запустим сеанс и проверим, вошел ли уже пользователь в систему, если да, то мы перенаправим пользователя в файл welcome.php .

Шаг 5. Создайте регистрационную форму в PHP

Наконец, пришло время создать код PHP, который позволяет пользователям регистрировать свои учетные записи в системе. Этот код PHP будет предупреждать пользователей об ошибке, если какой-либо пользователь уже зарегистрирован с тем же адресом электронной почты.

Замените следующий код в файле register.php .

После того, как пользователь нажмет кнопку отправки, он проверит, установлена ли переменная $ _SERVER ["REQUEST_METHOD"] == "POST" и $ _POST ['submit'] .Из соображений безопасности мы всегда рекомендуем не хранить пароль в базе данных в виде простого текста. Мы использовали функцию password_hash () , которая создает новый хэш пароля с использованием надежного одностороннего алгоритма хеширования.

Приведенный выше сценарий PHP проверяет, что ни один пользователь не зарегистрирован с тем же адресом электронной почты, а также проверяет пароль. После подтверждения проверки мы сохраняем предоставленную пользователем информацию в таблице пользователей и предупреждаем пользователя об успешной регистрации.

2) Создание системы входа в систему

В этой части мы создадим форму входа в систему, чтобы позволить пользователям получить доступ к ограниченной области системы. В нашем случае закрытая зона — это страница приветствия, о которой мы поговорим в следующей части.

Шаг 1. Создание формы входа в HTML

Ниже представлена HTML-форма для входа. Вставьте его в файл с именем login.php

Результат вышеупомянутого кода будет выглядеть так:

Логин

Шаг 2: Создание системы входа в PHP

После создания формы входа в систему в HTML мы напишем код для проверки учетных данных для входа.При отправке формы мы проверим, заполнены ли адрес электронной почты и пароль. Если они заполнятся, мы выполним запрос SELECT , чтобы найти запись в базе данных на основе адреса электронной почты и пароля. Если какая-либо запись будет найдена, мы сохраним «userID» в сеансе, и пользователь будет перенаправлен в файл welcome.php , в противном случае пользователь получит сообщение об ошибке.

Давайте заменим следующий код в файле login.php .