Коллекция из 15 красивых форм регистрации и авторизации

Apple login form

А какая форма понравилась вам?

Подписи к полям ввода

Чтобы привязать к полю ввода подпись используется тег <label> с атрибутом for, в котором указывается id инпута. Этот id, разумеется, нужно заранее добавить.

Вот как это будет выглядеть на примере.

Пояснения к статье:

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

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

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

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

Радиобаттон

Радиобаттон создается тегом <input> с атрибутом type=”radio”. Он служит для выбора одного варианта из нескольких. Все варианты должны иметь одинаковый атрибут name и разные атрибуты value. Значение атрибута value отмеченного радиобаттона будет отправлено на бэкенд.

Результат:

Создаем всплывающее окно при входе на сайт на html и jquery

В этой статье вы узнаете, как создать всплывающее окно при входе на сайт с формой входа/регистрации с помощью HTML, CSS 3 и jQuery. Для реализации popup окна требуется HTML, CSS и jQuery (Javascript). Я расскажу, как создать простую версию, а затем мы посмотрим, как ее можно улучшить.

Сначала нужно сбросить CSS браузера и импортировать дополнительные шрифты. Я собираюсь использовать Open Sans и Varela Round, которые доступны в Google Font.

Стили разделов body и HTML можно изменить по своему усмотрению, это мало повлияет на создаваемую форму входа и popup окно jQuery.

Затем нужно подключить на странице jQuery. Я использую ссылку на jQuery, но можно использовать локальную версию.

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

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

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

Разберем этот код:

Вторая часть включает flexbox CSS3, что значительно упрощает позиционирование элементов внутри контейнера. Давайте посмотрим:

Перед тем, как перейти к popup окну для сайта, пояснение Flexbox:

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

Окончательный код:

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

Большинство CSS-свойств очевидны. С помощью значения rgba мы еще раз установили цвет фона, что дает красивый непрозрачный эффект. border-radius задает закругленные углы контейнера формы входа.

Свойство, которое требует пояснений, это align-self, поскольку оно довольно новое. Это связано с flexbox. align-self определяет горизонтальное выравнивание элемента, и мы задали выравнивание точно по центру.

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

Мы используем сплошной белый фон, поэтому вместо rgba применили только rgb. Отступ в 24 пикселя можете изменить по своему усмотрению.

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

Теперь нужно оформить внутри панели входа заголовок (h3):

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

Перед тем, как сделать popup окно, нужно создать кнопку закрытия формы входа. Это делается следующим образом:

Вот объяснение кода:

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

Скоро перейдем к HTML popup окну. А пока CSS-код формы входа:

form label {
    color: rgb(0,0,0);
    display: block;
    font-family: 'Varela Round', sans-serif;
    font-size: 1.25em;
    margin: .75em 0;    
}

    form input[type="text"],
    form input[type="email"],
    form input[type="number"],
    form input[type="search"],
    form input[type="password"],
    form textarea {
        background-color: rgb(255,255,255);
        border: 1px solid rgb( 186, 186, 186 );
        border-radius: 1px;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
        display: block;
        font-size: .65em;
        margin: 6px 0 12px 0;
        padding: .8em .55em;    
        text-shadow: 0 1px 1px rgba(255, 255, 255, 1);
        transition: all 400ms ease;
        width: 90%;
    }

    form input[type="text"]:focus,
    form input[type="email"]:focus,
    form input[type="number"]:focus,
    form input[type="search"]:focus,
    form input[type="password"]:focus,
    form textarea:focus,
    form select:focus { 
        border-color: #4195fc;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px #4195fc;
    }

        form input[type="text"]:invalid:focus,
        form input[type="email"]:invalid:focus,
        form input[type="number"]:invalid:focus,
        form input[type="search"]:invalid:focus,
        form input[type="password"]:invalid:focus,
        form textarea:invalid:focus,
        form select:invalid:focus { 
            border-color: rgb(248,66,66);
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgb(248,66,66);
        }

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

