This is in continuation of the tutorial on making a membership based web site. Please see the previous page for more details.

Download the code

You can download the whole source code for the registration/login system from the link below:

The ReadMe.txt file in the download contains detailed instructions.

The login form

Here is the HTML code for the login form.

Login UserName*: Password*:

Logging in

We verify the username and the password we received and then look up those in the database. Here is the code:

function Login() { if(empty($_POST["username"])) { $this->HandleError("UserName is empty!"); return false; } if(empty($_POST["password"])) { $this->HandleError("Password is empty!"); return false; } $username = trim($_POST["username"]); $password = trim($_POST["password"]); if(!$this->CheckLoginInDB($username,$password)) { return false; } session_start(); $_SESSION[$this->GetLoginSessionVar()] = $username; return true; }

In order to identify a user as authorized, we are going to check the database for his combination of username/password, and if a correct combination was entered, we set a session variable.

Here is the code to look up the username and password.

function CheckLoginInDB($username,$password) { if(!$this->DBLogin()) { $this->HandleError("Database login failed!"); return false; } $username = $this->SanitizeForSQL($username); $pwdmd5 = md5($password); $qry = "Select name, email from $this->tablename ". " where username="$username" and password="$pwdmd5" ". " and confirmcode="y""; $result = mysql_query($qry,$this->connection); if(!$result || mysql_num_rows($result) HandleError("Error logging in. ". "The username or password does not match"); return false; } return true; }

Please notice that we must compare the value for the password from the database with the MD5 encrypted value of the password entered by the user. If the query returns a result, we set an “authorized” session variable, and then redirect to the protected content. If there are no rows with the entered data, we just redirect the user to the login form again.

Access controlled pages

For those pages that can only be accessed by registered members, we need to put a check on the top of the page.
Notice that we are setting an “authorized” session variable in the login code above. On top of pages we want to protect, we check for that session variable. If user is authorized, we show him the protected content, otherwise we direct him to the login form.

Include this sample piece of code on top of your protected pages:

See the file: access-controlled.php in the downloaded code for an example.

Here is the CheckLogin() function code.

function CheckLogin() { session_start(); $sessionvar = $this->GetLoginSessionVar(); if(empty($_SESSION[$sessionvar])) { return false; } return true; }

These are the basics of creating a membership site. Now that you have the basic knowledge, you can experiment with it and add new features, such as a “Forgot password” page to allow the user to retrieve or change his password if he forgets it.

Updates

9th Jan 2012
Reset Password/Change Password features are added.
The code is now shared at GitHub .

License

The code is shared under LGPL license. You can freely use it on commercial or non-commercial websites.

No related posts.

Comments on this entry are closed.

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

Первое поле – для логина, второе – для пароля. И вот со вторым не все так просто. Поскольку на текущий момент оно представляет собой просто поле для ввода текста.

Логин
Пароль

Результат в браузере:

Чтобы введенный в нем текст заменялся на звездочки, как это принято для поля такого типа, необходимо сделать одно простое действие. А именно, осуществить замену значения атрибута type на password :

Результат:

Кнопка отправки формы

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

Если на кнопке должна присутствовать какая-то надпись, то ее можно сделать, используя атрибут value . Задавать имя кнопке или нет – на ваше усмотрение, но если вы это сделаете, то сервер будет получать это имя, а также значение кнопки.

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

В итоге код нашей формы получится следующим:

Логин
Пароль

Результат в браузере:

HTML5 дает много возможностей и улучшений для веб-форм, появились новые атрибуты и типы полей, которые были введены, главным образом, чтобы сделать жизнь веб-разработчикам проще, а работу с формами более удобной для веб-пользователей. Сегодня мы будем делать страницу авторизации при помощи html5. Если вы не знакомы с новыми «полезностями» для форм, этот урок вам поможет.

Окончательный результат:

Пишем разметку

Давайте создадим следующую разметку

Section class="loginform cf">

• Email
• Password

< /section>

Если вы работали с HTML-формами раньше, этот код вам покажется знакомым. Но есть также и некоторые особенности. Поля имеют заполнители и некоторые атрибуты, которые являются новыми.

Заполнители полей (placeholder)

Атрибут placeholder позволяет включить текст по умолчанию в поле, который исчезнет, когда элемент получит фокус или когда поле заполнено. Раньше мы делали это при помощи JavaScript, но теперь все стало намного проще благодаря новым атрибутам.

Атрибут «required»

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

Новый селектор также включен в CSS3 (:required). Вот пример:

Input { border : 1px solid red ; }

Типы полей

