Как создать форму регистрации. Форма входа и регистрации с помощью HTML5 и CSS3. Пример создания формы регистрации

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

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

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

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

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

Итак, начнём!

Переходим в Google Документы (Диск) и авторизируемся в нем.

В левом углу жмем на кнопку создать и выбираем пункт Форма.

В новом окне появится редактор форм.

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

Жмем на кнопку “Готово”.

Переходим ко второму вопросу. Для этого выделяем его кликом мыши и жмем на иконку редактирования.
В качестве примера заполним этот вопрос так: Вопрос - Чем вы увлекаетесь?, Пояснение - Опишите ваши интересы и области, в которых вы себя считаете специалистами, Тип вопроса меняем на - Текст (абзац). Ставим галочку на “Сделать этот вопрос обязательным”.

Жмем на кнопку “Готово”.

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

Заполним этот вопрос так: Вопрос – Ваш пол, Пояснения – оставим пустым, Тип вопроса оставляем - Один из списка, Галочку на “Перейти на страницу ответа” – не ставим. Она вам понадобится, если вы решите создавать многостраничные формы. Опять ставим галочку на “Сделать этот вопрос обязательным”.

Жмем на кнопку “Готово”.

Добавляем новый элемент – “Несколько из списка”. Переписывать свои варианты не буду – просто посмотрите на картинку.

Жмем “Готово”.

Добавляем новый элемент – “Выпадающий список”. Заполняем как на картинке.

Жмем “Готово”. Добавляем новый элемент – “Шкала”. Как и раньше – заполните по примеру на картинке.

Жмем “Готово”. Смотреться будет так:

Добавляем новый элемент – ”Сетка”. Заполняем…

Смотрим..

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

Полученный код добавляем в свою страничку и любуемся результатом.

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

Не будем расслабляться и продолжим рассматривать возможности Документов Google для создания форм.

Давайте закончим рассмотрение редактора форм, а затем перейдем к работе с документами.

В меню “Добавить элемент” у нас осталось два неописанных пункта – это “Заголовок раздела” и “Разрыв страницы”. Я их обычно использую вместе. Иногда форма получается слишком вытянутой и целесообразно разбить ее на две части. Для этих целей и служит “Разрыв страницы”. А вот “Заголовок раздела” я добавляю после разрыва, чтобы пользователь не забывал, что он заполняет и для чего.

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

Теперь вернемся к меню “Дополнительные действия”, в котором мы не рассмотрели пункт “Изменить подтверждение”.
Здесь вы можете написать свой текст, который пользователь увидит после заполнения формы. Галочка “Опубликовать сводку ответов” покажет ссылку на результаты вашего опроса пользователям. Не рекомендую ее ставить в формах регистрации на онлайн мероприятия, так как личные данные пользователя лучше не светить в Интернете.

Следующее меню “Просмотреть ответы”. Оно содержит всего два пункта: “Сводка” и “Таблица”.

Следующее меню “Отправить по электронной почте” позволяет отправить вашу форму на почту пользователя.

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

Кликните мышкой по документу. Он откроется в новом окне.

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

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

Для редактирования формы регистрации вам необходимо будет в меню “Формы” выбрать пункт “Изменить форму”.

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

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

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

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

Проще тем, кто использует функциональность CMS, так как данные системы имеют готовые модули для работы с веб-формами. Правда их возможности ограничены. В остальных случаях необходимо изучать языки программирования (такие как PHP, HTML) и разобраться с системой управления базами данных (можно потратить много сил, а главное времени, но так и не добиться результата). Есть еще один вариант – нанять специалиста, который выполнит поставленную задачу. Но работа программистов стоит недешево, а как быть, если средств на оплату работы не хватает?

Совсем недавно появился новый способ создания веб-форм (регистрационной, формы обратной связи, онлайн заказа товаров или услуг и т.д.), не требующий знаний языков программирования (PHP, HTML) и прочих веб-технологий (CSS, MySQL) – это сервис MyTaskHelper.ru – онлайн конструктор форм. Данный сайт имеет интуитивно понятный интерфейс и не требует каких либо знаний в области программирования.

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

1.Во-первых пройти процесс регистрации и активации аккаунта (занимает меньше минуты);

2.Создать проект и форму (для каждого проекта можно создать сколько угодно форм);

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

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

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

6.Вот и все, регистрационная форма готова. Скопируйте код для вставки и разместите его на нужной веб-странице.

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

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

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

Элемент создаёт надписи к полям формы. Существует два способа группировки надписи и поля. Если поле находится внутри элемента , то атрибут for указывать не нужно.

Last Name Last Name Last Name

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

Контактная информация Имя E-mail
Рис. 1. Группировка полей формы

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

