HTML Code For Login And Password
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Anjali
In this tutorial we will show you the solution of HTML code for login and password, we are going to create a webpage with the help of html in which we learn about how to create a login and password webpage.
In some previous sessions, we learn about how to create a form in html and input tag attributes.
We will learn about how to create a webpage for login and password with the help of form. Let us understand this with html codes.
Step By Step Guide On HTML Code For Login And Password :-
Now, in next html code we are going to create a form in body and use some input tags for login and password.
For current time, we are only going to design webpage for login and password with login button.
In next sessions, we will try this with database so that login id and password gets verified from database and make it compulsory that after checking you are logged in.
<!DOCTYPE html>
<html>
<head>
<title>login and password form</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;
}
.button {
padding: 10px;
background-color: black;
color: white;
font-size: 20px;
border: none;
width: 80%;
position: absolute;
bottom: 25px;
right:170px;
}
</style>
<body>
<div class="box">
<h2>
Login and password form
</h2>
<form action="" method="post" class="login">
<label for="">
Enter your Username/ Login ID/ Email ID
</label>
<br>
<input type="text" name="" id="">
<br>
<label for="">
Enter your Password
</label>
<br>
<input type="password" name="" id="">
<br>
<input class="button" type="submit" value="CLICK HERE TO LOGIN">
</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 create a login page with password with the help of form tag.
- To make it attractive, we use some CSS here. After, for login input type text is used because for login the user may use email id, login id, username and even his mobile number.
- So, we use input type text is here and in case of password we use input type password so that the password we type does not shown and convert into disc shapes.
- And at last a button with value click here to login is created here. We hope that you understand the code properly.
- 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 you are able to create a webpage for login and password with the help of html code. I hope this article on HTML code for login and password helps you.
About Anjali
