Simple Login Form

Enhance user experience on your website with a simple login form. Learn how to create a user-friendly login form layout that facilitates seamless access for users, improving usability and engagement.

A simple login form is a fundamental component for any website that requires user authentication. This tutorial will guide you through creating and customizing a simple login form using HTML and CSS.

Step 1: Copy the Code Snippet

  • Begin by copying the provided HTML and CSS code snippets. This includes the structure and styles required to create a functional login form.

Step 2: Link CSS

  • Ensure the styles.css file is correctly linked in your HTML document. Add the following <link> tag within the <head> section to import the CSS styles:
    <link rel="stylesheet" href="styles.css">

Step 3: Customize and Make it Yours

To make the simple login form your own, you can customize various aspects such as:

  • Text and Labels: Modify the text content in the HTML file to match your website's language and tone.
  • CSS Styles: Adjust the styles in styles.css to change dimensions, colors, fonts, and other properties to match your website's design.

By following these steps, you can implement and personalize a simple login form using HTML and CSS, enhancing the functionality and user experience on your website.

Code Explanation

HTML Code

<div class="login-card">:

<div class="login-card">
  • This div element acts as a container for the entire login card component. The login-card class can be used to style this container with CSS.

Main Heading (<h2>):

<h2>Login</h2>
  • An h2 element that provides the main heading of the login card, indicating the purpose of the form (Login).

Subheading (<h3>):

<h3>Enter your credentials</h3>
  • An h3 element that provides additional context or instructions for the user (to enter their credentials).

Form Container (<form class="login-form">):

<form class="login-form">
  • A form element with a class of login-form that contains the input fields and submit button. The class can be used for styling and possibly JavaScript functionality.

Username Input:

<input type="text" placeholder="Username" />
  • An input element of type text for the user to enter their username.
  • The placeholder attribute provides a hint to the user about what to enter in the field.
Password Input:
<input type="password" placeholder="Password" />
  • An input element of type password for the user to enter their password.
  • The placeholder attribute provides a hint to the user about what to enter in the field.
  • The password type masks the input, showing dots or asterisks instead of the actual characters.
