Login And Registration Form In HTML
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Pragati
In this tutorial we will show you the solution of login and registration form in HTML, in HTML we already described that how to make a form in html and what the difference is between get and post method.
We already discuss about the tag and attributes used inside the form tag. Hence, as a result our today’s topic is based on to make a login and registration form.
If you know about the form tag and its attributes then it is easy for you to make this.
Step By Step Guide On Login And Registration Form In HTML :-
Now, here we have to make two forms. The first one is used for login process in which a user must have an id name, a password box with a button to submit details.
Whereas in registration form there are several tags which are used. It may be registration of a student in school/college or may be only for surveys, etc.
So, today we here show you that how you are able to make a login and registration form in html.
<!DOCTYPE html>
<html>
<head>
<title>it forms</title>
<style>
.form{
width: 500px;
height: 570px;
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{
width: 300px;
height: 350px;
border: 1px solid white;
box-shadow: 0px 0px 10px gray;
margin: auto;
}
.box 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;
}
.login label{
text-align: left;
font-family: sans-serif;
padding: 15px;
font-size: 18px;
text-shadow: 0 0 1px black;
}
.login input{
margin: 15px;
width: 250px;
border: none;
border-bottom: 1px solid black;
height:25px;
font-size: 20px;
}
.button{
padding: 10px;
background-color: black;
color: white;
font-size: 20px;
border: none;
width: 80%;
margin: 20px 25px;
}
.press{
padding: 10px;
background-color: black;
color: white;
font-size: 20px;
border: none;
width: 80%;
margin: 20px 55px;
}
</style>
<body>
<div class="box">
<h2>
Login here
</h2>
<form action="" method="post" class="login">
<label for="">
Enter your login id
</label>
<br>
<input type="text" name="" id="">
<br>
<label for="">
Enter your Password
</label>
<br>
<input type="password" name="" id="">
<br>
<button class="button" type="submit">
Submit
</button>
</form>
</div>
<div class="form">
<h2>
Registration form
</h2>
<form action="" method="post" class="login">
<label for="">
Enter your name here
</label>
<br>
<input type="text" name="" id="">
<br>
<label for="">
Enter email address here
</label>
<br>
<input type="email" name="" id="">
<br>
<br>
<label for="">
Enter phone number here
</label>
<br>
<input type="tel" name="" id="">
<br>
<br>
<label for="">
Enter any query if you have
</label>
<br><br>
<textarea name="" id="" cols="64" rows="5"></textarea>
<br>
<button class="press" type="submit">
Click here to complete your Registration
</button>
</form>
</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, the content to be showed on browser’s display is written here. Here, we show you two example mostly both are same.
- Hence, here we give an example of login and registration forms in html. You can customize according to yourself.
- You can add required input and removes also. If you know the basics of HTML. Then you are able to make any form easily. We hope that you understand the codes easily.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here we want to say that this is a perfect example of how to make a login and registration form.
I hope this article on login and registration form in HTML helps you and you understand the codes properly. and you can make more webpage like this in different formats also.
About Pragati
