How To Make A Login Page In HTML With Database
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Pragati
In this tutorial we will show you the solution of how to make a login page in HTML with database, in HTML we will show you how you are able to make a login page in html with database.
Before starting this concept, you must have a basic knowledge of php, html and database. The name of database in this article is as1, whereas the table name is login.
Step By Step Guide On How To Make A Login Page In HTML With Database :-
Now, for make this code working. You must already have created a database or say table in your database.
The parameters required for database the provide in the code showed below. We hope that you understand this article properly. Let us start writing code:
<?php
$connect = mysqli_connect("localhost", "root", "", "as1") or die("Connection failed");
if(!empty($_POST['submit']))
{
$username=$_POST['email'];
$password=$_POST['password'];
$query = "insert into login( email, password) values('$username', $password)";
if(mysqli_query($connect, $query))
{
echo "Record inserted successfully";
echo "br"."We send you response after verification";
}
else
{
echo"Soory, there is some error";
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>
registration form
</title>
</head>
<body style="text-align: center;">
<div class="main">
<div class="inner">
<div class="welcome">
Login form
</div>
<div class="login_options">
<form action="after_login.php" method="post">
<div class="lleft_body">
<label for="">
Enter your email id here
</label>
<br><br>
<label for="">
Enter your password here
</label>
</div>
<div class="lright_body">
<input type="email" name="email" id="email">
<br><br>
<input type="password" name="password" id="password">
</div>
<div class="login_btn">
<input type="submit" value="Log In" id="login" name=”submit”>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Here, we create a login form with the help of form tag and method used is post. You can see here that in form we create a main div and under this two more div.
- In first div, we create labels and in other div we create inputs and at last we create a button name submit.
- After this let us understand php code. In which first we make a connection with html and database.
- After this when you clicked on button the data from input gets stored into variable created in php code. and then a query run and when it gets true means everything is right then a message prints of Record inserted, if not then it will show there is some error.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here we can say that after this article you are able to make a login page in html with database.
When form gets submitted by clicking submit button, data gets submitted in database. I hope this tutorial on how to make a login page in HTML with database helps you.
About Pragati