Forgot Password Link:
<a href="https://website.com">Forgot your password?</a>
  • An a (anchor) element that provides a link for users who have forgotten their password. Clicking this link will navigate the user to the specified URL (https://website.com).
  • The text "Forgot your password?" indicates the purpose of the link.
Submit Button:
<button type="submit">LOGIN</button>
  • A button element of type submit used to submit the form data when clicked.
  • The text "LOGIN" indicates the action that will be taken when the button is pressed.
Closing Form and Div Tags:
</form>
</div>
  • The closing </form> tag marks the end of the form element.
  • The closing </div> tag marks the end of the outer container div.

CSS Code

Universal Selector (*):
* {
  box-sizing: border-box;
}
  • Ensures that the box-sizing property for all elements is set to border-box, which includes padding and border in the element's total width and height.
Height Settings for html, body, and .wrapper:
.wrapper {
  height: 100%;
}
  • Sets the height of the html, body, and .wrapper elements to 100% of the viewport height.
Keyframes for Rotate Animation:
@keyframes rotate {
  100% {
    background-position: 15% 50%;
  }
}
  • Defines a keyframe animation named rotate that moves the background position to 15% 50% over the course of the animation.
Body Styling:
body {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 24px;
  background-image: url("https://raw.githubusercontent.com/frontend-joe/css-logins/8d82e8afb580154a1da6d3183f270a618884dcaa/login-1/background.svg");
  background-repeat: no-repeat;
  background-size: cover;
  font-family: "Poppins";
  color: #000;
  animation: rotate 6s infinite alternate linear;
}
  • display: grid: Centers the content within the body using CSS Grid.
  • place-items: center: Aligns the content both horizontally and vertically.
  • margin: 0: Removes default margin.
  • padding: 0 24px: Adds horizontal padding.
  • background-image: Sets a background image.
  • background-repeat: no-repeat: Ensures the background image does not repeat.
  • background-size: cover: Ensures the background image covers the entire viewport.
  • font-family: "Poppins": Sets the font family to "Poppins".
  • color: #000: Sets the text color to black.
  • animation: rotate 6s infinite alternate linear: Applies the rotate animation with a duration of 6 seconds, infinitely alternating in a linear fashion.
Media Query for body:
@media (width >= 500px) {
  body {
    padding: 0;
  }
}
  • Removes the padding when the viewport width is 500px or more.
Login Card Container (.login-card):
.login-card {
  position: relative;
  z-index: 3;
  width: 100%;
  margin: 0 20px;
  padding: 70px 30px 44px;
  border-radius: 1.25rem;
  background: #fff;
  text-align: center;
}
  • position: relative: Positions the element relative to its normal position.
  • z-index: 3: Sets the stacking order.
  • width: 100%: Sets the width to 100% of the parent container.
  • margin: 0 20px: Adds horizontal margin.
  • padding: 70px 30px 44px: Adds padding inside the element.
  • border-radius: 1.25rem: Rounds the corners.
  • background: #fff: Sets the background color to white.
  • text-align: center: Centers the text.
Media Query for .login-card:
@media (width >= 500px) {
  .login-card {
    margin: 0;
    width: 400px;
  }
}
  • Adjusts the margin and width of the .login-card when the viewport width is 500px or more.
Main Heading (.login-card > h2):
.login-card > h2 {
  font-size: 36px;
  font-weight: 600;
  margin: 0 0 12px;
}
  • font-size: 36px: Sets the font size.
  • font-weight: 600: Sets the font weight.
  • margin: 0 0 12px: Adds bottom margin.
Subheading (.login-card > h3):
.login-card > h3 {
  color: rgba(0, 0, 0, 0.38);
  margin: 0 0 30px;
  font-weight: 500;
  font-size: 1rem;
}
  • color: rgba(0, 0, 0, 0.38): Sets the text color with transparency.
  • margin: 0 0 30px: Adds bottom margin.
  • font-weight: 500: Sets the font weight.
  • font-size: 1rem: Sets the font size.
Login Form Container (.login-form):
.login-form {
  width: 100%;
  margin: 0;
  display: grid;
  gap: 16px;
}
  • width: 100%: Sets the width to 100%.
  • margin: 0: Removes default margin.
  • display: grid: Uses CSS Grid for layout.
  • gap: 16px: Adds space between grid items.
Input and Button Elements (.login-form > input, .login-form > button):
Copy code
.login-form > input,
.login-form > button {
  width: 100%;
  height: 56px;
}
  • width: 100%: Sets the width to 100%.
  • height: 56px: Sets the height.
Input Field (.login-form > input):
.login-form > input {
  border: 2px solid #ebebeb;
  font-family: inherit;
  font-size: 16px;
  padding: 0 16px;
}
  • border: 2px solid #ebebeb: Sets the border color and width.
  • font-family: inherit: Inherits the font family from the parent.
  • font-size: 16px: Sets the font size.
  • padding: 0 16px: Adds horizontal padding.
Button (.login-form > button):
.login-form > button {
  cursor: pointer;
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border-radius: 0.5rem;
  background: #216ce7;
  color: #f9f9f9;
  border: 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  letter-spacing: 2px;
  transition: all 0.375s;
}
  • cursor: pointer: Changes the cursor to a pointer on hover.
  • border-radius: 0.5rem: Rounds the corners.
  • background: #216ce7: Sets the background color.
  • color: #f9f9f9: Sets the text color.
  • border: 0: Removes the border.
  • font-family: inherit: Inherits the font family.
  • font-size: 1rem: Sets the font size.
  • font-weight: 600: Sets the font weight.
  • text-align: center: Centers the text.
  • letter-spacing: 2px: Adds letter spacing.
  • transition: all 0.375s: Adds a transition effect.
Link (.login-form > a):
.login-form > a {
  color: #216ce7;
  font-size: 1rem;
  text-align: left;
  text-decoration: none;
  margin-bottom: 6px;
}
  • color: #216ce7: Sets the text color.
  • font-size: 1rem: Sets the font size.
  • text-align: left: Aligns the text to the left.
  • text-decoration: none: Removes underline from the text.
  • margin-bottom: 6px: Adds bottom margin.