Html css registration form. Creation of HTML forms. Database Connection

Hi all. So we've learned a few elements to create shapes. It's time to combine our knowledge to solve a bigger problem. Let's create the simplest form for authorization on the site. To do this, we need two fields, we create and attach signatures to them.

The first field is for the login, the second is for the password. And with the second one it’s not so simple. Because at the moment it is just a text input field.

Result in browser:

In order for the text entered in it to be replaced with asterisks, as is customary for a field of this type, you need to do one simple action. Namely, to replace the attribute value type on password:

Result:

Form submit button

Here you go. Our form is almost ready. Now, to complete its creation, you need to create a button that will be used to submit the form. The problem is solved using a tag with type submit.

If the button should have some kind of inscription, then it can be done using the attribute value. Whether or not to name the button is up to you, but if you do, the server will receive that name as well as the value of the button.

As a rule, the name of a form submit button is needed when the form has several buttons, each of which performs a specific action. Thanks to this, the server, receiving the name and value of the button from the browser, understands which button the user clicked and what, accordingly, needs to be done.

As a result, the code for our form will be as follows:

Result in browser:

The first field is for the login, the second is for the password. And with the second one it’s not so simple. Because at the moment it is just a text input field.

Result in browser:

Result:

Form submit button

Here you go. Our form is almost ready. Now, to complete its creation, you need to create a button that will be used to submit the form. The problem is solved using a tag with type submit.

As a result, the code for our form will be as follows:

Result in browser:

Here is an example of Registration form using HTML. Here a programmer can display as many "Text Field" as he/she wants. The name in front of Text Field is called "Label". At the end of the registration form their is a "ADD" button behnd which any desired link can be used. Once clicked it will redirect to that particular destination.

HTML Code for registration form

In this example we have shown 9 "Text Field". Size of the Text Box can also be changed as per the requirement.

registration.html

registration form

Registration form

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 website, regardless of its type. They are created for a forum, an online store, social networks (such as Facebook, Twitter, Odnoklassniki) and many other types of sites.

If you have a website on your local computer, then I hope that you already have . Without it, nothing will work.

Creating a table in the Database

In order to implement user registration, first of all we 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 as DB), now we need to create a table users in which we will add our registered users.

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

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

id- Identifier. Field id Every table in the database should have it.
first_name- To save the name.
last_name- To preserve the surname.
email- To save the postal address. We will use e-mail as a login, so this field must be unique, that is, have the UNIQUE index.
email_status- 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 is 0. By default, this field will have a value of 0.
password- To save the password.

All fields of type “VARCHAR” must have a default value of NULL.

If you want your registration form to have some other fields, you can also add them here.

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

Database Connection

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

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

DB 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.

Notice the variable $address_site, here I indicated the name of my test site that I will be working on. Please indicate the name of your site accordingly.

Site structure

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

We will move the header and footer of the site into separate files, header.php And footer.php. We will include them on all pages. Namely on the main page (file index.php), to the page with the registration form (file form_register.php) and to the page with the authorization form (file form_auth.php).

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

Contents of the header.php file:

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 understand, we have it on file form_register.php.

Go to the Database (in phpMyAdmin), open the table structure users and look at what fields we need. This means that we need fields for entering the first and last name, a field for entering the postal address (Email) and a field for entering the password. And for security purposes, we will add a field for entering a captcha.

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 registration fails, it is necessary to display messages about these errors.

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

And one more thing, if the user is already authorized, and out of curiosity he goes to the registration page directly by writing in the address bar of the browser site_address/form_register.php, then in this case, instead of the registration form, we will display a header stating that he is already registered.

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

You are already registered

In the browser, the page with the registration form looks like this:

By using required attribute, we have made all fields mandatory.

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

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

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

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

Inside a function imageTtfText(), the path to the font is specified verdana.ttf. So for the captcha to work correctly, we must create a folder fonts, and place the font file there verdana.ttf. You can find it and download it from the Internet, or take it from the archive with the materials of this article.

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

Checking email validity using jQuery

Any form needs to check the validity 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 postal address is valid.

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

And in this case, we must do 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:

Immediately after this line, we will add the email validation code. Here we will add a code to check the length of the entered password. Its length must be at least 6 characters.

