Login Page In HTML With CSS Code
Last Updated : Mar 11, 2024
IN - HTML CSS | Written & Updated By - Riya
In this tutorial we will show you the solution of login page in HTML with CSS code, 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 in html with css.
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 Login Page In HTML With CSS Code :-
Now, today here our topic is how to make a login page in html with the help of CSS.
The main requirement in login form is to have an input for id means the login id 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: 600px;
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: 20px;
right:70px;
}
.rmb{
position: absolute;
bottom :70px;
left: 0px;
}
#chkbox{
height: 18px;
width: 18px;
position: relative;
left: -220px;
bottom: -17px;
}
</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>
<input type="checkbox" name="" id="chkbox"><label for="" class="rmb">Remember Me</label>
<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.
- And position given to form is fixed. 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 login page in HTML with CSS code helps you.
About Riya
