Unconditional login form html. Login and Registration Form with HTML5 and CSS3

HTML tags, defining HTML forms on the site

We create websites and individual pages on the Internet to communicate with visitors.

HTML forms are used to register visitors on the site, for interactive polls and voting, allow you to send messages, make purchases, and so on. HTML The form is created for one purpose: to collect and then transfer information for processing to a program script or by e-mail.

Sample HTML form | Enter the site

Tags, attributes and values

- determine the form.
name="" - defines the name of the form.
method="" - determines how the data is sent from the form. Values: "get" (default) and "post" . The "post" method is more commonly used, as it allows you to transfer large amounts of data.
action="" - determines the url by which the data is sent for processing. In our case - enter_data.php ..
- define such form elements as buttons, switches, text fields for data entry.
type="text" - defines a text field for data entry.
type="password" - defines a field for entering a password, while the text is displayed as asterisks or circles.
type="checkbox" - defines a radio button.
type="hidden" - defines hidden element forms - used to convey additional information to the server.
size="25" - length text field in characters.
maxlength="30" - the maximum allowed number of input characters.
value="" - defines the value that will be sent for processing if it refers to radio buttons or radio buttons. The value of this attribute as part of a text field or button will be shown as, for example, John or Login in the example above.

Sample HTML form | Comments on the site

<a href="https://obanracer.ru/en/gde-sozdat-lichnuyu-internet-stranicu-primer-sozdaniya-html-stranicy-v.html">HTML example</a> forms

Tags, attributes and values

action="http://site/comments.php" - determines the url to which the data from the form will be sent.
id="" - defines the name, identifier of the form element.
name="" - defines the name of the form element.
- define a text field in the form.
cols="" - determines the number of columns of the form text field.
rows="" - Specifies the number of rows for the form text field.

If between put text, it will be shown inside the box as an example that is easy to remove.

Sample HTML form | Drop-down list

HTML forms

Tags, attributes and values

- define a list with items to choose from.
size="" - determines the number of visible list positions. If the value is 1 , we are dealing with a dropdown list.
- define positions (points) of the list.
value="" - contains the value that will be sent by the form to the specified url for processing.
selected="selected" - selects the list item as an example.

Sample HTML form | List with scroll bar

By increasing the value of the size="" attribute, we get a list with a scrollbar:

HTML forms

For this option, we use the multiple="multiple" flag, which makes it possible to select multiple items. Its absence allows you to select only one item.

type="submit" - defines a button.

type="reset" - defines a reset button.

value="" - defines the label on the button.

See additionally:

Login form design is really important for any website. We collected some responsive login page template free download. The login form is a part of a website. When we go to a website and want to full access need to signup and login. Any website's login form can be found on any side of the website. It will be right or left side. No website without login and signup form is complete. So it is important for any website. It is very difficult to create a login form through HTML CSS without a professional developer.

HTML is a structure and CSS is design. HTML5 and CSS3 is the updated version for designing. Some of the login forms created through this update coding can be downloaded directly. The developer shared this form free. These can be used for any personal needs or business.

Use this responsive login page template free and you can build your self. You can customize and change any colors or style. You can also connect your database, jquery. So this login template is really useful and important.

We have shared this post some free login form templates html5 css3. This collection will be increased. We are trying to collect more login page template bootstrap.

material design form

This login form is looking really awesome and simple. You can edit and change interface color. Simple design but very professional.

DEMO DOWNLOAD

When you need to design any application login form you can use this Material Design Login Form. It will be perfect for your application.

DEMO DOWNLOAD

Animated SVG Avatar

Animated login template has a big demand. If you want to use it your profession. This Animated SVG Avatar login form is better for you.

DEMO DOWNLOAD

Login form shake effect

This is a simple login form and it has some effect and uses your professional business.

DEMO DOWNLOAD

CSS3 Animation Cloud and login form

If you have cloud business or planning for any type of cloud business you can use this CSS3 Animation Cloud and login form.

DEMO DOWNLOAD

clean login form

This is a very clean design and name also same Clean login form. Use this form your clean website.

DEMO DOWNLOAD

Login Form on HTML5

This login form is designed HTML5 and use for your best website.

DEMO DOWNLOAD

Login Form CSS only validation

DEMO DOWNLOAD

CSS Login Form

DEMO DOWNLOAD

Batman login form

