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“.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PHP/Bootstrap Login Form</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form class="form-signin" method="post" action="index.php">
<h2 class="text-center">Please Login</h2>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="text" id="inputEmail" name="email" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required>
<button name="submit" class="btn btn-success btn-block" type="submit">Login</button>
</form>
</div> <!-- /container -->
<script src="js/bootstrap.js"></script>
</body>
</html>
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.
<body>
<div class="container">
<form class="form-signin" method="post" action="index.php">
<?php if (isset($loginMessage)) echo $loginMessage ; ?>
<h2 class="text-center">Please Login</h2>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="text" id="inputEmail" name="email" class="form-control" placeholder="Email address" required autofocus>
<span class="text-danger"><?php if (isset($errEmailMessage)) echo $errEmailMessage; ?></span>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required>
<span class="text-danger"><?php if (isset($errPassMessage)) echo $errPassMessage; ?></span>
<button name="submit" class="btn btn-success btn-block" type="submit">Login</button>
</form>
</div> <!-- /container -->
<script src="js/bootstrap.js"></script>
</body>
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
<?php if (isset($loginMessage)) echo $loginMessage ; ?>
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.
<?php
$LoginE;
if (isset($_POST["submit"]))
{
$email = $_POST['email'];
$name = $_POST['password'];
$errEmail = false;
$errPassword = false;
if (!$_POST['email'] || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
$errEmailMessage = "Please Enter a Valid Email.";
}
if (!$_POST['password'] || strlen($_POST['password']) < 8 ) {
$errPassMessage = "Password should be minimum 8 characters.";
}
if (isset($errEmailMessage) || isset($errPassMessage) )
{
$loginMessage= '<div class="container"><div class="alert alert-danger">Sorry there were errors loging into your account.Please try again later.</div></div>';
}
else
{
$loginMessage= '<div class="alert alert-success">You have successfully logged into your account.</div>';
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PHP/Bootstrap Login Form</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form class="form-signin" method="post" action="index.php">
<?php if (isset($loginMessage)) echo $loginMessage ; ?>
<h2 class="text-center">Please Login</h2>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="text" id="inputEmail" name="email" class="form-control" placeholder="Email address" required autofocus>
<span class="text-danger"><?php if (isset($errEmailMessage)) echo $errEmailMessage; ?></span>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required>
<span class="text-danger"><?php if (isset($errPassMessage)) echo $errPassMessage; ?></span>
<button name="submit" class="btn btn-success btn-block" type="submit">Login</button>
</form>
</div> <!-- /container -->
<script src="js/bootstrap.js"></script>
</body>
</html>
Now, if you add invalid email or password less than 8 characters, the value for “$LoginMessage”, “$errEmailMessage” and/or “$errPassMessage” shall be set and their values (error messages) will be displayed with corresponding fields.
Take a look at the following screenshots to see how error messages shall be displayed.
Where to host your Login form ?
I have been asked by couple of you where to host your forms. There are many good hosting providers, and I will certainly create a separate post comparing some of them, however if you are looking for something cheap (like $4 cheap 🙂 ) quick and easy to use and setup – Bluehost (affiliate) is the way to go.
Thanks for installing the Bottom of every post plugin by Corey Salzano. Contact me if you need custom WordPress plugins or website design.
should you not be stripping any dangerous characters and hashing the passwords?
Matt, you are absolutely right! Before saving values into database it is critical to escape/strip all special characters as well as hash the password! This example is to show how to validate data on the back-end. If you are interested in the hashing and escaping aspect, I would love to write a post about it too!