LEARN HOW TO CREATE A SIMPLE LOGIN PAGE WITH HTML AND CSS
how to create a simple Login page with html and css?
- Use form element to structure a Login page.
- Use CSS file to style the web page.
The source code for this project is available for download by clicking ‘Download Now’ or cloning the GitHub repository.
SOURCE CODE OF HTML FILE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="style.css">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="title">
<span>Login Form</span>
</div>
<form action="#">
<div class="row">
<i class='bx bx-user-circle'></i>
<input type="text" placeholder="Email or Phone Number" required>
</div>
<div class="row">
<i class='bx bx-lock-alt'></i>
<input type="text" placeholder="Password" required>
</div>
<div class="pass">
<a href="#">
Forget password?
</a>
</div>
<div class="row button">
<input type="submit" value="Login">
</div>
<div class="signup">
Not a member?
<a href="#">
Signup Now
</a>
</div>
</form>
</div>
</div>
</body>
</html>
Save this code with .html extension.
Explanation
1. HTML Structure
- <!DOCTYPE html> Indicates that this web page is compiled with the HTML5 standard.
- <html lang=”en”> Is essential for a web page, signifying that that this web page is written in HTML and indicating that English is the main language for this LOGIN page.
- <head> Section: Contains Metadata that is used to shapes Login page.
- Title Section: Specified using the <title> tag, it appears in the browser tab as “Login”.
- CSS Links:
- <link rel=”stylesheet” href=”style.css”> Is used to import a custom style that is declared in the “style.css” file to Enhance Web Design.
- <link href=’https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css’ rel=’stylesheet’> Is used to link a third party stylesheet for icons to improve the UI.
2. Body Section
Body sections contains the visible content of the Login page.
- <div class=”container”> Implements a centralized Layout for main Container.
- <div class=”wrapper”> Is used to create a wrapper inside the container, providing additional control over the positioning and styling of the content.
- The heading “Login Form” is showcased with personalized design using a “title” class, where the appearance is likely defined in the “style.css” file.
- <form> Tag is used to created login form using the HTML code <form action=”#”>. This form is designed to submit data to the same page with the help of the “#” action.
- Email/Phone Row: <div class=”row”><i class=’bx bx-user-circle’></i><input type=”text” placeholder=”Email or Phone Number” required></div>
This snippet of code generates a row for an email or phone in the form. It includes an icon (bx bx-user-circle) and an input field for entering email or phone number.
Additionally, the input field is designated as a required field. - Password Row:<div class=”row”><i class=’bx bx-lock-alt’></i><input type=”text” placeholder=”Password” required></div>
The password row generates an additional row in the form, which includes an icon (bx bx-lock-alt) and input field for the password is also required. - Forgot Password Link: Is available in the “pass” div, offers users a convenient way to reset their passwords. By clicking on this link, which is most likely styled in “style.css”.
- Submit Button: There is a submit button in the form and performs the action of submitting the form when it is clicked. The button is labeled as “Login”.
overall functionality:
- This code creates a simple login form with e-mail/phone and password fields, a “Forgot password?” hyperlink, a submit button, and a “Signup Now” link.
- When clicking the submit button, the form is submitted to the same web page (action=”#”), but how the information is treated could rely on the server-side implementation.You will normally update the # action with a server-side script to procedure the login credentials.
Source code of CSS file.
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
background: #1cb824;
overflow: hidden;
}
.container
{
max-width: 360px;
margin: 170px auto;
padding: 0 20px;
}
.wrapper
{
width: 100%;
background: white;
border-radius: 5px;
}
.wrapper .title
{
line-height: 70px;
color: white;
background: #087e1b;
text-align: center;
border-radius: 5px 5px 0 0 ;
font-size: 25px;
font-weight: 600;
}
.wrapper form
{
padding: 30px 20px 25px 20px;
}
.wrapper form .row
{
height: 40px;
margin-bottom: 15px;
position: relative;
}
.wrapper form .row i
{
position: absolute;
width: 45px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 25px;
font-weight: 500;
background: #087e1b;
border-radius: 5px 0px 0px 5px ;
}
.wrapper form .row input
{
height: 100%;
width: 100%;
padding-left: 60px;
font-size: 18px;
font-weight: 500;
outline: none;
border-radius: 5px;
border: 1px solid #cec7c7;
}
.wrapper form .pass
{
margin: -9px 0 15px 0;
}
.wrapper form .pass a
{
color: #087e1b;
font-size: 18px;
text-decoration: none;
}
.wrapper form .button input
{
color: #ffffff;
font-size: 20px;
font-weight: 500;
padding: 0;
background: #087e1b;
}
.wrapper form .signup
{
text-align: center;
font-size: 18px;
margin-top: 18px;
}
.wrapper form .signup a
{
color: #087e1b;
text-decoration: none;
}
Save this file with .CSS extension.
Explanation
The given short code signifies the cascading style sheets (CSS) for a login form interface. It identifies styles for different elements such as the container, wrapper, title, input fields, buttons, and links, making a visually attractive and functional layout.
Global styles:
- Margin and padding are set to 0 for all elements (*) to completely remove internet browser margins and padding, making sure of accurate control over element positioning.
box-sizing: The border-box is used to encompass padding and border within the clarified width and height values, stopping content overflow.
body:
- The background color is set to #1cb824 (a vibrant green), providing a visually unique foundation for the Login form.
overflow: Hidden is implemented to avoid horizontal scrolling, possibly assisting in responsive design or maintaining the content centered within the viewport.
Container:
- max-width: 360px establishes a maximum width, creating a responsive design that adapts to different screen sizes.
margin: 170px auto centers the container vertically within the viewport, ensuring alignment on various screen resolutions.
padding: 0 20px adds minimal horizontal padding for visual balance.
Wrapper:
- width: 100% makes the wrapper occupy the full width of the container.
background: White provides a contrasting background for the form elements.
border-radius: 5px rounds the corners of the wrapper, softening the visual appearance.
Title:
- line-height: 70px sets the line height to match the element height, improving vertical formatting.
color: White ensures good contrast against the green background.
background: #087e1b (a deeper green) subtly distinguishes the title area.
text-align: Center aligns the title text horizontally.
border-radius: 5px 5px 0 0 applies top-left and top-right border rounding, mimicking a banner shape.
font-size: 25px and font-weight: 600 make the title prominent and visually appealing.
Form:
- padding: 30px 20px 25px 20px adds spacing around the form elements for usability and aesthetics.
Row:
- height: 40px establishes a consistent height for input fields and icons.
margin-bottom: 15px adds vertical spacing between rows.
position: Relative allows absolute positioning of icons within each row.
Icon:
- position: Absolute places the icon precisely within the row.
width: 45px and height: 100% give the icon a fixed size.
display: flex; align-items: center; justify-content: Are used to center the icon content vertically and horizontally.
color: #ffffff (white) creates contrast against the green background.
font-size: 25px and font-weight: 500 make the icon visually clear.
background: #087e1b matches the deeper green shade for consistency.
border-radius: 5px 0px 0px 5px is used to round the left corners.
Input:
- height: 100% and width: 100% is used to fill the input field with entire row width and height.
padding-left: 60px leaves space for the left-aligned icons.
font-size: 18px and font-weight: 500 improve readability.
outline: None removes the default browser outline when focused.
border-radius: 5px matches the other rounded corners for visual coherence.
border: 1px solid #cec7c7 creates a thin gray border for subtle definition.
Pass:
- margin: -9px 0 15px 0 adjusts the vertical positioning of the “forget Password”.
Button:
- color: #ffffff is used to sets the text color as white.
- font-size: 25px and font-weight: 500 makes the icon large.
- Padding: ( padding : 0) means no top bottom padding.
- Background: #087e1b (green) is set as a background color.
Signup:
- Selects style for signup link.
Thanks for reading this article.