Перед тем, как сделать popup окно HTML, мы создаем элементы ввода данных формы. Я указал inset box-shadow, чтобы задать для них красивую внутреннюю тень.

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

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

Стили кнопки не содержат ничего нового:

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

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

До сих пор все пояснения касались стилей CSS. Теперь пришло время вкратце рассмотреть разметку. В том числе и HTML popup окна.

В форме используются элементы HTML 5, поэтому убедитесь, что doctype задан верно:

Если хотите обеспечить полную совместимость со старыми версиями браузеров и поддержку HTML 5, включите приведенную ниже ссылку на Javascript в разделе head документа:

Полный HTML-код формы входа:

Важно отметить, что мы используем для окна наложения атрибут style=”display: none;”. Это важно, когда речь идет о Javascript / jQuery.

При использовании этого метода для всего сайта необходимо разместить код внутри элемента body.

Мы будем использовать библиотеку jQuery для создания JavaScript popup окна. Это популярный в интернете эффект, он используется такими сайтами, как Facebook и Twitch.tv.

Нужно обернуть функции jQuery в функцию, которая загружается после того, как документ готов. Это предотвращает замедление:

Чтобы создать эффект растворения, мы используем метод jQuery fadeToggle. Он позволяет значительно проще анимировать элементы.

Мы используем fadeToggle при нажатии ссылки входа в систему. Для этого нам потребуется событие jQuery click:

Приведенный выше код запускает функцию encased при нажатии элемента с идентификатором loginLink. Чтобы указать ей, что делать, когда элемент нажат, нужно сделать следующее:

Использование jQuery-функции preventDefault() позволяет остановить связь с перенаправлением пользователя. Это обеспечивает функционал для разработчиков, которые могут ссылаться на страницу входа:

С помощью этой простой функции мы продублируем функционал для закрытия окна.

Нам не нужно использовать здесь функцию preventDefault(), потому что кнопкой закрытия окна не предоставляется внешняя ссылка.

В JS popup окне сделаем так, чтобы пользователь мог нажать клавишу ESC для закрытия окна:

Важно отметить, что эта функция используется в теле if. Оператор проверяет, нажал ли пользователь клавишу ESC (код клавиши 27).

Поскольку мы не хотим, чтобы пользователь открывал окно с помощью клавиши ESC, нужно проверить, отображается ли окно наложения или нет.

Вот все весь код jQuery:

Что, если вы захотите сделать эту форму еще лучше? Можно включить в нее форму регистрации. Вот как это можно сделать без дублирования кода с помощью запроса JQuery AJAX GET:

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

Мы хотим, чтобы ссылки не делали ничего другого. Используем для этого preventDefault(). Затем нужно узнать, какую страницу нужно извлечь. Это указано в HTML-атрибуте data-action.

Теперь получаем код указанной страницы / формы или HTML popup окна. Страница, соответствующая нажатой ссылке, должна находиться в паке ajax/. Затем результат помещается в элемент с классом login-content.

Код страницы ajax/login-form.html будет выглядеть следующим образом:

Ссылки для вызова запроса AJAX будут выглядеть так:

Затем можно создать файл ajax/registration-form.html:

Каждая ссылка имеет атрибут data-action, он ссылается на файл в папке ajax/ и загружает его в элемент наложения. Чтобы добавить другие файлы, нужно создать их в папке ajax/ – ajax/yourfile.html и задать data-action=”yourfile.html”.

