Login Page 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 login page in HTML with validation, in HTML there are many ways with the help of which you are able to validate login page in HTML.
You can also do this with the help of JavaScript and other way is with the help of jQuery.
Today, in this topic we are going to validate our login page with the help of jQuery. And in next session this is done with the help of JavaScript.
Step By Step Guide On Login Page In HTML With Validation :-
Now, here we validate the html page in which we create a username and password.
If you don’t know how to make a login form then you must have to visit our article in which we describe how to make a login page.
Now, in this article we only make some changes in that code and apply jQuery codes.
<!DOCTYPE html>
<html>
<head>
<title>forms</title>
<style>
.form {
width: 1000px;
height: 600px;
border: 1px solid white;
box-shadow: 0px 0px 10px gray;
margin: auto;
}
.form h2 {
font-size: 30px;
border-bottom: 3px solid black;
color: black;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
padding: 4px;
text-align: center;
}
.box {
position: fixed;
top: 5px;
left: 115px;
width: 800px;
height: 580px;
border: 1px solid white;
box-shadow: 0px 0px 10px gray;
margin: auto;
margin-top: 30px;
}
.box h2 {
font-size: 50px;
border-bottom: 2px solid black;
color: black;
font-family: 'Times New Roman', Times, serif;
padding: 10px;
text-align: center;
text-shadow: 0px 0px 2px black;
}
.login {
text-align: center;
margin-top: 90px;
}
.login label {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
padding: 15px;
font-size: 25px;
text-shadow: 0 0 1px black;
}
.login input {
margin: 20px;
width: 400px;
border: none;
border-bottom: 1px solid black;
height: 50px;
font-size: 25px;
text-align: center;
font-weight: lighter;
}
#btn {
padding: 10px;
background-color: black;
color: white;
font-size: 20px;
border: none;
width:600px;
position: absolute;
bottom: 15px;
right: 70px;
}
</style>
<script src="js/jquery.js"></script>
<body>
<div class="box">
<h2>
Login here
</h2>
<form action="" method="post" class="login" id="login_form">
<label for="email">
Enter your Username
</label>
<br>
<input type="text" name="email" id="email\">
<br>
<label for="password">
Enter your Password
</label>
<br>
<input type="password" name="password" id="password">
<br>
<input type="button" value="Submit" class="button" id="btn">
</form>
</div>
<script>
$(document).ready(function () {
$("#login_form").validate({
rules: {
email: {
required: true
},
password: {
required: true
}
},
messages: {
email: {
required: "specify email"
},
password: {
required: "specify password"
}
}
});
});
</script>
</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, the content to be showed on browser’s display is written here. Here, first we link jQuery file in head tag. And rest code is at last of body tag.
- In which first we create a Pattern of JQuery and then apply validation of form with the help of id. After this we apply some rules in JQuery in which we define that the email and password are required.
- After this if user fill these inputs then it’s okay if not then the other codes gets executed or gets showed on browser screen.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here we want to say that with the help of this article we are able to apply validation on html login page with the help of jQuery.
In next session, we will show you how this can be done again but with the help of JavaScript. I hope this tutorial on login page in HTML with validation helps you.
About Pragati