DEMO DOWNLOAD

Login Form with Materializecss

DEMO DOWNLOAD

Angular Material Login Form

DEMO DOWNLOAD

Responsive Login Form

DEMO DOWNLOAD

Responsive Login Form

DEMO DOWNLOAD

Simple Flat Form with Spinning Loader

DEMO DOWNLOAD

Login to Everdwell

Forms are designed to send data from the user to the web server. Forms in HTML can consist of text fields and text areas, checkboxes and radio buttons, and drop-down lists. All of these are form elements. Each element serves to convey some value to the site.
At its core, an HTML form is a web page where you see areas for entering your information. After you fill out the form and click the submit button, the information from the form is packaged and sent to the web server for processing by a server script (handler file). After processing, another web page is returned to you as a response. The following figure clearly demonstrates how the form works:

There is nothing difficult in creating HTML forms. The easiest way to get an idea of forms is to parse a little HTML code and then see how it works. The following example shows the syntax for creating a simple HTML form:

Example: Simple HTML Form

Try it yourself "

My first form:
Name:
Surname:

simple form

Element

Forms are inserted into web pages through the element . It is a container for all form content, including elements such as text fields and buttons, as well as any other tags. HTML language. However, it cannot contain another element. .
To submit the form to the server, the "Submit" button is used, the same result will be obtained if the "Enter" key is pressed within the form. If there is no Submit button on the form, the Enter key can be used to submit.
Most element attributes affect the processing of the form, not its design. The most common of which are action and method. Attribute action contains the URL to which the information in the form will be submitted for processing by the server. Attribute method is the HTTP method that browsers should use to submit form data.

Element

Almost all form fields are created using the element (from English input - input). Appearance element change depending on the value of its attribute type:

Here are some attribute values type:

Entering text and password

One of the simplest types of form elements is a text field, designed to enter text from a single line. This type text input is set by default, and therefore, it is the single-line field that will be displayed if you forget to specify the attribute type. To add a single line text input field to a form, you should inside the element register attribute type with text value:

The password input field is a variation of the regular text field. It supports the same attributes as a single line text field. Attribute name sets the name of the password input field that will be sent to the server along with the password entered by the user. To create a field for entering a password, you must set the value of the password attribute type(password (English) - password):

An example of creating a form with a password field:

Example: Password field

Try it yourself "

Your login:

Password:

Your login:

Password:

Along with this attribute, you can use the attribute maxlenght, whose value specifies the maximum number of characters that can be entered in given line. You can also set the length of the input field using the attribute size. By default, most browsers limit text fields to 20 characters. To control the width of new form elements, instead of an attribute size, we recommend using Cascading Style Sheets (CSS).
Attribute value specifies the value that is displayed by default in the text box when the form is loaded. By entering a default value in the field, you can explain to the user exactly what data and in what format you want the user to enter here. This is like a sample, because it is much more convenient for the user to fill out the form, seeing an example in front of him.

Switches (radio)

Element type radio creates radio buttons that use the logical "OR" principle, allowing you to select only one of several values: if you select one position, then all the others become inactive. The basic syntax of a radio button element is:

Attribute name for radio buttons is mandatory and plays an important role in grouping several radio button elements into a group. To combine radio buttons into a group, you must set same value attribute name and different attribute value value. Attribute value sets the value of the selected radio button to be sent to the server. The value of each radio button element must be unique within the group so that the server knows which response option the user has selected.
Attribute presence checked(from English - set) at the switch element indicates which of the proposed options should be selected by default when loading the page, if necessary. This attribute can be set only for one switch element from the group:

Try it yourself "

How old are you?

under 18
from 18 to 24
from 25 to 35
over 35

How old are you?

under 18
from 18 to 24
from 25 to 35
over 35

Checkboxes

Element type checkbox creates checkboxes that are similar to radio buttons in that they allow the user to choose from the options you provide. The main difference from radio buttons is that the visitor can select several options at once, and the flags themselves are indicated by squares, not circles. As with radio buttons, a group of checkboxes is created by assigning each item the same attribute value. name, however each checkbox has its own meaning. Basic checkbox syntax:

Attribute checked, as with radio buttons, specifies that the given check box should be selected by default when the page loads. This attribute can be set simultaneously for several flags in a group.
The following example uses checkboxes to specify several default response options:

Example: Using radio buttons

Try it yourself "