Спасибо за внимание. Сегодня мы узнали, как сделать popup окно. Надеюсь, это руководство оказалось полезным. Вот полный код:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 5, CSS 3, jQuery Log-in & Registration</title>
<link href='http://fonts.googleapis.com/css?family=Varela Round|Open Sans:400,300,600' rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
    $("#loginLink").click(function( event ){
           event.preventDefault();
           $(".overlay").fadeToggle("fast");
     });

    $(".overlayLink").click(function(event){
        event.preventDefault();
        var action = $(this).attr('data-action');

        $("#loginTarget").load("ajax/"   action);

        $(".overlay").fadeToggle("fast");
    });

    $(".close").click(function(){
        $(".overlay").fadeToggle("fast");
    });

    $(document).keyup(function(e) {
        if(e.keyCode == 27 && $(".overlay").css("display") != "none" ) { 
            event.preventDefault();
            $(".overlay").fadeToggle("fast");
        }
    });
});
</script>
<style>
/*
*    RESET
*/
*{
    box-sizing: border-box;
    margin: 0;
    outline: none;
    padding: 0;
}

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

/*
*    Общие стили
*/
html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

body {
    background-color: #f3f3f3;
    color: rgb(165,165,165);
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-weight: 400;
}

a.close {
    background-color: rgb(204,204,204);
    border-radius: 50%;
    color: rgb(255,255,255);
    display: block;
    font-family: 'Varela Round', sans-serif;
    font-size: .8em;
    padding: .2em .5em;
    position: absolute;
    top: 1.25rem;
    transition: all 400ms ease;
    right: 1.25rem;
}

    a.close:hover {
        background-color: #1bc5b3;
        cursor: pointer;
    }

/*
*    Панель входа
*/
div.overlay {
    background-color: rgba(0,0,0,.25);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}

    div.overlay > div.login-wrapper {
        align-self: center;
        background-color: rgba(0,0,0,.25);
        border-radius: 2px;
        padding: 6px;
        width: 450px;
    }

        div.overlay > div.login-wrapper > div.login-content {
            background-color: rgb(255,255,255);
            border-radius: 2px;
            padding: 24px;    
            position: relative;
        }

            div.overlay > div.login-wrapper > div.login-content > h3 {
                color: rgb(0,0,0);
                font-family: 'Varela Round', sans-serif;
                font-size: 1.8em;
                margin: 0 0 1.25em;
                padding: 0;
            }
/*
*    Форма
*/
form label {
    color: rgb(0,0,0);
    display: block;
    font-family: 'Varela Round', sans-serif;
    font-size: 1.25em;
    margin: .75em 0;    
}

    form input[type="text"],
    form input[type="email"],
    form input[type="number"],
    form input[type="search"],
    form input[type="password"],
    form textarea {
        background-color: rgb(255,255,255);
        border: 1px solid rgb( 186, 186, 186 );
        border-radius: 1px;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
        display: block;
        font-size: .65em;
        margin: 6px 0 12px 0;
        padding: .8em .55em;    
        text-shadow: 0 1px 1px rgba(255, 255, 255, 1);
        transition: all 400ms ease;
        width: 90%;
    }

    form input[type="text"]:focus,
    form input[type="email"]:focus,
    form input[type="number"]:focus,
    form input[type="search"]:focus,
    form input[type="password"]:focus,
    form textarea:focus,
    form select:focus { 
        border-color: #4195fc;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px #4195fc;
    }

        form input[type="text"]:invalid:focus,
        form input[type="email"]:invalid:focus,
        form input[type="number"]:invalid:focus,
        form input[type="search"]:invalid:focus,
        form input[type="password"]:invalid:focus,
        form textarea:invalid:focus,
        form select:invalid:focus { 
            border-color: rgb(248,66,66);
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgb(248,66,66);
        }

form button {
    background-color: #50c1e9;
    border: 1px solid rgba(0,0,0,.1);
    color: rgb(255,255,255);
    font-family: 'Varela Round', sans-serif;
    font-size: .85em;
    padding: .55em .9em;
    transition: all 400ms ease;    
}

    form button:hover {
        background-color: #1bc5b3;
        cursor: pointer;
    }
</style>
</head>

