Password And Confirm Password Validation In HTML
Last Updated : Mar 11, 2024
IN - HTML PHP CSS | Written & Updated By - Ashish
In this tutorial we will show you the solution of password and confirm password validation in HTML and how you are able to check whether both password and confirm password are matched or not. If some website, like registration websites where we have to login after registration.
They ask us to enter password two times and both must be same. Hence, today we are going to write a code here in which we understand that how we are able to check whether both password and confirm password as same or not.
Let us understand the concept.
Step By Step Guide On Password And Confirm Password Validation In HTML :-
Now, here we are going to explain you that how you are able to check weather the password and confirm password are same or not.
For this, here below we create a registration form in which we create three input type first for email, second for password and third for confirm password.
Now, let us understand how they work with the help of html.
<?php
if (!empty($_REQUEST['button'])) {
$email = $_REQUEST['email'];
$pass = $_REQUEST['password'];
$cpass = $_REQUEST['cpassword'];
if ($pass != $cpass) {
echo "<script> alert(' Please enter same password')</script>";
} else {
echo "<script> alert(' Success ')</script>"; }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>home page</title>
<script src="js/jquery.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div class="inner">
<div class="welcome">
A simple Registration Form
</div>
<div class="registration_options">
<form action="" method="post">
<div class="rleft_body">
<label for="">
Enter your email here
</label>
<br>
<label for="">
Enter your password here
</label>
<br>
<label for="">
Enter password again here
</label>
</div>
<div class="rright_body">
<input type="email" name="email" id="">
<br><br>
<input type="password" name="password" id="">
<br><br>
<input type="text" name="cpassword" id="">
</div>
<div class="registration_submit">
<input type="submit" value="Save" id="save" name="button">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Style.css
.main{
height: auto;
width: 100%;
}
.inner{
width: 80%;
height: 580px;
border: 1px solid white;
box-shadow: 0 0 10px black;
margin: 30px auto 30px auto;
}
.welcome{
text-align: center;
padding: 20px;
font-size: 40px;
font-family: cursive;
border-bottom: 1px solid black;
background-color: black;
color: white;
}
.rleft_body
{
width: 50%;
float: left;
margin-top: 90px;
}
.rleft_body label
{
font-size: 20px;
font-style: oblique;
padding: 150px;
line-height: 2.5;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.rright_body{
width: 50%;
float: left;
margin-top: 100px;
}
.rright_body input{
font-size: 20px;
font-style: oblique;
width: 80%;
border: none;
border-bottom: 1px solid black;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.registration_submit{
clear: both;
height: auto;
text-align: center;
}
#save{
font-size: 25px;
background-color: black;
color: white;
padding: 5px 35px 5px 35px ;
border: none;
margin-top: 80px;
}
- 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, the content to be showed on browser’s display is written here.
- Here, as above said we create a registration form and above this page some php is used. Where we same the input values in some variables, you can see code in 3rd, 4th, 5th line.
- And after this we check both the password with the help of if condition. Here, if condition become false means both passwords gets matched then success message showed or if not then other parts run and error gets showed on screen.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here we can say that with the help of this article we are able to check weather both passwords and confirm passwords are matched or not.
I hope this tutorial on password and confirm password validation in HTML helps you
About Ashish
