Гаджеты

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

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

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

Скрипт был успешно протестирован на версии PHP 5.3.3 и PHP 5.6.3

Что умеет и имеет скрипт

  • Регистрировать новых пользователей;
  • Авторизовывать пользователей и записывать куки на определённый срок (нет необходимости каждый раз авторизовываться);
  • Показывать и скрывать определённую информацию для авторизованных и не авторизованных соответственно;
  • Имеет АДМИН ПАНЕЛЬ , где можно редактировать все данные и удалять пользователей.

Там же DEMO и Админ Панели

1 ШАГ .
Если вы используете скрипт регистрации и авторизации на локалке с помощью DENWER, то изменения в файлах для соединения с базой данных делать не нужно.
В противном случае откройте файлы: stayt.php , classes/Auth.class.php и adminka/connect.php , и в самом верху замените данные для связи с базой данных на свои.

2 ШАГ .
Переходим (если используете DENWER) по адресу: http://localhost/Tools/phpmyadmin/ , если на хостинге, то нажимаете Базы Данных, и создаёте новую базу с именем: registr и сравнение: utf8_general_ci .
Вы можете задать разумеется своё имя, но тогда замените его обязательно в файлах для соединения с базой (см. шаг 1).

3 ШАГ .
Нажмите на созданную базу registr и затем на верхнюю вкладку SQL и в появившееся окно для ввода вставьте этот код и нажмите ОК.