Using this script, we check the entered email address for validity. If the user entered an incorrect Email, we display an error message about this and disable the form submit button. If everything is fine, then we remove the error and activate the form submit button.

And so, we are done with form validation on the client side. 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 to the file for processing register.php, via the POST method. The name of this handler file is specified in the attribute value action. And the sending 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 connect the file we created earlier dbconnect.php(In this file we made a connection to the database). And also, let’s immediately declare the cells error_messages And success_messages in the global session array. IN error_mesages we will record all error messages that occur during form processing, and in succes_messages, we will record joyful messages.

Before we continue, we must check was the form submitted at all?. An attacker can look at the attribute value action from the form, and find out which file is processing this form. And he may have the idea to go directly to this file by typing the following address in the browser’s address bar: http://site_address/register.php

So we need to check for a cell in the global POST array whose name matches the name of our "Register" button from the form. This way we check whether the "Register" button was clicked or not.

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

Error! main page.

"); } ?>

The captcha value in the session was added when it was generated, in the file captcha.php. As a reminder, I’ll show you this piece of code from the file again captcha.php, where the captcha value is added to the session:

Now let's proceed to the verification itself. In file register.php, inside the if block, where we check whether the "Register" button was clicked, or rather where the comment " is indicated" // (1) Space for the next piece of code"we write:

//Check the received captcha //Trim the spaces from the beginning and end of the line $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 we return the user to the registration page, and there we will display an error message to him that he entered the wrong captcha. $error_message = "