Jazz
Blues
Rock
Chanson
Country

What musical genres do you like?

Jazz
Blues
Rock
Chanson
Country

Buttons for confirmation (submit) and clearing (reset)

Element type submit creates a button that, when clicked, sends the browser to a server script to process the data entered by the user in the form. If we create a button that clears the form, then we assign to the attribute type"reset" value. element type submit an optional attribute can be assigned name. Attribute value is used in this element to specify the text that indicates the label on the button. By default, in browsers, the button is written “Send” (Submit), if this inscription does not suit you, enter it yourself. Since the styles of the confirmation buttons may differ in different browsers, it is better to customize the style of the button yourself using CSS tools or use graphical buttons.
Create confirmation and clear buttons:

Example: Using submit and reset

Try it yourself "

Clicking the Reset button resets any user-entered data.

action attribute.

Main for element

The processing file is located on the server mytestserver.com in the folder namefolder and the name of the server script that will process the data - obrabotchik.php. It is to him that all the data entered by you in the form on the web page will be transferred. The .php extension indicates that the specified form is processed by a PHP script. The handler itself can be written in another language, for example, it can be the scripting language of Python, Ruby, etc.
It is advisable to always set the value of the attribute action. If the form must submit values to the same page where it is located, specify an empty string as the value of the action attribute: action="".

method attribute

Attribute method specifies how the information should be sent to the server. The choice of form submission method depends on the data that needs to be sent along with it. Here the volume of these data plays a major role. The two most popular methods of passing your form's raw data from the browser to the server are: GET and POST. The method is set to any one of your choice, and if you did not specify it, it will be used by default GET. Let's consider the application of each of them.

POST Method

Method POST packages the form data and sends it to the server without the user noticing it, since the data is contained in the body of the message. Web browser when using the method POST sends a request to the server consisting of special headers followed by form data. Since the content of this request is only available to the server, the POST used to transfer confidential data such as passwords, bank card details and other personal information of users. Method POST also suitable for sending large amounts of information, since, unlike the method GET, it has no limit on the number of transmitted characters.

GET method

As you already know, the main job of a browser is to receive web pages from the server. So when you use the method GET, your browser simply receives the web page as it always does. Method GET also wraps the form data, but appends it to the end of the URL before sending the request to the server. To understand how the method works GET let's see it in action. Open the first example from this tutorial (Example: A simple HTML form) in a notepad (such as Notepad++) and make a small change to the HTML code:

those. replace POST on the GET.
Save the file with a name filename.html and refresh the browser page (F5) then fill the form like Vasya Pupkin, and click the Submit button. In the browser address bar you will see something like this:

File_name.html?firstname=Vasya&lastname=Pupkin

Now you see the name of each form element, as well as its value, right here in the URL.
The URL is separated from the rest of the form data by a question mark character, and variable names and values are separated by an ampersand (&) .
This method should be used if you are not transferring large amounts of information.
This method will not work if the data in your form is sensitive, such as storing a bank card number or password.
In addition, the method GET not suitable if you want to send files to the server along with the form.

Grouping form elements

Form elements that are related in meaning can be grouped between tags

and

. The browser will display

as a box around a group of form elements. The appearance of the frame can be changed using Cascading Style Sheets (CSS).
To add a title for each group, you need an element A that specifies the group header text to be embedded in the frame.

The password entry field is a regular text field, the entered text in which, depending on the browser, is displayed as asterisks or dots. This feature is designed to ensure that no one peeps into the entered password. Although the entered text is not displayed on the screen, the entered information is transmitted to the server in clear text without encryption. Therefore, using this field does not provide data security and it can be intercepted.

The creation syntax is as follows.

The attributes are the same as the text field attributes and are listed in Table 1. one.

The password field is widely used on sites for authorizing users and restricting access to sections of the site where you need to confirm your authority. Example 1 shows how to create such fields.

Example 1. Password field

Password field

Login:

Password:

As a result, we get the following (Fig. 1).

Rice. 1. Type of field with a password

Style properties are applicable to the password field, which set the parameters of color, background, frame, etc. Example 2 shows adding background images to form fields. Let's take the style as for text fields as a basis.

Example 2: Adding an image to a text box

Password field

The result of this example is shown in Fig. 2. Pictures are added as a background, so the text must be shifted to the right using padding-left , otherwise it will be displayed on top of the image.

