код формы регистрации в html

Создание формы регистрации и авторизации

В этой статье вы узнаете, как создать форму регистрации и авторизации, используя HTML, JavaScript, PHP и MySql. Такие формы используются почти на каждом сайте, в независимости от его типа. Они создаются и для форума, и для интернет-магазина и для социальных сетей (такие как например Facebook, Twiter, Odnoklassniki) и для многих других типов сайтов.

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

Создание таблицы в Базе Данных

Для того чтобы реализовать регистрацию пользователей, в первую очередь нам нужна База Данных. Если она у Вас уже есть, то замечательно, иначе, Вам нужно её создавать. В статье Создание базы данных mysql в phpmyadmin, я подробно объясняю, как сделать это.

И так, у нас есть База Данных (сокращённо БД), теперь нам нужно создать таблицу users в которой будем добавлять наших зарегистрированных пользователей.

Как создавать таблицу в БД, я также объяснил в статье Создание базы данных mysql в phpmyadmin. Перед тем как создать таблицу, нам необходимо определить какие поля она будет содержать. Эти поля будут соответствовать полям из формы регистрации.

Значит, подумали, представили какие поля будут у нашей формы и создаём таблицу users с такими полями:

Все поля типа VARCHAR должны иметь значение по умолчанию NULL и кодировку utf8mb4_unicode_ci.

Если Вы хотите, чтобы Ваша форма регистрации имела ещё какие-то поля, то Вы можете их здесь также добавить.

Всё, наша таблица users готова. Переходим к следующему этапу.

Подключение к Базе Данных

Базу данных мы создали, теперь необходимо к ней подключиться. Подключение будем осуществлять с помощью PHP расширения MySQLi.

В папке нашего сайта, создаём файл с именем dbconnect.php, и в нём пишем следующий скрипт:

Этот файл dbconnect.php нужно будет подключить к обработчикам форм.

Обратите внимание на переменную $address_site, здесь я указал адрес (URL) моего тестового сайта, над которым буду работать. Вы соответственно, укажите адрес (URL) Вашего сайта.

Структура сайта

Теперь давайте разберёмся с HTML структурой нашего сайта.

Шапку и подвал сайта вынесем в отдельные файлы, header.php и footer.php. Их будем подключать на всех страницах. А именно на главной (файл index.php), на страницу с формой регистрации (файл form_register.php) и на страницу с формой авторизации (файл form_auth.php).

Блок с нашими ссылками, регистрация и авторизация, добавим в шапку сайта, чтобы они отображались на всех страницах. Одна ссылка будет ввести на страницу с формой регистрации (файл form_register.php) а другая на страницу с формой авторизации (файл form_auth.php).

Содержимое файла header.php:

Содержимое файла footer.php:

Подключение файлов header.php и footer.php будем делать с помощью функции require_once(«путь_к_файлу»).

И так, давайте подключим эти файлы к главному файлу нашего сайта index.php.

Для оформления вида страницы, в шапке (файл header.php) подключили файл стилей css/styles.css. Код данного файла сейчас нас не особо интересует, поэтому нет смысла его здесь показывать. Вы сможете увидеть его открыв этот файл css/styles.css, из архива с материалами данной статьи.

В итоге, главная страница, у нас выглядит так:

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

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

Теперь перейдём к форме регистрации. Как Вы уже поняли, она у нас находится в файле form_register.php.

Идём в Базу Данных (в phpMyAdmin), открываем структуру таблицы users и смотрим какие поля нам нужны. Значит, нам нужны поля для ввода имени и фамилии, поле для ввода почтового адреса(Email) и поле для ввода пароля. И ещё в целях безопасности добавим поле для ввода капчи.

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

Перед выводом формы добавляем блок для вывода сообщений об ошибках из сессии.

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

В общем, код файла form_register.php у нас получился таким:

В браузере, страница с формой регистрации выглядит так:

С помощью атрибута required, мы сделали все поля обязательными к заполнению.

Обратите внимание на код формы регистрации где выводится капча:

