Student Registration Form In HTML With Validation
Last Updated : Mar 11, 2024
IN - HTML jQuery | Written & Updated By - Pragati
In this tutorial we will show you the solution of student registration form in HTML with validation, in HTML today we will learn about how to create a student registration or a simple registration form in html.
As, in previous sessions we already complete the topic of login page in html with validation, so our today topic is about registration.
Let us understand how to make a registration form in html.
Step By Step Guide On Student Registration Form In HTML With Validation :-
Now, here at first we have to create a registration form in html.
If you don’t know how to make a registration form then you must visit to our session in which we describe about how to make a registration form in html.
Now, after creation of a registration form we have to only apply validation which can be done here with the help of jQuery.
<!DOCTYPE html>
<html>
<head>
<title>
registration form
</title>
<script src="js/jquery.js"></script>
</head>
<body style="text-align: center;">
<h1>
Student’s Registration form
</h1>
<h3>
Fill the following details to register yourself
</h3>
<form action="" method="post">
<label for="">
Your Name
</label>
<input type="text" name="name" id="name">
<br><br>
<label for="">
Your Age
</label>
<input type="text" name="age" id="age">
<br><br>
<label for="">
Your email
</label>
<input type="email" name="email" id="email">
<br><br>
<label for="">
Your Password
</label>
<input type="password" name="password" id="password">
<br><br>
<input type="submit" value="Save" name="submit" id="register">
</form>
<script>
$(document).ready(function() {
$("#register").click(function() {
var name = $("#name").val();
var email = $("#email").val();
var password = $("#password").val();
var cpassword = $("#age").val();
if (name == '' || email == '' || password == '' || cpassword == '') {
alert("Please fill all fields...!!!!!!");
} else if ((password.length) < 8) {
alert("Password should atleast 8 character in length...!!!!!!");
} else {
$.post("register.php", {
name: name,
email: email,
password: password
}, function(rdata) {
if (data == 'You have Successfully Registered..... Thanks') {
$("form")[0].reset();
}
alert(rdata);
});
}
});
});
</script>
</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, the content to be showed on browser’s display is written here. As, you here we create a registration form with inputs having name like name, age, email and password.
- And after there is a button of type submit to save form. After, this there is some data in of jQuery in script tag which we are going to discuss.
- Here, we create a basic structure of jQuery then a query on button, if all data is not submitted there then there is an alert of Please fill all fields...!!!!!!
- After this we check password, to clear condition of password there must be 8 characters.
- And at last after clarification of all the error, if there is no any error more than a message goes print having text you have successfully registered..... and your registration is now completed and form gets auto reset after this.
- 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 student registration form in html with validation.
I hope this tutorial on student registration form in HTML with validation helps you.
About Pragati
