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