CREATE TABLE IF NOT EXISTS `my_users` (`id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(255) NOT NULL, `names` varchar(15) NOT NULL, `password` varchar(255) NOT NULL, `salt` varchar(100) NOT NULL, PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8;

Всё! Переходите в браузере по своему адресу, пробуйте и экспериментируйте.

Админ Панель

После того, как вы сделали хоть одну регистрацию, можете перейти в АДМИНКУ.
Вход в АДМИН-ПАНЕЛЬ :

Http://Ваш_сайт.ru/adminka/

Не забудьте запоролить эту папку для безопасности и можно так же переименовать её.
При открытие Админ Панели нажмите кнопку ПОИСК и вам отобразятся все зарегистрированные пользователи, где при нажатие на определённый номер ID , вам откроются данные пользователя для редактирования.

Можно так же быстро найти пользователя по его E-mail, для этого достаточно ввести в поле для ПОИСКа известную электронную почту и нажать на кнопку.
Кнопкой ДОБАВИТЬ не советую пользоваться, так как пользователь добавляется в систему без пароля. И не имею понятия зачем её вообще сделали.

На этом всё, что не получается или не понятно, - задавайте вопросы.


Попутно можете попробовать для продажи информации (товаров).

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" на путь к файлу на вашем сервере.


Рис. 2. Внешний вид формы по умолчанию

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

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"; отправляет скрытую копию на ваш адрес электронной почты.

Инструкция

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

Открываем html файл и начинаем ввод кода. Тэг отвечающий за создание формы - "form". Записываем тэг вместе с атрибутами "form action=”obrabotka.php” method=”post” name”forma1”". Приступаем к созданию элементов формы. Практически все элементы делаются с помощью тэга , и его атрибут “type”, который отвечает за тип данных, к примеру текста, пароля и прочего. Всегда задаем имя “name“ любому из атрибутов.

Прописываем: "br"Введите фио:"br"

"input type="text" name="fio""

"br" Введите пароль:"br"

"input type="password" name="pass""

"br"Введите E-mai:l"br"

"input type="text" name="email"".

Далее создаем элемент выбора радио кнопки. Радио кнопка это элемент формы, который при нажатии на нее курсором , а другие радио кнопки выключаются. Поясним примером нашей формы. При заказе курса выбор будет состоять либо из CD либо DVD , поэтому нужно выбрать что то одно. Отвечает за создание такой кнопки элемент атрибута “type” – “radio”. Мы будем прописывать одно и тоже имя для вида носителя, поэтому укажем атрибут “value” для того, чтобы обработчик смог точно определить значение переменной. Прописываем код: "br"Выберите вариант носителя информации:"br"

"input type="radio" name="disc" value="cd"" CD "br"

"input type="radio" name="disc" value="dvd"" DVD "br"

Если атрибут “value” поставить к тексту, то в форме сразу будет отображаться то значение которое мы присвоили этому атрибуту. Например чтобы в форме ФИО уже стояло какое нибудь имя(value=”имя”).

Введите другой элемент и установите type равным "checkbox", чтобы предоставить пользователям возможность отметить более одного варианта в форме . Для примера:
(Свяжитесь со мной, когда будет отправлен)
(Подписаться на )

Создайте кнопку «Отправить», набрав тег и type равным "submit", value присвойте значение «Отправить». Кроме того, в другом теге сделайте кнопку «Сброс», установив type равным "reset", а value соотвественно «Сброс». Например, так:


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

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

Источники:

  • Сайт Консорциума W3C
  • форма заказа товара для сайта

Форма регистрации является встроенным модулем панели Joomla. Для того чтобы ее добавить, не требуется быть экспертом в веб-программировании. Однако если вы решили изменить ее, то реализовать это можно при помощи компонента Community Builder или вручную. Нужно лишь отредактировать нужные элементы, изучив основы сайтостроения.

Инструкция

Зайдите в административную панель Joomla и откройте настройки встроенных модулей. Перейдите на вкладку «Расширенные» и нажмите на кнопку «Создать». Появится окно «Менеджера модулей», в котором необходимо выбрать и активировать форму регистрации . Укажите желаемое название для заголовка поставьте галочку возле строки «Показать заголовок».

Откройте раздел «Начальный текст» в модуле формы регистрации и отредактируйте стандартный текст для посетителей, если он вам не подходит. В пункте «Логин» вы можете выбрать, как будет именоваться пользователь на сайте: под своим именем или логином. Нажмите кнопку «Сохранить», чтобы изменения вступили в силу.

Загрузите компонент Community Builder на ваш сайт. Для этого перейдите в раздел «Загрузить файл пакета» и нажмите кнопку «Обзор». После выбора нужных документов щелкните на кнопку «Загрузить и установить». Перейдите в панель администратора и запустите установленный компонент.

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

Создайте резервную копию файлов, которые вы будете изменять для внесения корректировок в форму регистрации . Это позволит вам откатить все действия и восстановить работоспособность сайта в случае неудачи. Определите, какие поле вы хотите отредактировать или добавить. К примеру, вы хотите добавить в форму регистрации поле «Город».

Откройте файл default.php, который находится по ссылке components/com_user/views/register/tmpl. Добавьте отображение «Города», вставив в форму регистрации соответствующий HTML-код. Для этого вы можете скопировать любой другой пункт и отредактировать его под город (city). Внесите данные изменения в таблицу jos_users. Откройте файл user.php, который находится по ссылке libraries/joomla/database/table. Добавьте в него новую переменную. Сохраните настройки и перезапустите сайт.

Источники:

  • как изменить модуль в joomla
Совет 7: Как сделать временную регистрацию без собственника

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

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

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

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

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

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

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

Совет 8: Как заполнить форму 3-ндфл по продаже автомобиля

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

Вам понадобится

  • - компьютер;
  • - доступ в интернет;
  • - программа «Декларация» от ГНИВС ФНС РФ;
  • - договор купли-продажи автомобиля;
  • - документы, подтверждающие прочие ваши доходы и уплату с них НДФЛ за прошлый год.

Инструкция

Скачать самую свежую версию программы вы можете на сайте Главного научно-исследовательского центра Федеральной налоговой службы (ГНИВЦ ФНС) России. Она распространяется

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

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

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

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

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

Установка

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

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

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

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





Google Powered Login Form




Login Form