Мы в значение атрибута src для изображения, указали путь к файлу captcha.php, который генерирует данную капчу.

Посмотрим на код файла captcha.php:

Код хорошо закомментирован, поэтому я остановлюсь только на одном моменте.

Внутри функции imageTtfText(), указан путь к шрифту verdana.ttf. Так вот для корректной работы капчи, мы должны создать папку fonts, и поместить туда файл шрифта verdana.ttf. Его Вы можете найти и скачать из интернета, или взять из архива с материалами данной статьи.

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

Проверка email на валидность с помощью jQuery

Любая форма нуждается в проверки на валидность введённых данных, как на стороне клиента ( с помощью JavaScript, jQuery), так и на стороне сервера.

Особенную внимательность мы должны уделить полю Email. Очень важно чтобы введённый почтовый адрес был валидным.

Для данного поля input, мы задали тип email ( type=»email» ), это нас немножко предостерегает от неправильных форматов. Но, этого недостаточно, потому что через инспектор кода, которого предоставляет нам браузер, можно легко изменить значение атрибута type с email на text, и всё, наша проверка будет уже недействительна.

И в таком случае, мы должны сделать более надёжную проверку. Для этого, воспользуемся библиотекой jQuery от JavaScript.

Сразу после этой строчки, добавим код проверки валидации email. Здесь же добавим код проверки длины введённого пароля. Его длина должна быть не меньше 6 символов.

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

И так, с проверкой формы на клиентской части мы закончили. Теперь мы можем отправить её на сервер, где также сделаем пару проверок и добавим данные в БД.

Регистрация пользователя

Форму мы отправляем на обработку файлу register.php, через метод POST. Название данного файла обработчика, указано в значение атрибута action. А метод отправки указано в значение атрибута method.

Открываем этот файл register.php и первое что нам нужно сделать, это написать функцию запуска сессии и подключить созданный нами ранее файл dbconnect.php (В этом файле мы сделали подключение к БД). И ещё, сразу объявим ячейки error_messages и success_messages в глобальном массиве сессии. В error_mesages будем записывать все сообщения об ошибках возникающие при обработке формы, а в succes_messages, будем записывать радостные сообщения.

Перед тем как продолжить, мы должны проверить, была ли вообще отправлена форма. Злоумышленник, может посмотреть на значение атрибута action из формы, и узнать какой файл занимается обработкой данной формы. И ему может прийти в голову мысль перейти напрямую в этот файл, набирая в адресной строке браузера такой адрес: http://арес_сайта/register.php

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

Далее, нам необходимо проверить введённую капчу. То есть сравнивать полученное значение от пользователя со значением которая есть в сессии.

Значение капчи в сессии было добавлено при её генерации, в файле captcha.php. Для напоминания покажу ещё раз этот кусок кода из файла captcha.php, где добавляется значение капчи в сессию:

Теперь приступим к самой проверке. В файле register.php, внутри блока if, где проверяем была ли нажата кнопка «Зарегистрироваться», а точнее где указан комментарий » // (1) Место для следующего куска кода» пишем:

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

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

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

Этот код вставляем в указанное место «// (2) Место для следующего куска кода«.

Особенную важность имеет поле email. Мы должны проверить формат полученного почтового адреса и его уникальность в БД. То есть не зарегистрирован ли уже какой-то пользователь с таким же почтовым адресом.

В указанном месте «// (3) Место кода для проверки формата почтового адреса и его уникальности» добавляем следующий код:

И так, мы закончили со всеми проверками, пора добавить пользователя в БД. В указанном месте » // (4) Место для кода добавления пользователя в БД » добавляем следующий код:

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

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

С регистрацией мы закончили. Двигаемся дальше.

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

Форма авторизации находится у нас в файле form_auth.php. Она имеет поля для ввода почтового адреса, пароля и капчи.

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

Запуск сессии также происходит в файле header.php, поэтому в файле form_auth.php сессию запускать не нужно, потому что получим ошибку.

