Login form with HTML/CSS, PHP and MySQL

In this tutorial, we show you how to create a login form using the HTML, PHP, and MySQL extension. This authentication form is used when a user needs to submit a form to authorize them to access their account, for example.

Four steps to create a login form:

1- Create an HTML file containing the structure of the form;
2- Create a CSS file to define the style;
3- Create a PHP login file that will check the form fields if they match the values of the table in the database;
4- Create a PHP file of the main page and the logout.

Step 1:

First, we will create an HTML page login.php.

login.php:

 
 < head> 
 < meta charset="utf-8"> 
  
 < link rel="stylesheet" href="style.css" media="screen" type="text/css" /> 
  
 < body> 
 < div id="container"> 
  
 
 < form action="verification.php" method="POST"> 
 < h1> Login 
 
 < label> < b> Username 
 < input type="text" placeholder="Enter username" name="username" required> 

 < label> < b> Password 
 < input type="password" placeholder="Enter password" name="password" required> 

 < input type="submit" id='submit' value='LOGIN' > 
  if(isset($_GET['error'])){
 $err = $_GET['error']; 
 if($err==1 || $err==2)
 echo "< p style='color:red'> Incorrect user or password"; 
 }
 ?>

Step 2:

The style will add formatting to our login window.

style.css:

body{
 background:  #67BE4B; 
}
#container{
 width:400px; 
 margin:0 auto; 
 margin-top:10%; 
}
/* Bordered form */
form {
 width:100%; 
 padding: 30px; 
 border: 1px solid #f1f1f1; 
 background: #fff; 
 box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); 
}
#container h1{
 width: 38%; 
 margin: 0 auto; 
 padding-bottom: 10px; 
}

/* Full-width inputs */
input[type=text], input[type=password] {
 width: 100%; 
 padding: 12px 20px; 
 margin: 8px 0; 
 display: inline-block; 
 border: 1px solid #ccc;
 box-sizing: border-box; 
}

/* Set a style for all buttons */
input[type=submit] {
 background-color: #53af57; 
 color: white; 
 padding: 14px 20px; 
 margin: 8px 0; 
 border: none; 
 cursor: pointer; 
 width: 100%; 
}
input[type=submit]:hover {
 background-color: white; 
 color: #53af57; 
 border: 1px solid #53af57; 
}

Preview:

Step 3:

Then to validate the form, we need a file to check the fields of the form, but before that, don't forget to create the 'user' table in the database:

verification.php:

session_start(); 
if(isset($_POST['username']) & & isset($_POST['password']))
{
 // database connection
 $db_username = 'root'; 
 $db_password = 'mot_de_passe_bdd'; 
 $db_name = 'nom_bdd'; 
 $db_host = 'localhost'; 
 $db = mysqli_connect($db_host, $db_username, $db_password,$db_name)
 or die('could not connect to database'); 
 
 // we apply the two functions mysqli_real_escape_string and htmlspecialchars
 // to eliminate any SQL injection attacks and XSS
 $username = mysqli_real_escape_string($db,htmlspecialchars($_POST['username'])); 
 $password = mysqli_real_escape_string($db,htmlspecialchars($_POST['password'])); 
 
 if($username !== "" & & $password !== "")
 {
 $requete = "SELECT count(*) FROM user where 
 nom_utilisateur = '".$username."' and mot_de_passe = '".$password."' "; 
 $exec_query = mysqli_query($db,$requete); 
 $reponse = mysqli_fetch_array($exec_request); 
 $count = $reponse['count(*)']; 
 if($count!=0) // correct username and password
 {
 $_SESSION['username'] = $username; 
 header('Location: principale.php'); 
 }
 else
 {
 header('Location: login.php?error=1'); // incorrect user or password
 }
 }
 else
 {
 header('Location: login.php?error=2'); // blank user or password
 }
}
else
{
 header('Location:  login.php'); 
}
mysqli_close($db); Close connection
?>

Step 4:

Last step, the server checks if the information provided is correct, and if so, it creates a session in the username and redirects to the page principale.php.

principale.php:

 
 < head> 
 < meta charset="utf-8"> 
  
 < link rel="stylesheet" href="style.css" media="screen" type="text/css" /> 
  
 < body style='background:#fff;' > 
 < div id="content"> 
  
  session_start(); 
 if($_SESSION['username'] !== ""){
 $user = $_SESSION['username']; 
 // display a message
 echo "Hello $user, you are connected"; 
 }
 ?>

Bonus:

You're going to ask the question: how do I log out? It's easy, you add a button to log out as well as a small piece of php code that destroys the current session.

 
 
 < head> 
 < meta charset="utf-8"> 
  
 < link rel="stylesheet" href="style.css" media="screen" type="text/css" /> 
  
 < body style='background:#fff;' > 
 < div id="content"> 
 
 < a href='principale.php?logout=true'> < span> Log out 
 
  
  session_start(); 
 if(isset($_GET['disconnect']))
 { 
 if($_GET['disconnect']==true)
 { 
 session_unset(); 
 header("location:login.php"); 
 }
 }
 else if($_SESSION['username'] !== ""){
 $user = $_SESSION['username']; 
 // display message
 echo "< br> Hello $user, you are connected"; 
 }
 ?>