How to Create Bootstrap Login Form with PHP Validation

This blog uses affiliates links. All affiliates are personally tested and recommended based on personal experience!

In this article I am going to explain the process of creating a bootstrap login form using twitter bootstrap. I shall also explain how to implement server side validation on this form via PHP. The login page will be designed via simple HTML and bootstrap library where as validation shall be performed via PHP login script. So let’s get started.

Let me help you!

Hey, I am Anatoly, founder of this blog. I would love to help you! I have 6+ years experience in Web Development and IT Leadership. Lets work together on your project! Leave me your email and I will schedule a FREE Consultation!

  VIEW DEMO               SOURCE CODE

Designing Login Form with Bootstrap

Login page can be designed via simple HTML. However, for the sake of this article, I shall use twitter bootstrap which is an open source CSS and JavaScript library. The reasons why I am using bootstrap are straight forward. Firstly, I want to improve the look and feel of my webpage and bootstrap let me do that with only a few lines of code. Secondly, I want my login page to be responsive. Again bootstrap contains classes that help create responsive layouts out of the box. Take a look at the the following code snippet.  The name of this webpage is “index.php“.

Let’s start from the header section. It contains some meta information and links to bootstrap style sheet and the custom style sheet i.e. style.css. The body section contains a div with class “container.” This is a bootstrap class. It adds left and right padding and it also centers the div.

Inside the div, a form with class “form-signin’ has been created. This ‘form-signin’ is again a bootstrap class used to style a form. The form has two input elements: one of type text and the other of type password. Both of these elements are required. You cannot leave them empty. Here I have intentionally set the type of email element to text because here If I set it to email, bootstrap will implement its own email validation. However, I want to show you how PHP implements email validations.

In the style.css, I have modified the “container” class by setting its max-width property to 600px. I have also added a random background image to the body tag. The contents of “style.css” are as follows:

.container{ max-width: 600px; } body{ background-image: url(../images/contact_form_background.jpg); }

Now at the moment, the login form looks like this:

At this point of time, the form has no validation except for null check which is implemented by bootstrap by default. You can add anything in the text box and click login button and nothing will happen.

Form Validation Via PHP

Now, I would show you how we can implement validations via PHP. We shall check if the email entered by user is in correct format and the password length is less than 8 characters. Modify the body section of the HTML markup of the form we have created so that it exactly looks like the one in the following code snippet. I have explained the code later.

If you look at the opening “form” tag, it contains method attribute with the value of “post” and action attribute with the value of “index.php”. The method attribute sets the method used to post the form data. The action attribute specifies the page to which this form data shall be send. In this case when a user submits the form, the form data is sent to the page itself i.e. “index.php“.

Notice that inside the form element, at the top I have added following line of code

This line specifies that if the PHP’ “$loginMessage”  is set, echo the value of the variable. Similarly, under email input field and password input field, we shall echo the values of “$errEmailMessage” and “$errPassMessage” variables respectively if the are set. A set variable in PHP is a variable that is not null and contains some value. When the page is loaded for the first time, all of the aforementioned variables will be empty, therefore their values wont be displayed.

Now, when user enters email and password in the fields and clicks the submit button, the form information is sent to the “index.php” page. (which is the form page itself ) The values of the form fields are stored in $_POST associative array and can be accessed by passing the name of the field to this array. For instance if you want to check whether user has submitted the form by clicking “submit” button you can use the “isset($_POST[“submit”])” function.  This function returns true if the associative array contains value for “submit” form field.

Email Validation

To validate email “filter_var($_POST[’email’], FILTER_VALIDATE_EMAIL))” method is used. This method takes the text entered by the user in the email field as first parameter and the flag “FILTER_VALIDATE_EMAIL” as second parameter. If email is valid, this function returns true. If email validation returns false and assign an error message to the “$errEmailMessage” variable.

Password length validation

To validate the length of the password, we used the “strlen” function and passed it the text entered in the password field. We then checked that if the number of characters are less than 8, then assign an error message to “$errPassMessage”.

If any of the email and password field fails validation test we set “$LoginMessage” variable to bootstrap danger alert box and assign some error message to it. However, if validation test passes for both email and password field, a success alert box is assigned to “$LoginMessage”.

Complete HTML code with PHP validations can be seen in the following code snippet.