особенности создания формы входа в Личный Кабинет | vaden pro

Решение на основе фоновых изображений

Принцип работы этого метода полностью идентичен первому способу. Единственное отличие заключается в том. Что вместо тега label используют бекграунд для тега input. Далее алгоритм сохраняется: при получении фокуса свойство background получает значение none.

Этот способ имеет ряд своих недостатков:

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

1 → темная форма входа

Простая форма темная входа, со стандартными полями, и креативной кнопкой синего цвета.

10 → форма серого цвета

Серый оттенок, в виде друг на друга наложенных листочков.

11 → крупная форма с дополнительным элементом

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

12 → дизайн в виде блокнота

Дизайн формы в виде блокнота, с простыми полями, но выдержанным стилем.

13 → красочная, прозрачная форма

Красочная, прозрачная и цветная форма, с дополнительными кнопками входа через социальные сети, а также красивым чекбоксом “Запомнить меня”.

14 → apple iphone форма

Форма входа для любителей Apple, с формами ввода, кнопкой “Запомнить” – в общем мне понравилось!

15 → чёткая форма с заголовком

Четкая и простая форма, без никаких отвлекающих элементов, и заметным черным заголовком.

16 → тёмная форма

Тёмная форма с красивой и заметной кнопкой отправки данных.

17 → черная форма

Черная форма входа с белыми полями – хорошее сочетание цветов.

18 → горизонтальная форма входа и регистрации

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

19 → темная форма с дополнительными элементами

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

2 → светлая форма входа

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

20 → форма входа на сайт регистрация

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

21 → белая форма с красным заголовком

Светлая форма, с бросающимся в глаза заголовком, и простыми полями ввода текста.

22 → форма входа, регистрации и восстановление пароля

Тройная форма: регистрация, вход на сайт и восстановления пароля. Переключение между формами на Javascript.

3 → эффектная форма с эффектом появления

Элегантная форма, светлого тона, с красивым эффектом появления “изнутри”.

4 → простая форма с эффектом появления

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

The Logout script

Finally, Let’s create a logout.php file with the following code in it.

5 → красивая форма с логотипом apple

Продуманная форма на сайт с интересным дизайном и логотипом apple.

6 → маленькая форма в розовом стиле

Маленькая и простая, в розовом стиле, и интересным дизайном.

7 → светлая форма

Светлая, в выдержанном стиле и дизайне, ничего лишнего.

8 → супер форма входа и восстановления пароля

Форма входа обратная сторона – восстановление пароля. Эффект 3D переворота, при переключении между формами.

9 → приятная дизайнерская форма с эффектом

Приятная на вид, красивый эффект появления иконок при активации поля ввода.

Step 1: creating a login form in html

Below is the Login Form in HTML. Paste it in a file named login.php

Step 1: creating registration form in html

We will create a PHP file named register.php with the following code in it. This is a simple HTML form with some basic validation. If you are not familiar with HTML then you can get it from many online sites who give ready-made html5 login form templates.

В каких браузерах работает?

Оценок: 4 (средняя 4.8 из 5)

Динамические поля

Суть данного метода заключается в создании двух полей с указанием текстового типа (type=”text”). В этих же полях прописываем атрибут value, значением которого будет название поля. Таким образом, мы получим название поля, которое будет в нем выводиться.

Данный метод имеет право на жизнь, но необходимо знать его основные недостатки:

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

Добавление стиля

По умолчанию модальное окно имеет visibility: hidden; и opacity: 0;.

Оба эти свойства изменены с помощью класса .is-visible.

Обработка событий

Единственное, что стоит отметить в файле .js – это функция, которая позволяет пользователям скрывать / показывать пароль. Мы решили сделать пароль видимым по умолчанию (объявляем ввод как текстовый тип, а не тип пароля). Таким образом, мы могли бы избавиться от поля «повторить пароль» в форме регистрации.

Когда пользователь нажимает эту ссылку, тип ввода пароля изменяется (от «пароля» до «текст» или наоборот):

$('.hide-password').on('click', function(){
  var $this= $(this),
    $password_field = $this.prev('input');
    
    ( 'password' == $password_field.attr('type') ) ? $password_field.attr('type', 'text') : $password_field.attr('type', 'password');
    ( 'Hide' == $this.text() ) ? $this.text('Show') : $this.text('Hide');
    //focus and move cursor to the end of input field
    $password_field.putCursorAtEnd();
});

Функция .putCursorAtEnd () фокусируется на поле ввода и помещает курсор в конец.

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

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

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

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

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

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

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

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

Радиобаттон

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

Результат:

Решение поставленной задачи с помощью javascript

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

Начинаем с создания HTML-кода. Для начала хочу Вас ознакомить с особенностями написания HTML, чтобы было понятно что и зачем написано в коде:

Создание структуры

Мы ввели ссылки для входа / регистрации в нашем главном меню:

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

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

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

Результат в браузере:
Особенности создания формы входа в личный кабинет | Vaden Pro

Форма авторизации: 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. Выглядеть это будет вот так:

Шаг 8

И последний штрих. Мы можем ограничивать доступ не только к странице админки, но и к любой другой. Для этого достаточно открыть сессию и проверить наличие метки в ней. Чтобы не копировать на каждую новую страницу эти блоки кода — мы их можем вынести в отдельный файл (auth.php) и затем просто подключать этот файл на страницах, к которым нужно ограничить доступ по паролю. Содержимое файла auth.php будет таким:

Заключение

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

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

Похожее:  Делаем красивую форму на HTML и CSS. | LinuxBlog.РФ

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

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