Error! 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("

Error! There is no verification code, that is, a 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 correspond to the names of the input fields from our form.

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

Next, after we have trimmed the spaces, we add the line to the variable and check this variable for emptyness; if it is not empty, then we move on, otherwise we redirect the user back to the page with the registration form.

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

/* Check if there is data sent from the form in the global array $_POST and wrap the submitted data in regular variables.*/ if(isset($_POST["first_name"]))( //Trim the spaces from the beginning and end of the string $first_name = trim($_POST["first_name"]); //Check the variable for emptiness 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 is 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 line $last_name = trim($_POST["last_name"]); if(!empty($last_name))( // For security , convert special characters into HTML entities $last_name = htmlspecialchars($last_name, ENT_QUOTES); )else( // Save the error message to the session. $_SESSION["error_messages"] .= "

Please enter your last name

Last name field is 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 line $email = trim($_POST["email"]); if(!empty($email))( $email = htmlspecialchars ($email, ENT_QUOTES); // (3) Code location for checking 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

Of particular importance is the field email. We must check the format of the received postal address and its uniqueness in the database. That is, is there any user with the same email address already registered?

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

//Check the format of the received email address using a 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 incorrect 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(); ) // We check whether such an address is already in the database. $result_query = $mysqli->query("SELECT `email` FROM `users` WHERE `email`="".$email."""); //If the number of received there are exactly one row, which means the user with this email address is already registered if($result_query->num_rows == 1)( //If the resulting result is not false if(($row = $result_query->fetch_assoc()) != false) ( // Save the error message to the session. $_SESSION["error_messages"] .= "

A 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"); ) /* closing the selection */ $result_query-> close(); //Stop the script exit(); ) /* closing 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 in request to add user to database

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

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

If an error occurred 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 this time it’s 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 email address format and password length is in the file header.php, so it will also apply to fields from this form.

The session is also started in the file header.php, so in the file form_auth.php There is no need to start a session, because we will get an error.

As I already said, the script for checking the email address format and password length also works here. Therefore, if the user enters an incorrect 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 will be able to submit the form to the server, where it will be processed.

User authorization

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

And so, open the file auth.php and write code to process the authorization form. The first thing you need to do is start a session and connect the file dbconnect.php to connect to the database.

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

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

Error! 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 the spaces from the beginning and end of the line $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 incorrect , then we return the user to the authorization page, and there we will display an error message to him that he entered the wrong captcha. $error_message = "

Error! You entered the wrong captcha

Error! The captcha entry 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 email address //(3) Place for processing the password //(4) Place for composing a query to the database )else ( //If the captcha is not passed exit("

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

"); }

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

Checking the mailing address

//Trim spaces from the beginning and end of the line $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 a 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 incorrect 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 a postal address (email) must not be empty.

Email input field is missing

If the user 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 verification

The next field to process is the password field. To the specified 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

Password field is missing

"; //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 we use the md5() function to encrypt the received password, since our passwords are in encrypted form in the database. An 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 to select a user whose email address is equal to the received email address and whose password is equal to the received password.

//Query in the database based 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 when selecting a user from the 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 sessions array. $_SESSION["email"] = $email; $_SESSION["password"] = $password; //Return the user to the main 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"] .= "

Incorrect login 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(); ) )

Exit from the site

And the last thing we implement is procedure for leaving the site. 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 whether the user is already authorized. If not, then we display the registration and authorization links, otherwise (if he is authorized), then instead of the registration and authorization links we display the link Exit.

Modified piece of code from file header.php:

Registration

Exit

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

File code logout.php:

That's all. Now you know how implement and process registration and authorization forms user on your website. These forms are found on almost every website, 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). We also learned implement a procedure for leaving the site.

All scripts have been tested and are 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 stay informed about the release of new articles, you can subscribe to my website.

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

Lesson Plan (Part 5):

Creating an HTML structure for the authorization form
We process the received data
We display the user's greeting in the site header

Did you like the article?

We've compiled a list of 60 free login forms that you can use on your WordPress site, blog, forum, etc. Each form is thoroughly tested to ensure it works and the source code is available.

WordPress Login Customizer

The forms in this list are created using HTML/CSS. But in this case, we are talking about the best plugin to customize WordPress UI. It comes with multiple templates that can be further customized to suit your website design. With this plugin, you can get rid of the boring WordPress login page.

Creative Login Form

A simple yet creative login form created using HTML and CSS3. It can also be used as a registration form. This is our favorite template from this list.

We searched the Internet for really cool authorization forms, but finding them turned out to be difficult. That's why we decided to present you our own. Here are 20 login forms designed by our team.

Authorization form No. 1

Simple, creative and vibrant login form with gradient background. You can use it for any purpose, such as authorization in a web service, mobile or desktop application.

Download

Preview

Authorization form No. 2

Minimalistic and sophisticated login form with a button, gradient fill, animation and logo. Use it by changing the necessary elements.

Download

Preview

Download

Preview

Authorization form No. 19

Vibrant, energetic and exciting - that's what this entry form is all about. It is fully responsive, mobile optimized and compatible with all major web browsers.

Download

Preview

Authorization form No. 20

Gradient background, black button with hover effect, fields for entering login and password, as well as a “Forgot your password?” section. All this is in the authorization form No. 20.

Download

Preview

An example of how to create a simple login form using HTML5 and CSS3. It uses pseudo elements (:after and :before) to create the effect of multiple pages. This form uses HTML5 to simplify data validation and presentation.

Download

Login With Shake Effect

If you entered the wrong password, you will be notified with a beautiful shake effect. A simple and effective solution.

Download

Id:
Name:
Course:
Branch:
Rollno:
Email_Address:
User_Name:
About Us:
Password:

Form submit button

Form submit button

HTML Code for registration form

Registration form

Creating a table in the Database

Database Connection

Site structure

You are already registered

Checking email validity using jQuery

User registration

User authorization

Checking the mailing address

Password verification

Exit from the site

Did you like the article?

WordPress Login Customizer

Creative Login Form

Authorization form No. 1

Authorization form No. 2

Authorization form No. 3

Authorization form No. 4

Authorization form No. 5

Authorization form No. 6

Authorization form No. 7

Authorization form No. 8

Authorization form No. 9

Authorization form No. 10

Authorization form No. 11

Authorization form No. 12

Authorization form No. 13

Authorization form No. 14

Authorization form No. 15

Authorization form No. 16

Authorization form No. 17

Authorization form No. 18

Authorization form No. 19

Authorization form No. 20

Drop-down login form

Floating Sign Up Form

Simple authorization form

Flat Login – Sign Up Form

Login With Self-Contained SCSS Form

Animated Login Form

Login Form Using CSS3 And HTML5

Login With Shake Effect

Boxy Login Form