In this article, you will learn how to create a registration and authorization form using HTML, JavaScript, PHP and MySql. Such forms are used on almost every site, regardless of its type. They are created for the forum, and for the online store and for social networks (such as Facebook, Twiter, Odnoklassniki) and for many other types of sites.

If you have a site on your local computer, then I hope you already have . Nothing will work without it.

Creating a Table in the Database

In order to implement user registration, we first need a Database. If you already have it, then great, otherwise, you need to create it. In the article, I explain in detail how to do this.

And so, we have a Database (abbreviated DB), now we need to create a table users in which we will add our registered users.

How to create a table in the database, I also explained in the article. Before creating a table, we need to define what fields it will contain. These fields will match the fields from the registration form.

So, we thought, imagined what fields our form will have and create a table users with these fields:

id- Identifier. Field id should be in every table from the database.
first_name- To save the name.
last_name- To save the last name.
email- To save the postal address. We will use e-mail as a login, so this field must be unique, that is, have a UNIQUE index.
email_status- A field to indicate whether the mail is confirmed or not. If the mail is confirmed, then it will have a value of 1, otherwise the value of 0.
password- To save the password.

If you want your registration form to have some more fields, you can add them here as well.

That's it, our table users ready. Let's move on to the next step.

Database connection

We have created the database, now we need to connect to it. We will connect using the MySQLi PHP extension.

In the folder of our site, create a file with the name dbconnect.php, and in it we write the following script:

Database connection error. Error Description: ".mysqli_connect_error()."

"; exit(); ) // Set the connection encoding $mysqli->set_charset("utf8"); //For convenience, add a variable here that will contain the name of our site $address_site = "http://testsite.local" ; ?>

This file dbconnect.php will need to be connected to form handlers.

Pay attention to the variable $address_site, here I have indicated the name of my test site, which I will work on. You accordingly indicate the name of your site.

Site structure

Now let's take a look at the HTML structure of our site.

Move the site header and footer to individual files, header.php and footer.php. We will connect them on all pages. Namely, on the main (file index.php), to the page with the registration form (file form_register.php) and on the page with the authorization form (file form_auth.php).

Block with our links, registration and authorization, add to the header of the site so that they are displayed on all pages. One link will enter on registration form page(file form_register.php) and the other to the page with authorization form(file form_auth.php).

Content of header.php file:

The name of our site

As a result, our main page looks like this:

Of course, your site may have a completely different structure, but this is not important for us now. The main thing is that there are links (buttons) for registration and authorization.

Now let's move on to the registration form. As you already understood, we have it in the file form_register.php.

We go to the Database (in phpMyAdmin), open the table structure users and see what fields we need. So, we need fields for entering a first and last name, a field for entering a postal address (Email) and a field for entering a password. And for security purposes, we will add a captcha input field.

On the server, as a result of processing the registration form, various errors may occur due to which the user will not be able to register. Therefore, in order for the user to understand why the registration fails, it is necessary to display messages about these errors to him.

Before displaying the form, we add a block to display error messages from the session.

And another moment, if the user is already authorized, and for the sake of interest, he enters the registration page directly by writing in the address bar of the browser website_url/form_register.php, then in this case, instead of the registration form, we will display a title for it that it is already registered.

In general, the file code form_register.php we got it like this:

You are already registered

In the browser, the registration page looks like this:

Via required attribute, we have made all fields mandatory.

Pay attention to the registration form code where captcha is displayed:

We in the value of the src attribute for the image, specified the path to the file captcha.php, which generates this captcha.

Let's look at the code of the file captcha.php:

The code is well commented, so I'll just focus on one point.

Inside a function imageTtfText(), the path to the font is specified verdana.ttf. So here's for correct operation captcha, we have to create a folder fonts, and put the font file there verdana.ttf. You can find and download it from the Internet, or take it from the archive with the materials of this article.

We are done with the HTML structure, it's time to move on.

Validating email with jQuery

Any form needs validation of the entered data, both on the client side (using JavaScript, jQuery) and on the server side.

We must pay special attention to the Email field. It is very important that the entered email address is valid.

For given field input , we set the email type (type="email"), this warns us a little against incorrect formats. But, this is not enough, because through the code inspector that the browser provides us, you can easily change the value of the attribute type with email on the text, and that's it, our check will no longer be valid.

