HTML Code For Registration Form With Validation
Last Updated : Mar 11, 2024
IN - HTML CSS PHP | Written & Updated By - Riya
In this tutorial we will show you the solution of HTML code for registration form with validation, the form is created with the help of html, whereas CSS is used to make it creative, but point is here for validation we have to add some PHP.
So, that we have to save this file with .php extension and have to open this file on server. Now, let us understand codes.
Step By Step Guide On HTML Code For Registration Form With Validation :-
Now, this can be done with the help of html only, by using required in inputs. But for better point of view, we use some php codes along with jQuery code to done this article.
Note :- If you want to do this in html only, then you can use required attribute in all inputs except submit button.
<?php
$connect=mysqli_connect("localhost","root","","index") or die("Connectoin Failed");
if(!empty($_REQUEST['button']))
{
$user=$_REQUEST['username'];
$email=$_REQUEST['email'];
$pass=$_REQUEST['password'];
$cpass=$_REQUEST['cpassword'];
if($user=='' || $email== '' || $pass== '' || $cpass== '')
{
echo "<script> alert('Please fill all fields.......')</script>";
}
else{
$query="select * from rl_form where email= '$email'";
$result=mysqli_query($connect,$query);
$count = mysqli_num_rows($result);
if($count>0)
{
echo "<script> alert(' Email id alreadty exist')</script>";
}
else
{
if($pass != $cpass)
{
echo "<script> alert(' Please enter same password')</script>";
}
else
{
$query=" insert into rl_form( user, email, pass, cpass) values('$user', '$email', '$pass' , '$cpass')";
if(mysqli_query($connect, $query))
{
echo " <script> alert('Record inserted successfully')
window.location.href= '../project/index.php';
</script>";
}
else{
echo " Error found ! come back after one year";
}
}
}
}
}
?>
<!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">
Registration Form
</div>
<div class="registration_options">
<form action="" method="post">
<div class="rleft_body">
<label for="">
Enter your name here
</label>
<br>
<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="text" name="username" id="">
<br><br>
<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>
Css file: 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, we create a registration form with the help of form tag and method used is post.
- After this we create a form under div we hope that you understand it properly as it’s very simple.
- In php, we create a connection between html and database. You can go to our registration form with validation tutorial for better understanding.
- After this we save all inputs under variable, if someone want to save form with empty columns then it will show error. And also show error on if email id is already registered or if passwords are mismatch.
- You can better understand this when you have php basic knowledge. If everything is ok then you registered successfully. Or else it shows you 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 create a registration form in html with validation. I hope this tutorial on HTML code for registration form with validation helps you.
About Riya