Код формы авторизации ( файл form_auth.php ):

В браузере, форма авторизации выглядит следующем образом:

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

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

Авторизация пользователя

В значение атрибута action у форы авторизации указан файл auth.php, это значит, что форма будет обрабатываться именно в этом файле.

И так, открываем файл auth.php и пишем код для обработки формы авторизации. Первое что нужно сделать это запустить сессию и подключить файл dbconnect.php для соединения с БД.

Дальше нам нужно проверить была ли нажата кнопка отправки формы (кнопка войти). То есть проверяем не зашёл ли злоумышленник напрямую в файл auth.php.

Дальше, в указанное место «//(1) Место для следующего куска кода«, пишем код для проверки капчи.

Если пользователь ввёл проверочный код правильно, то идём дальше, иначе возвращаем его на страницу авторизации.

Проверка почтового адреса

Дальше, проверяем формат полученного почтового адреса. В указанное место «//(2) Место для обработки почтового адреса» пишем:

Если пользователь ввёл почтовый адрес в неправильном формате или значение поля почтового адреса является пустой, то мы возвращаем его на страницу авторизации где выводим ему сообщение об этом.

Проверка пароля

Следующее поле для обработки, это поле с паролем. В указанное место «//(3) Место для обработки пароля«, пишем:

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

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

Выход с сайта

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

После того как пользователь прошёл авторизацию успешно, необходимо убрать эти ссылки и вместо них вывести ссылку выхода с сайта. Эта ссылка будет ввести на файл logout.php, где мы и произведём выход.

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

Модифицированный кусок кода из файла header.php:

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

Код файла logout.php:

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

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

Все скрипты проверены и рабочие. Архив с файлами этого маленького сайта Вы можете скачать по этой ссылке.

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

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

Видео формат статьи

Если Вы что-то не поняли, то можете посмотреть видео формат статьи.

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

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

Похожие статьи:

Понравилась статья?

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

Поделиться с друзьями:

Подписаться на новые статьи:

Поддержите пожалуйста мой проект!

Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu1607@gmail.com. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.

Автор статьи: Мунтян Сергей

Источник

Форма регистрации за 4 шага

В этом уроке будем создавать форму регистрации в четыре шага: 1. Ввод Логина и Пароля 2. Имя Фамилия и Адрес электронной почты 3. Возраст, Пол и Страна 4. Общая информация

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

Внутрь каждого блока мы поместим поля и простые label:

Мы использовали три поля ввода: Логин, Пароль и Подтвержение пароля, а в конце блока тег input с типом submit для перехода на следующий шаг. Другие блоки работают точно также.
В конце контейнера у нас простой индикатор выполнения, вот его код:

Полный html код такой:

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

Теперь добавим стили к форме. Будем применять правило @fontface для использования пользовательских шрифтов. В нашем случае это шрифт Cantarell. Полный код CSS приведен ниже:

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

Вот у нас и получилась форма с регистрацией в несколько шагов. Для использования данного примера нужно только изменить форму action с ссылкой на ваш php файл, используемый для хранения данных и отредактировать 132 строчку на:
$(‘form’).unbind(‘submit’).submit();. Чтобы посмотреть форму в действии нажмите на кнопку Демо.

Источник

Пособие по HTML-формам

Как работают HTML-формы?

Приведенное ниже изображение иллюстрирует общую концепцию:

Тег HTML-формы

Все элементы ввода HTML формы должны быть заключены в открывающийся и закрывающийся теги

Ниже перечислены атрибуты тега формы:

action=”Ссылка на скрипт процессора формы”

method =get|post (либо GET, либо POST)

Элементы ввода формы

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

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

Однострочное текстовое поле

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

Ниже приведен код, с помощью которого создается простое текстовое поле:

атрибут « type » сообщает браузеру, что должно быть создано однострочное текстовое поле.

задает название поля. name используется для идентификации поля на стороне сервера.

Существует еще несколько атрибутов, которые можно использовать для текстового поля:

value=”значение по умолчанию”

maxlength=”максимальное количество символов”

Задает максимальное количество символов, которое пользователь может ввести в текстовое поле.

Давайте расширим предыдущую HTML-форму несколькими текстовыми полями:

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

должны разбить элементы ввода на две строки.

Кнопка отправки

После ввода данных в HTML элементы формы пользователь нажимает кнопку их отправки на сервер. Вы можете добавить ее в форму с помощью значения ‘ submit ’:

name=»submit»

value=»Отправить»

Строка, заданная в атрибуте « value «, отображается как метка кнопки отправки.

Давайте соберем все вместе:

Скопируйте этот код в HTML-файл и откройте его в браузере.

Источник

Узнать, как создать адаптивную форму регистрации с помощью CSS.

Нажмите на кнопку, чтобы открыть форму регистрации:

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

Пожалуйста, заполните эту форму, чтобы создать учетную запись.

Создавая учетную запись, вы соглашаетесь с нашим Условия и конфиденциальность.

Создать форму регистрации

Шаг 1) Добавить HTML:

Шаг 2) Добавить CSS:

Пример

/* Поля ввода полной ширины */
input[type=text], input[type=password] <
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
>

input[type=text]:focus, input[type=password]:focus <
background-color: #ddd;
outline: none;
>

hr <
border: 1px solid #f1f1f1;
margin-bottom: 25px;
>

/* Установите стиль для всех кнопок */
button <
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
>

/* Дополнительные стили для кнопки «Отмена» */
.cancelbtn <
padding: 14px 20px;
background-color: #f44336;
>

/* Добавить отступы к элементам контейнера */
.container <
padding: 16px;
>

/* Очистить поплавки */
.clearfix::after <
content: «»;
clear: both;
display: table;
>

Создать модальную форму регистрации

Шаг 1) Добавить HTML:

Шаг 2) Добавить CSS:

Пример

*
/* Поля ввода полной ширины */
input[type=text], input[type=password] <
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
>

/* Добавить цвет фона, когда входы получают фокус */
input[type=text]:focus, input[type=password]:focus <
background-color: #ddd;
outline: none;
>

/* Установите стиль для всех кнопок */
button <
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
>

/* Дополнительные стили для кнопки «Отмена» */
.cancelbtn <
padding: 14px 20px;
background-color: #f44336;
>

/* Добавить отступы к элементам контейнера */
.container <
padding: 16px;
>

/* Модальный (фон) */
.modal <
display: none; /* Скрыто по умолчанию */
position: fixed; /* Оставаться на месте */
z-index: 1; /* Сидеть на вершине */
left: 0;
top: 0;
width: 100%; /* Полная ширина */
height: 100%; /* Полный высота */
overflow: auto; /* Включите прокрутку, если это необходимо */
background-color: #474e5d;
padding-top: 50px;
>

/* Модальное Содержание/Бокс */
.modal-content <
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% сверху, 15% снизу и по центру */
border: 1px solid #888;
width: 80%; /* Может быть больше или меньше, в зависимости от размера экрана */
>

/* Стиль горизонтальной линейки */
hr <
border: 1px solid #f1f1f1;
margin-bottom: 25px;
>

/* кнопка закрытия (x) */
.close <
position: absolute;
right: 35px;
top: 15px;
font-size: 40px;
font-weight: bold;
color: #f1f1f1;
>

.close:hover,
.close:focus <
color: #f44336;
cursor: pointer;
>

/* Снимите поплавки */
.clearfix::after <
content: «»;
clear: both;
display: table;
>

Совет: Вы также можете использовать следующий javascript для закрытия модального, щелкнув за пределами модального содержимого (а не только с помощью кнопки «x» или «отмена», чтобы закрыть его):

Пример

Совет: Зайдите на наш учебник HTML Форма, чтобы узнать больше о формах HTML.

Совет: Зайдите на наш учебник CSS Форма, чтобы узнать больше о том, как стилизовать элементы формы.

Источник