And in that case, we have to make a more reliable check. To do this, we will use the jQuery library from JavaScript.

To connect the jQuery library, in the file header.php between tags , before the closing tag , add this line:

Right after this line, add the email validation check code. Here we add the code for checking the length of the entered password. It must be at least 6 characters long.

With the help of this script, we check the entered email address for validity. If the user entered the wrong Email, then we display an error about it and deactivate the submit button of the form. If everything is fine, then we remove the error and activate the submit button of the form.

And so, with the form validation on the client side, we are done. Now we can send it to the server, where we will also do a couple of checks and add data to the database.

User registration

We send the form for processing to the file register.php, via the POST method. Name given file handler specified in the attribute value action. And the send method is specified in the attribute value method.

Open this file register.php and the first thing we need to do is write a session launch function and include the file we created earlier dbconnect.php(In this file, we made a connection to the database). And yet, immediately declare the cells error_messages and success_messages in the session global array. AT error_mesages we will record all error messages that occur during form processing, and in success_messages Let's write happy messages.

Before continuing, we must check whether the form was submitted at all. An attacker can look at the value of an attribute action from the form, and find out which file is processing this form. And he may come up with the idea to go directly to this file by typing the following address in the address bar of the browser: http://site_site/register.php

So we need to check if there is a cell in the global POST array whose name matches the name of our "Register" button from the form. Thus, we check whether the "Register" button was pressed or not.

If an attacker tries to go directly to this file, he will receive an error message. I remind you that the $address_site variable contains the name of the site and it was declared in the file dbconnect.php.

Mistake! main page .

"); } ?>

The captcha value in the session was added during its generation, in the file captcha.php. As a reminder, I will show once again this piece of code from the file captcha.php, where the captcha value is added to the session:

Now let's get to the test itself. In file register.php, inside the if block, where we check whether the "Register" button was pressed, or rather, where the comment " // (1) Place for the next piece of code"we write:

//Check the received captcha //Trim spaces from the beginning and from the end of the string $captcha = trim($_POST["captcha"]); if(isset($_POST["captcha"]) && !empty($captcha))( //Compare the received value with the value from the session. if(($_SESSION["rand"] != $captcha) && ($_SESSION ["rand"] != ""))( // If the captcha is not correct, then return the user to the registration page, and there we will display an error message that he entered the wrong captcha. $error_message = "

Mistake! You entered the wrong captcha

"; // Save the error message to the session. $_SESSION["error_messages"] = $error_message; // Return the user to the registration page header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site ."/form_register.php"); //Stop the script exit(); ) // (2) Place for the next piece of code )else( //If the captcha is not passed or it is empty exit("

Mistake! There is no verification code, that is, the captcha code. You can go to the main page.

"); }

Next, we need to process the received data from the POST array. First of all, we need to check the contents of the global POST array, that is, whether there are cells there whose names match the names of the input fields from our form.

If the cell exists, then we trim the spaces from the beginning and from the end of the string from this cell, otherwise, we redirect the user back to the page with the registration form.

Further, after the spaces have been trimmed, we add a string to the variable and check this variable for emptiness, if it is not empty, then move on, otherwise we redirect the user back to the page with the registration form.

Paste this code in the specified location // (2) Place for the next piece of code".