<body>
<div class="test"></div>
<p>Here's some content.</p>
<a href="login.php" id="loginLink">Login</a>
<ul>
    <li><a href="login.php" class="overlayLink" data-action="login-form.html">Log-in</a></li>
    <li><a href="register.php" class="overlayLink" data-action="registration-form.html">Register</a></li>
</ul>
<div class="overlay" style="display: none;">
    <div class="login-wrapper">
        <div class="login-content" id="loginTarget">
            <a class="close">x</a>
            <h3>Sign in</h3>
            <form method="post" action="login.php">
                <label for="username">
                    Username:
                    <input type="text" name="username" id="username" placeholder="Username must be between 8 and 20 characters" pattern="^[a-zA-Z][a-zA-Z0-9-_.]{8,20}$" required />
                </label>
                <label for="password">
                    Password:
                    <input type="password" name="password" id="password" placeholder="Password must contain 1 uppercase, lowercase and number" pattern="(?=^.{8,}$)((?=.*d)|(?=.*W ))(?![.n])(?=.*[A-Z])(?=.*[a-z]).*$" required />
                </label>
                <button type="submit">Sign in</button>
            </form>
        </div>
    </div>
</div>
</body>
</html>

Дайте знать, что вы думаете по этой теме материала в комментариях. За комментарии, дизлайки, отклики, лайки, подписки огромное вам спасибо!

Тег textarea – многострочное поле ввода:

Для создания многострочного поля используется тег <textarea>. Этот тег является парным, в отличие от <input>. А ещё для управления его шириной и высотой можно управлять с помощью атрибутов cols и rows соответственно.

На примере выглядит вот так:

Результат в браузере:
Коллекция из 15  красивых форм регистрации и авторизации

Форма авторизации: html разметка.

Начнем с “HTML”, первое что нам нужно сделать, так это подключить все необходимые инструменты — JavaScript и CSS. Для этого создадим 2 тега в блоке head: script(для подключения скриптов, с помощью атрибута “src”) и “link”(для подключения стилей, с помощью атрибута “href”).

Форма авторизации на сайте - самостоятельно

Теперь можно приступать к разметке нашей формы, открываем тег body. Внутри мы создадим небольшую конструкцию:

  1. Внешний блок с классом pinkbox — тег <div>.
  2. Блоки для авторизации и регистрации с классами signup и signin.
  3. Заголовок и форма с различными элементами — теги <form>, <h2>, <input> и т.д. Находятся внутри каждого блока.

Форма авторизации на сайте - самостоятельно

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

Здесь уже другая конструкция. Нам также придется использовать изображения(тег <img>).

Форма авторизации на сайте - самостоятельно

После того, как мы создали все блоки, закрываем тег <body> и все готово.

Форма авторизации: стилизация. css

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

Из свойств мы применим только центрирование(margin 0 auto), изменим позиционирование, размеры и расположение по координатам.

После этого приступаем к стилизации слайдеров. Здесь будут применены стандартные свойства CSS, такие как фон, изменение ширины и высоты, рамки, тени и т.д.

Форма авторизации на сайте - самостоятельно

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

Ваш CSS код должен выглядеть примерно так:

Форма авторизации на сайте - самостоятельно

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

Форма авторизации на сайте - самостоятельно

Форма для загрузки файлов

Чтобы создать форму для загрузки файлов, использутеся тег <input> с типом file. При этом самой форме нужно прописать атрибут enctype=”multipart/form-data”:

А вот так будет выглядеть наше получившееся поле:
Поле для загрузки файла

На этом с формами всё. За домашку!

Чекбокс

Чекбокс создается тегом <input> с атрибутом type=”checkbox”. Если чекбокс на форме отмечен, то на бэкенд уйдет переменная с именем инпута, а иначе – нет. Чтобы чекбокс на форме был отмечен по умолчанию, то нужно добавить атрибут checked. Выглядеть это будет вот так:

Заключение

Форма авторизации на сайте - самостоятельно

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

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

Теги:

Похожее:  Вся Россия Мегафон тариф - подключить, отключить

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *