HTML Code For Login Page With Username And Password
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Ashish
In this tutorial we will show you the solution of HTML code for login page with username and password, in HTML we already described that how to make a form in HTML. Form is used where you want to get information from the user.
And today our topic is about how to make a login page with username and password in html.
Here, we show you a simple example of form in html with CSS. You can customize it according to your own choice.
Step By Step Guide On HTML Code For Login Page With Username And Password :-
Now, today here our topic is how to make a login page in html in which there is a username and password option.
The main requirement in login form is to have an input for id means the username and with a password. After this there is a button of submit this information.
There is also two more options in many website like remember me and forgot password.
Now, there is a code that is given here below to make a login page with the help of CSS. We hope that you understand this code properly.
<!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;
}
.button {
padding: 10px;
background-color: black;
color: white;
font-size: 20px;
border: none;
width: 80%;
position: absolute;
bottom: 45px;
right:70px;
}
</style>
<body>
<div class="box">
<h2>
Login here
</h2>
<form action="" method="post" class="login">
<label for="">
Enter your Username
</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>
</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.
- Here, first we create a main division and under this more division and inside this a from is created. In forms, we create first upper section and then remained body.
- Upper section is in which we give it a label login form and lower section is in which we define rest body. Font family and font size is different to all others, you can go through to CSS code to see this.
- Button is made with the help of button tag and class given to it is also button. We hope that you understand the codes properly.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here we want to say that it’s upon your creativity that what type of from you made.
For a creative login page, you must have the basic knowledge of html and CSS. I hope this tutorial on HTML code for login page with username and password helps you.
About Ashish
