В этом уроке мы создадим стильную форму авторизации на сайте, вы можете её найти в Futurico UI Pro , созданном Владимиром Кудиновым. Для создания формы мы будем использовать CSS3 и jQuery.

Начнем с создания HTML-разметки. Создадим форму с четырьмя input-ами (имя пользователя, пароль, чекбокс и кпонка "submit") флажок мы обернем в тег span, который мы будем использовать для стилизации этого флажка. Затем обернем форму и заголовок в тег DIV и назначим ему класс "login-form".

Login Form

remember

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

Login-form,
.login-form h1,
.login-form span,
.login-form input,
.login-form label {
margin : 0 ;
padding : 0 ;
border : 0 ;
outline : 0 ;
}

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

Login-form {
position : relative ;
width : 200px ;
height : 200px ;
padding : 15px 25px 0 25px ;
margin-top : 15px ;
cursor : default ;

background-color : #141517 ;

Webkit-border-radius: 5px ;
-moz-border-radius: 5px ;
border-radius: 5px ;

Webkit-box-shadow: 0px 1px 1px 0px rgba(255 , 255 , 255 , .2) , inset 0px 1px 1px 0px rgb (0 , 0 , 0 ) ;
-moz-box-shadow: 0px 1px 1px 0px rgba(255 , 255 , 255 , .2) , inset 0px 1px 1px 0px rgb (0 , 0 , 0 ) ;
box-shadow: 0px 1px 1px 0px rgba(255 , 255 , 255 , .2) , inset 0px 1px 1px 0px rgb (0 , 0 , 0 ) ;
}

Чтобы создать стрелку, мы будем использовать селектор :before .

Login-form :before {
position : absolute ;
top : -12px ;
left : 10px ;

width : 0px ;
height : 0px ;
content : "" ;

border-bottom : 10px solid #141517 ;
border-right : 10px solid #141517 ;
border-top : 10px solid transparent ;
border-left : 10px solid transparent ;
}

Добавим некоторые стили для заголовка формы (цвет, шрифт и размер, и т.д.).

Login-form h1 {
line-height : 40px ;
font-family : "Myriad Pro" , sans-serif ;
font-size : 22px ;
font-weight : normal ;
color : #e4e4e4 ;
}

Сначала зададим основные стили для input-ов.

line-height : 14px ;
margin : 10px 0 ;
padding : 6px 15px ;
border : 0 ;
outline : none ;

font-family : Helvetica, sans-serif ;
font-size : 12px ;
font-weight : bold ;
text-shadow : 0px 1px 1px rgba(255 , 255 , 255 , .2) ;

Webkit-border-radius: 26px ;
-moz-border-radius: 26px ;
border-radius: 26px ;

Webkit-transition: all .15s ease-in-out;
-moz-transition: all .15s ease-in-out;
-o-transition: all .15s ease-in-out;
transition: all .15s ease-in-out;
}

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