Обязательные для заполнения поля также необходимо выделять. До появления HTML5 использовался символ звездочки * , установленный возле названия поля. В новой спецификации появился специальный атрибут required , который позволяет отметить обязательное поле на уровне разметки. Этот атрибут дает указание браузеру (при условии, что тот поддерживает HTML5), указание не отправлять данные после нажатия пользователем кнопки отправить, пока указанные поля не заполнены.

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

Input:focus { background: #eaeaea; }

Ещё один полезный html5-атрибут — атрибут autofocus . Он позволяет автоматически установить фокус на нужном начальном поле для элементов и (только в один элемент каждой формы).

HTML разметка

Регистрация Имя Пол мужской женский E-mail Страна Выберите страну проживания Россия Украина Беларусь Отправить

Примечание
action="form.php" — ссылка на файл обработчика формы. Создайте файл в кодировке UTF-8, закачайте его на сервер и замените action="form.php" на путь к файлу на вашем сервере.

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

Form-wrap { width: 550px; background: #ffd500; border-radius: 20px; } .form-wrap *{transition: .1s linear} .profile { width: 240px; float: left; text-align: center; padding: 30px; } form { background: white; float: left; width: calc(100% - 240px); padding: 30px; border-radius: 0 20px 20px 0; color: #7b7b7b; } .form-wrap:after, form div:after { content: ""; display: table; clear: both; } form div { margin-bottom: 15px; position: relative; } h1 { font-size: 24px; font-weight: 400; position: relative; margin-top: 50px; } h1:after { content: "\f138"; font-size: 40px; font-family: FontAwesome; position: absolute; top: 50px; left: 50%; transform: translateX(-50%); } /********************** стилизация элементов формы **********************/ label, span { display: block; font-size: 14px; margin-bottom: 8px; } input, input { border-width: 0; outline: none; margin: 0; width: 100%; padding: 10px 15px; background: #e6e6e6; } input:focus, input:focus { box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); } .radio label { position: relative; padding-left: 50px; cursor: pointer; width: 50%; float: left; line-height: 40px; } .radio input { position: absolute; opacity: 0; } .radio-control { position: absolute; top: 0; left: 0; height: 40px; width: 40px; background: #e6e6e6; border-radius: 50%; text-align: center; } .male:before { content: "\f222"; font-family: FontAwesome; font-weight: bold; } .female:before { content: "\f221"; font-family: FontAwesome; font-weight: bold; } .radio label:hover input ~ .radio-control, .radiol input:focus ~ .radio-control { box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); } .radio input:checked ~ .radio-control { color: red; } select { width: 100%; cursor: pointer; padding: 10px 15px; outline: 0; border: 0; background: #e6e6e6; color: #7b7b7b; -webkit-appearance: none; /*убираем галочку в webkit-браузерах*/ -moz-appearance: none; /*убираем галочку в Mozilla Firefox*/ } select::-ms-expand { display: none; /*убираем галочку в IE*/ } .select-arrow { position: absolute; top: 38px; right: 15px; width: 0; height: 0; pointer-events: none; /*активизируем показ списка при нажатии на стрелку*/ border-style: solid; border-width: 8px 5px 0 5px; border-color: #7b7b7b transparent transparent transparent; } button { padding: 10px 0; border-width: 0; display: block; width: 120px; margin: 25px auto 0; background: #60e6c5; color: white; font-size: 14px; outline: none; text-transform: uppercase; } /********************** добавляем форме адаптивность **********************/ @media (max-width: 600px) { .form-wrap {margin: 20px auto; max-width: 550px; width:100%;} .profile, form {float: none; width: 100%;} h1 {margin-top: auto; padding-bottom: 50px;} form {border-radius: 0 0 20px 20px;} }

Файл form.php

Примечание
В переменной $subject укажите текст, который будет отображаться как заголовок письма;
Ваше_имя — здесь вы можете указать имя, которое будет отображаться в поле «от кого письмо» ;
url_вашего_сайта замените на адрес сайта с формой регистрации;
ваш_email замените на ваш адрес электронной почты;
$headers .= "Bcc: ваш_email". "\r\n"; отправляет скрытую копию на ваш адрес электронной почты.

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

Этот сервис называется federated login , и построен на основе протокола OAuth2 . Это сложный процесс, который включает в себя обмен данными между вашим сервером и Google, но мы оставим всю эту работу PHP-библиотеке от Google , которая будет почти все обрабатывать на стороне сервера.

Используя этот сервис вы можете значительно упростить процесс авторизации/регистрации для вас и ваших пользователей. Вот некоторые из преимуществ:

• Не нужно создавать и проверять формы регистрации и авторизации;
• Нет необходимости в функции восстановления забытого пароля;
• Очень упрощенная авторизация/регистрация - вы получите электронную почту человека, имя и фото с помощью одного щелчка мыши;
• Адрес уже проверен Google, так что вам не нужно отправлять сообщение для подтверждения.
• Серьезная безопасность со стороны Google.

Конечно, это будет работать только если у человека есть аккаунт Google, поэтому имеет смысл использовать этот сервис как дополнение к существующей системе регистрации. Итак, давайте начнем!

Первый шаг заключается в создании нового приложения через Google’s API Console . Следуйте инструкциям для получения дополнительной информации. После завершения процесса, скопируйте полученные ключи в файл setup.php.

Запустите код из schema.sql (вы можете найти его в архиве) в PhpMyAdmin или ему подобном инструменте. Он создаст glogin_users таблицу в базе данных, которая будет использоваться для хранения информации об учетных записях пользователей вашего приложения. После этого, напишите свои данные подключения к базе данных в setup.php.

Форму входа мы делаем используя Google’s Federated login. Это означает, что посетители вашего веб-сайта переходят по ссылке на страницу Google, где они предоставляют приложению доступ к своему аккаунту, и затем будут перенаправлены обратно. После этого вы получаете token для доступа, который можно использовать для запроса информации о них. Вот упрощенное описание процесса авторизации:

• Когда пользователь нажимает кнопку "Sign in with Google " в нашем демо, они переходят на страницу авторизации Google, где они видят, какие разрешения просит наше приложение.
• После разрешения дать доступ этому приложению, они будут перенаправлены обратно на сайт, при этом специальный параметр code передается в URL. Наше приложение будет использовать этот код, чтобы получить token доступа;
• С помощью token, приложение запрашивает информацию о пользователе, которая сохраняется в базу данных.

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

Наш PHP-код организован следующим образом:

• index.php - это основной файл приложения;
• setup.php - этот файл содержит информацию соединения с базой данных и ключи полученные из Google’s API Console;
• Папка library - содержит библиотеку Idiorm, PHP библиотеки Google, и класс для включения метки относительного времени.

Давайте взглянем на код в начале index.php:

require "setup.php" ; // Create a new Google API client
$client = new apiClient() ;
//$client->setApplicationName("Tutorialzine"); // Configure it
$client -> setClientId ($client_id ) ;
$client -> setClientSecret ($client_secret ) ;
$client -> setDeveloperKey ($api_key ) ;
$client -> setRedirectUri ($redirect_url ) ;
$client -> setApprovalPrompt (false ) ;
$oauth2 = new apiOauth2Service($client ) ; // The code parameter signifies that this is
// a redirect from google, bearing a temporary code
if (isset ($_GET [ "code" ] ) ) { // This method will obtain the actuall access token from Google,
// so we can request user info
$client -> authenticate () ; // Get the user data
$info = $oauth2 -> userinfo -> get () ; // Find this person in the database
$person = ORM:: for_table ("glogin_users" ) -> where ("email" , $info [ "email" ] ) -> find_one () ; if (! $person ) {
// No such person was found. Register! $person = ORM::for_table("glogin_users")->create(); // Set the properties that are to be inserted in the db
$person -> email = $info [ "email" ] ;
$person -> name = $info [ "name" ] ;

if (isset ($info [ "picture" ] ) ) {
// If the user has set a public google account photo
$person -> photo = $info [ "picture" ] ;
}
else {
// otherwise use the default
$person -> photo = "assets/img/default_avatar.jpg" ;
} // insert the record to the database
$person -> save () ;
} // Save the user id to the session
$_SESSION [ "user_id" ] = $person -> id () ; // Redirect to the base demo URL
header ("Location: $redirect_url " ) ;
exit ;
} // Handle logout
if (isset ($_GET [ "logout" ] ) ) {
unset ($_SESSION [ "user_id" ] ) ;
} $person = null ;
if (isset ($_SESSION [ "user_id" ] ) ) {
// Fetch the person from the database
$person = ORM:: for_table ("glogin_users" ) -> find_one ($_SESSION [ "user_id" ] ) ;
}

Что происходит здесь, мы проверяем наличие code в $ _GET параметрах. Как я уже упоминал выше, этот параметр установливается Google, когда пользователь перенаправляется обратно после того как разрешит доступ приложению. Затем мы запрашиваем информацию о пользователе и записываем её в базу данных. Идентификатор пользователя (значение идентификатора в базе данных) записывается в сессию. Он сохраняется между запросами и используется в качестве флага, о том что пользователь прошел идентификацию

Если вы хотите узнать больше о OAuth, прочитайте соответствующую информацию от Google по этому вопросу. Там вы также можете увидеть таблицу с полями которые возвращает метод get().

Ближе к концу, мы определяем переменную $person . Она содержит объект, который возвращается библиотекой Idiorm, со свойствами для каждого столбца таблицы glogin_users . Вы можете видеть, как этот объект используется в следующем разделе.

HTML-код для нашего примера находится в нижней части index.php. Поэтому у нас есть доступ к объекту $person , который пригодиться при выводе на экран имени и фотографии пользователя. Сама страница является стандартным документом HTML5:

Google Powered Login Form




Login Form