/* Check if there is data sent from the form in the $_POST global array and enclose the submitted data in regular variables. = trim($_POST["first_name"]); //Check if the variable is empty if(!empty($first_name))( // For safety, convert special characters to HTML entities $first_name = htmlspecialchars($first_name, ENT_QUOTES) ; )else( // Save the error message to the session. $_SESSION["error_messages"] .= "

Enter your name

Name field missing

"; //Return the user to the registration page header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Stop the script exit(); ) if( isset($_POST["last_name"]))( // Trim spaces from the beginning and end of the string $last_name = trim($_POST["last_name"]); if(!empty($last_name))( // For safety , convert special characters to HTML entities $last_name = htmlspecialchars($last_name, ENT_QUOTES); )else( // Save the error message to the session. $_SESSION["error_messages"] .= "

Enter your last name

Name field missing

"; //Return the user to the registration page header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Stop the script exit(); ) if( isset($_POST["email"]))( // Trim spaces from the beginning and end of the string $email = trim($_POST["email"]); if(!empty($email))( $email = htmlspecialchars ($email, ENT_QUOTES); // (3) Place of code to check the format of the email address and its uniqueness )else( // Save the error message to the session. $_SESSION["error_messages"] .= "

Enter your email

"; //Return the user to the registration page header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Stop the script exit(); ) if( isset($_POST["password"]))( // Trim spaces from the beginning and end of the string $password = trim($_POST["password"]); if(!empty($password))( $password = htmlspecialchars ($password, ENT_QUOTES); //Encrypt the password $password = md5($password."top_secret"); )else( // Save the error message to the session. $_SESSION["error_messages"] .= "

Enter your password

The field is of particular importance. email. We have to check the format of the received mailing address and its uniqueness in the database. That is, whether a user with the same email address is already registered.

At the specified location" // (3) Place of code to check the format of the postal address and its uniqueness" add the following code:

//Check the format of the received email address using the regular expression $reg_email = "/^**@(+(*+)*\.)++/i"; //If the format of the received email address does not match the regular expression if(!preg_match($reg_email, $email))( // Save the error message to the session. $_SESSION["error_messages"] .= "

You entered an invalid email

"; //Return the user to the registration page header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); //Stop the script exit(); ) // Check if there is already such an address in the database $result_query = $mysqli->query("SELECT `email` FROM `users` WHERE `email`="".$email."""); If there are exactly one rows, then the user with this email address is already registered if($result_query->num_rows == 1)( //If the result is not false if(($row = $result_query->fetch_assoc()) != false) ( // Save the error message to the session. $_SESSION["error_messages"] .= "

User with this email address is already registered

"; //Return the user to the registration page header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); )else( //Save the error message to the session .$_SESSION["error_messages"] .= "

Error in database query

"; //Return the user to the registration page header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_register.php"); ) /* close the selection */ $result_query-> close(); //Stop the script exit(); ) /* close the selection */ $result_query->close();

And so, we are done with all the checks, it's time to add the user to the database. At the specified location" // (4) Place for the code for adding a user to the database" add the following code:

//Query to add a user to the database $result_query_insert = $mysqli->query("INSERT INTO `users` (first_name, last_name, email, password) VALUES ("".$first_name."", "".$last_name." ", "".$email."", "".$password."")"); if(!$result_query_insert)( // Save the error message to the session. $_SESSION["error_messages"] .= "

Error request to add a user to the database

Registration completed successfully!!!
Now you can log in using your username and password.

"; //Send the user to the login page header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); ) /* Complete the request */ $result_query_insert-> close(); //Close the database connection $mysqli->close();

If an error occurs in the request to add a user to the database, we add a message about this error to the session and return the user to the registration page.

Otherwise, if everything went well, we also add a message to the session, but it is already more pleasant, namely, we tell the user that the registration was successful. And we redirect it to the page with the authorization form.

The script for checking the format of the email address and the length of the password is in the file header.php, so it will affect fields from that form as well.

The session is also started in the file header.php, so in the file form_auth.php the session does not need to be started, because we get an error.

As I said, the script for checking the format of the mail address and the length of the password also works here. Therefore, if the user enters the wrong email address or short password, he will immediately receive an error message. A button to come in will become inactive.

After fixing the errors, the button to come in becomes active and the user can submit the form to the server where it will be processed.

User authorization

To attribute value action the authorization form has a file auth.php, which means that the form will be processed in this file.

So let's open the file auth.php and write the code to process the authorization form. The first thing to do is start the session and include the file dbconnect.php to connect to the database.

//Declare a cell to add errors that may occur during form processing. $_SESSION["error_messages"] = ""; //Declare a cell to add successful messages $_SESSION["success_messages"] = "";