Login-form input[ type= text ] ,
.login-form input[ type= password] ,
.js .login-form span {
color : #686868 ;
width : 170px ;

Webkit-box-shadow: inset 1px 1px 1px 0px rgba(255 , 255 , 255 , .6) ;
-moz-box-shadow: inset 1px 1px 1px 0px rgba(255 , 255 , 255 , .6) ;
box-shadow: inset 1px 1px 1px 0px rgba(255 , 255 , 255 , .6) ;

background : #989898 ;
background : -moz-linear-gradient(top , #ffffff 0% , #989898 100% ) ;
background : -webkit-gradient(linear, left top , left bottom , color-stop(0% , #ffffff ) , color-stop(100% , #989898 ) ) ;
background : -webkit-linear-gradient(top , #ffffff 0% , #989898 100% ) ;
background : -o-linear-gradient(top , #ffffff 0% , #989898 100% ) ;
background : -ms-linear-gradient(top , #ffffff 0% , #989898 100% ) ;
background : linear-gradient(top , #ffffff 0% , #989898 100% ) ;
}

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

Login-form input[ type= text ] :hover ,
.login-form input[ type= password] :hover {
-webkit-box-shadow: inset 1px 1px 1px 0px rgba(255 , 255 , 255 , .6) , 0px 0px 5px rgba(255 , 255 , 255 , .5) ;
-moz-box-shadow: inset 1px 1px 1px 0px rgba(255 , 255 , 255 , .6) , 0px 0px 5px rgba(255 , 255 , 255 , .5) ;
box-shadow: inset 1px 1px 1px 0px rgba(255 , 255 , 255 , .6) , 0px 0px 5px rgba(255 , 255 , 255 , .5) ;
}

Для активного состояния мы изменим CSS3 градиент на немного более светлый

Login-form input[ type= text ] :focus ,
.login-form input[ type= password] :focus {
background : #e1e1e1 ;
background : -moz-linear-gradient(top , #ffffff 0% , #e1e1e1 100% ) ;
background : -webkit-gradient(linear, left top , left bottom , color-stop(0% , #ffffff ) , color-stop(100% , #e1e1e1 ) ) ;
background : -webkit-linear-gradient(top , #ffffff 0% , #e1e1e1 100% ) ;
background : -o-linear-gradient(top , #ffffff 0% , #e1e1e1 100% ) ;
background : -ms-linear-gradient(top , #ffffff 0% , #e1e1e1 100% ) ;
background : linear-gradient(top , #ffffff 0% , #e1e1e1 100% ) ;
}

Расположим кнопку справа, для этого зададим ей float:right.

Login-form input[ type= submit] {
float : right ;
cursor : pointer ;

color : #445b0f ;

Webkit-box-shadow: inset 1px 1px 1px 0px rgba(255 , 255 , 255 , .45) , 0px 1px 1px 0px rgba(0 , 0 , 0 , .3) ;
-moz-box-shadow: inset 1px 1px 1px 0px rgba(255 , 255 , 255 , .45) , 0px 1px 1px 0px rgba(0 , 0 , 0 , .3) ;
box-shadow: inset 1px 1px 1px 0px rgba(255 , 255 , 255 , .45) , 0px 1px 1px 0px rgba(0 , 0 , 0 , .3) ;
}

При наведении мыши изменим тени, а в активном состоянии - удалим их.

Login-form input[ type= submit] :hover {
-webkit-box-shadow: inset 1px 1px 3px 0px rgba(255 , 255 , 255 , .8) , 0px 1px 1px 0px rgba(0 , 0 , 0 , .6) ;
-moz-box-shadow: inset 1px 1px 3px 0px rgba(255 , 255 , 255 , .8) , 0px 1px 1px 0px rgba(0 , 0 , 0 , .6) ;
box-shadow: inset 1px 1px 3px 0px rgba(255 , 255 , 255 , .8) , 0px 1px 1px 0px rgba(0 , 0 , 0 , .6) ;
}

Login-form input[ type= submit] :active {
-webkit-box-shadow: none ;
-moz-box-shadow: none ;
box-shadow: none ;
}

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

Login-form input[ type= submit] ,
.js .login-form span.checked :before {
background : #a5cd4e ;
background : -moz-linear-gradient(top , #a5cd4e 0% , #6b8f1a 100% ) ;
background : -webkit-gradient(linear, left top , left bottom , color-stop(0% , #a5cd4e ) , color-stop(100% , #6b8f1a ) ) ;
background : -webkit-linear-gradient(top , #a5cd4e 0% , #6b8f1a 100% ) ;
background : -o-linear-gradient(top , #a5cd4e 0% , #6b8f1a 100% ) ;
background : -ms-linear-gradient(top , #a5cd4e 0% , #6b8f1a 100% ) ;
background : linear-gradient(top , #a5cd4e 0% , #6b8f1a 100% ) ;
}

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

Самый простой способ, который я нашел, это заменить флажок тегом span.

Это будет работать следующим образом: сначала мы спрячем флажок и зададим такие стили для тега span, чтобы он выглядел как флажок, а затем мы будем обновлять этот флажок (отмечен/не отмечен) с помощью jQuery.

Поскольку у некоторых пользователей отключен JavaScript, нужно добавить резервный вариант. Для этого мы будем добавлять "js" класс в тег body при помощи jQuery. Таким образом, если JavaScript будет включен, класс "js" будет добавлен к тегу body при загрузки страницы, а если JavaScript отключен, то класс не будет добавлен. Так что только пользователи с поддержкой JavaScript будут видеть стилизованный флажок.

Сначала мы спрячем флажок.

.js .login-form input[ type= checkbox] {
position : fixed ;
left : -9999px ;
}

Затем мы разместим в нужном нам месте тег span.

.login-form span {
position : relative ;
margin-top : 15px ;
float : left ;
}

Затем добавим некоторые стили для тега span (ширину, высоту, границу и др.).

.js .login-form span {
width : 16px ;
height : 16px ;
cursor : pointer ;

Webkit-border-radius: 2px ;
-moz-border-radius: 2px ;
border-radius: 2px ;
}

Чтобы создать состояние "checked", в span мы вставим маленький квадрат и поместим его в центре.

.js .login-form span.checked :before {
content : "" ;
position : absolute ;
top : 4px ;
left : 4px ;
width : 8px ;
height : 8px ;

Webkit-box-shadow: 0px 1px 1px 0px rgba(255 , 255 , 255 , .45) , inset 0px 1px 1px 0px rgba(0 , 0 , 0 , .3) ;
-moz-box-shadow: 0px 1px 1px 0px rgba(255 , 255 , 255 , .45) , inset 0px 1px 1px 0px rgba(0 , 0 , 0 , .3) ;
box-shadow: 0px 1px 1px 0px rgba(255 , 255 , 255 , .45) , inset 0px 1px 1px 0px rgba(0 , 0 , 0 , .3) ;
}

Тег label мы разместим справа от флажка и добавим некоторые основные стили (шрифт, цвет и т.д.).

.login-form label {
position : absolute ;
top : 1px ;
left : 25px ;
font-family : sans-serif ;
font-weight : bold ;
font-size : 12px ;
color : #e4e4e4 ;
}

Все стили, которые имеют класс "js" в начале, будут применяться только если включена поддержка JavaScript.

Сначала мы подключим последнюю версию библиотеки jQuery, используя Google API, если вы хотите, вы можете разместить её на своем собственном сервере, это ваш выбор. Затем добавьте следующий код в нижней части HTML-файла, перед закрывающим тегом .

< script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" >
< script>
$(document) .ready (function () {

// Check if JavaScript is enabled
$("body" ) .addClass ("js" ) ;

// Make the checkbox checked on load
$(".login-form span" ) .addClass ("checked" ) .children ("input" ) .attr ("checked" , true ) ;

// Click function
$(".login-form span" ) .on ("click" , function () {

if ($(this ) .children ("input" ) .attr ("checked" ) ) {
$(this ) .children ("input" ) .attr ("checked" , false ) ;
$(this ) .removeClass ("checked" ) ;
}

else {
$(this ) .children ("input" ) .attr ("checked" , true ) ;
$(this ) .addClass ("checked" ) ;
}
} ) ;
} ) ;

Вначале мы добавим класс "js" в тег body.

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

Доброго времени суток друзья! Давай с Вами рассмотрим регистрацию пользователей на PHP. Для начала давайте определим условия для нашей регистрации пользователей:

• Пароль шифруем при помощи алгоритма MD5
• Пароль будем "солить"
• Проверка на занятость Логина
• Активация пользователя письмом.
• Запись и хранение данных в СУБД MySQL

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

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

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

Рассмотрим структуру каталогов скриптов для реализации нашей регистрации с авторизацией. Нам нужно разбить скрипты на логические составляющие. Модули регистрации и авторизации мы поместив в отдельный каталог. Так же в отдельные каталоги мы поместим подключение к базе данных MySQL , файл с пользовательскими функциями, файл стилей CSS и наш шаблон HTML . Данная структура позволяет быстро ориентироваться в скриптах. Представьте себе, что у Вас большой сайт с кучей модулями и т.д. и если не будет порядка, то будет очень сложно что-то отыскать в таком бардаке.

Так как мы будем хранить все данные в СУБД MySQL , то давайте создадим не большую таблицу в которой будем хранить данные о регистрации.

Для начала нужно создать таблицу в базе данных. Таблицу назовем bez_reg где bez - это префикс таблицы, а reg название таблицы.

less/reg/?mode=auth">Войти