Наше первое поле имеет тип email (типы инпутов — это еще одно нововведение HTML5). Если пользователь не заполнит поле с адресом электронной почты, появится следующее уведомление;

Использование такого инпута также удобно тем, что пользователям мобильных устройств (iPhone или Android) будет удобнее заполнять поле с выделенным «@» .

Новые возможности, предлагаемые для форм HTML5, являются мощными и простыми в реализации, но они не везде поддерживаются, например;

Атрибут placeholder поддерживают только современные браузеры - Firefox 3.7+, Safari 4+, Chrome 4+ and Opera 11+ . Если вы хотите это исправить, используйте этот костыль в сочетании с Modernizr .

То же с атрибутом required . Уведомление об ошибке не могут быть персонифицированы, но ошибка будет оставаться: «Пожалуйста, заполните поля» вместо
«Пожалуйста, введите имя», этот атрибут также поддерживается только в нормальных браузерах.

Label { display : block ; color : #999 ; } .cf :before , .cf :after { content : "" ; display : table; } .cf :after { clear : both ; } .cf { *zoom: 1 ; } :focus { outline : 0 ; }

Все поля, кроме поля для «submit», будут иметь следующие стили:

Loginform input:not ([ type=submit] ) { padding : 5px ; margin-right : 10px ; border : 1px solid rgba(0 , 0 , 0 , 0 .3 ) ; border-radius: 3px ; box-shadow: inset 0px 1px 3px 0px rgba(0 , 0 , 0 , 0 .1 ) , 0px 1px 0px 0px rgba(250 , 250 , 250 , 0 .5 ) ; }

А вот стили для кнопки для отправки формы.

Loginform input[ type=submit] { border : 1px solid rgba(0 , 0 , 0 , 0 .3 ) ; background : #64c8ef ; /* Old browsers */ background : -moz-linear-gradient(top , #64c8ef 0 % , #00a2e2 100 % ) ; /* FF3.6+ */ background : -webkit-gradient(linear, left top , left bottombottom, color-stop(0 % ,#64c8ef ) , color-stop(100 % ,#00a2e2 ) ) ; /* Chrome,Safari4+ */ background : -webkit-linear-gradient(top , #64c8ef 0 % ,#00a2e2 100 % ) ; /* Chrome10+,Safari5.1+ */ background : -o-linear-gradient(top , #64c8ef 0 % ,#00a2e2 100 % ) ; /* Opera 11.10+ */ background : -ms-linear-gradient(top , #64c8ef 0 % ,#00a2e2 100 % ) ; /* IE10+ */ background : linear-gradient(to bottombottom, #64c8ef 0 % ,#00a2e2 100 % ) ; /* W3C */ filter: progid:DXImageTransform .Microsoft .gradient ( startColorstr="#64c8ef" , endColorstr="#00a2e2" ,GradientType=0 ) ; /* IE6-9 */ color : #fff ; padding : 5px 15px ; margin-right : 0 ; margin-top : 15px ; border-radius: 3px ; text-shadow : 1px 1px 0px rgba(0 , 0 , 0 , 0 .3 ) ; }

Вот и все! Надеемся, этот урок вам пригодился.

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

WordPress Login Customizer

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

Creative Login Form

Простая, но креативная форма входа, созданная с помощью HTML и CSS3. Ее также можно использовать и как форму регистрации. Это наш любимый шаблон из представленных в этом списке.

Мы поискали в интернете действительно крутые формы авторизации, но найти такие оказалось непросто. Поэтому решили представить вам собственные. Вот 20 форм входа, разработанных нашей командой.

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

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

Скачать

Предварительный просмотр

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

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

Скачать

Предварительный просмотр

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

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

Скачать

Предварительный просмотр

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

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

Скачать

Предварительный просмотр

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

Прекрасная и современная форма с опциями входа через Facebook или Google. Ее кнопки имеют красивые эффекты наведения, что позволяет предоставить пользователям прекрасный опыт взаимодействия.

Скачать

Предварительный просмотр

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

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

Скачать

Предварительный просмотр

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

Форма с тремя вариантами входа в учетную запись: Facebook, Twitter или адрес электронной почты. А если у пользователя еще нет учетной записи, можно связать форму со страницей регистрации.

Скачать

Предварительный просмотр

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

Еще одна современная, модная и красивая форма входа в систему. Она особенно хорошо смотрится на мобильных устройствах.

Скачать

Предварительный просмотр

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

Если хотите уйти от чисто белого или одноцветного дизайна, вам стоит обратить внимание на эту форму. Она поддерживает добавления фонового изображения или наложения градиента. Также есть опция входа через Facebook или Google.

Скачать

Предварительный просмотр

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

Это полная противоположность предыдущему варианту. Она выглядит минималистично, но в то же время очень аккуратно.

Скачать

Предварительный просмотр

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

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

Скачать

Предварительный просмотр

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

Фоновое изображение с наложением синей тени, имя с аватаром и поля ввода — это форма авторизации №12. Для кнопки входа в систему добавлен эффект наведения.

Скачать

Предварительный просмотр

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

Шаблон с разделением экрана, в котором одна половина предназначена для изображения, а другая — для формы.

Скачать

Предварительный просмотр

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

В этой подборке есть и простые, и более сложные формы входа. А шаблон №14 — из числа минималистичных.

Скачать

Предварительный просмотр

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

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

Скачать

Предварительный просмотр

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

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

Скачать

Предварительный просмотр

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

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

Скачать

Предварительный просмотр

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

Скачать

Предварительный просмотр

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

Яркая, энергичная и захватывающая — это все о данной форме входа. Она полностью адаптивная, оптимизирована под мобильные устройства и совместима со всеми основными веб-браузерами.

Скачать

Предварительный просмотр

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

Градиентный фон, черная кнопка с эффектом наведения, поля для ввода логина и пароля, а также раздел «Забыли пароль?» Все это есть в форме авторизации №20.

Скачать

Предварительный просмотр

Выпадающая форма авторизации

Скачать

Floating Sign Up Form

Разработано для форм подписки с использованием вкладок и меток.

Скачать

Простая форма авторизации

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

Скачать

Flat Login – Sign Up Form

Когда вы нажмете кнопку “Click me”, расположенную в правом верхнем углу, с помощью анимации форма входа будет преобразована в форму регистрации.

Скачать

Login With Self-Contained SCSS Form

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

Скачать

Animated Login Form

Это анимированная форма входа, а верхняя часть “Hey you, Login already” преобразуется в форму при нажатии кнопки.

Скачать

Login Form Using CSS3 And HTML5

Пример того, как создать простую форму входа в систему с помощью HTML5 и CSS3. В ней применяются псевдо элементы (:after и:before) для создания эффекта нескольких страниц. Эта форма использует HTML5, чтобы упростить валидацию и представление данных.

Скачать

Login With Shake Effect

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

Скачать

Boxy Login Form

Скачать

Animated Login Form

Аккуратная небольшая форма входа.Когда вы нажмете кнопку “LOGIN”, расположенную слева, будет отображена форма авторизации.

Here is an example of html login page code. In this example, we have displayed one text field, Password, Reset button and Login button. We have used Reset button that resets all fields to blank.We have used JavaScript validation in Login page. We have set username and password value.

Here is an example of html login page code. In this example, we have displayed one text field, Password, Reset button and Login button. We have used Reset button that resets all fields to blank.We have used JavaScript validation in Login page. We have set username and password value.

Here is an example of html login page code. In this example, we have displayed one text field, Password, Reset button and Login button. We have used Reset button that resets all fields to blank. We have used JavaScript validation in Login page. We have set username and password value. If a person enter a wrong username or password or both, an error message with "Error: Incorrect Username or Password" will be displayed. Till the person enters the correct username and password, it will not Login.

Once you enter the correct Username and Password, you will be redirected to another page.

Login page is used in most of the dynamic website to validate user based on their credentials. For making login page for websites HTML form and HTML elements are used. Text field is used to accept username and password text field is used to accept password from user.

The submit button is used for submitting data to server for validation. Its good to validate user input in the browser using JavaScript. In this tutorial we are creating a HTML Login page code and validating user input with JavaScript. In modern web application server-side validation is also very important it is done on server side with the program running on the server.

Here is video tutorial:

But in this tutorial you will learn to create a login page in HTML and validate user input with JavaScript. View demo of HTML Login page .

Here is the screen shot of the the login page we are making:

This login page displays Username, Password text fields and then buttons for reset and Login. Once user enters the data and clicks on the Login button, JavaScript is used to validate the form and error message is displayed if validation fails.

HTML Login page with JavaScript Validation

Login Page

HTML Login Page
Username:
Password:

function check(form) { if(form.userid.value == "Roseindia" && form.pwd.value == "Roseindia") { return true; } else { alert("Error Password or Username") return false; } }

The tag of HTML is the heart of creating user entry form in web application which takes the user input data and finally submit it to server side program for further processing. Data of all the input or hidden field is taken and submitted to the server through form tag. The "submit" button is used to initiate form data submit to the server. You can also use JavaScript code for submitting the form. For example if your form name is "loginForm" then following JavaScript code can be called for submitting the form programmatically.

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