/* Check if the form was submitted, that is, if the Login button was clicked. If yes, then we go further, if not, then we will display an error message to the user, stating that he went to this page directly. */ if(isset($_POST["btn_submit_auth"]) && !empty($_POST["btn_submit_auth"]))( //(1) Place for the next piece of code )else( exit("

Mistake! You have accessed this page directly, so there is no data to process. You can go to the main page.

"); }

//Check the received captcha if(isset($_POST["captcha"]))( //Trim spaces from the beginning and end of the string $captcha = trim($_POST["captcha"]); if(!empty($captcha ))( //Compare the received value with the value from the session. if(($_SESSION["rand"] != $captcha) && ($_SESSION["rand"] != ""))( // If the captcha is invalid , then we return the user to the authorization page, and there we will display an error message that he entered the wrong captcha. $error_message = "

Mistake! You entered the wrong captcha

Mistake! The captcha input field must not be empty.

"; // Save the error message to the session. $_SESSION["error_messages"] = $error_message; // Return the user to the authorization page header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site ."/form_auth.php"); //Stop the script exit(); ) //(2) Place for processing the mail address //(3) Place for processing the password //(4) Place for making a query to the database )else ( //If captcha is not passed exit("

Mistake! There is no verification code, that is, the captcha code. You can go to the main page.

"); }

If the user has entered the verification code correctly, then we move on, otherwise we return him to the authorization page.

Email address verification

// Trim spaces from the beginning and end of the string $email = trim($_POST["email"]); if(isset($_POST["email"]))( if(!empty($email))( $email = htmlspecialchars($email, ENT_QUOTES); //Check the format of the received email address using the regular expression $reg_email = " /^**@(+(*+)*\.)++/i"; //If the format of the received email address does not match the regular expression if(!preg_match($reg_email, $email))( // Save to the session error message.$_SESSION["error_messages"] .= "

You entered an invalid email

"; //Return the user to the authorization page header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Stop the script exit(); ) )else ( // Save the error message to the session. $_SESSION["error_messages"] .= "

The field for entering the postal address (email) should not be empty.

There is no field for entering Email

If the user has entered an email address in the wrong format or the value of the email address field is empty, then we return him to the authorization page, where we display a message about this.

Password check

The next field to process is the password field. To the designated place" //(3) Place for password processing", we write:

If(isset($_POST["password"]))( // Trim spaces from the beginning and end of the string $password = trim($_POST["password"]); if(!empty($password))( $password = htmlspecialchars($password, ENT_QUOTES); // Encrypt the password $password = md5($password."top_secret"); )else( // Save the error message to the session. $_SESSION["error_messages"] .= "

Enter your password

There is no field for entering a password

"; //Return the user to the registration page header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Stop the script exit(); )

Here, using the md5 () function, we encrypt the received password, since in the database we have passwords in encrypted form. Additional secret word in encryption, in our case " top_secret" must be the one that was used when registering the user.

Now you need to make a query to the database on a user selection whose mail address is equal to the received mail address and the password is equal to the received password.

//Query to the database on the user's selection. $result_query_select = $mysqli->query("SELECT * FROM `users` WHERE email = "".$email."" AND password = "".$password."""); if(!$result_query_select)( // Save the error message to the session. $_SESSION["error_messages"] .= "

Query error on user selection from database

"; //Return the user to the registration page header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Stop the script exit(); )else( //Check if there is no user with such data in the database, then display an error message if($result_query_select->num_rows == 1)( // If the entered data matches the data from the database, then save the login and password to the session array. $_SESSION["email"] = $email; $_SESSION["password"] = $password; //Return the user to home page header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/index.php"); )else( // Save the error message to the session. $_SESSION["error_messages"] .= "

Wrong username and/or password

"; //Return the user to the authorization page header("HTTP/1.1 301 Moved Permanently"); header("Location: ".$address_site."/form_auth.php"); //Stop the script exit(); ) )

Site exit

And the last thing we implement is exit procedure. At the moment, in the header we display links to the authorization page and the registration page.

In the site header (file header.php), using the session, we check if the user is already logged in. If not, then we display the registration and authorization links, otherwise (if it is authorized), then instead of the registration and authorization links we display the link Output.

Modified piece of code from file header.php:

Registration

Output

When you click on the exit link from the site, we get into the file logout.php, where we simply destroy the cells with the email address and password from the session. After that, we return the user back to the page on which the link was clicked output.

File code logout.php:

That's all. Now you know how implement and process registration and authorization forms user on your site. These forms are found on almost every site, so every programmer should know how to create them.

We also learned how to validate input data, both on the client side (in the browser, using JavaScript, jQuery) and on the server side (using PHP language). We also learned implement logout procedure.

All scripts are tested and working. You can download the archive with the files of this small site from this link.

In the future I will write an article where I will describe. And I also plan to write an article where I will explain (without reloading the page). So, in order to be aware of the release of new articles, you can subscribe to my site.

If you have any questions, please contact, also, if you notice any mistake in the article, please let me know.

Lesson Plan (Part 5):