Home
AI
CSS

How to create a Login Form in HTML and CSS

Login Form | Coding Zemigle
A login form is a crucial element in web applications, serving as the gateway for users to access personalized content and services. It’s the first point of interaction for users requiring authentication, ensuring that only authorized individuals can gain access to certain areas of a website or application.

Creating a login form involves a combination of HTML and CSS to structure and style the interface, making it both functional and visually appealing. HTML provides the foundation for the form's structure, including input fields and buttons, while CSS enhances its appearance, ensuring it aligns with your website’s design and user experience goals.


In this guide, we'll walk you through the process of creating a simple yet effective login form using HTML and CSS. You'll learn how to build the form structure, apply basic styling, and ensure it looks great across different devices. By the end, you'll have a polished login form ready to be integrated into your web projects.

Step 01: Setting Up the HTML structure

Start by creating a new index.html file and include the standard HTML boilerplate. This will set up the basic structure of your HTML structure:  

✲    index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Login Form | Coding Zemigle</title> 
   </head>
<body>
  <div class="wrapper">
    <h2>Login</h2>
    <form action="#">
      <div class="input-box">
        <input type="text" placeholder="Username" required>
      </div>
      <div class="input-box">
        <input type="password" placeholder="Enter password" required>
      </div>
      <div class="policy">
        <input type="checkbox">
        <h3>Stay logged In.</h3>
      </div>
      <div class="input-box button">
        <input type="Submit" value="Login">
      </div>
      <div class="text">
        <h3>Not a member? <a href="#">Register</a></h3>
      </div>
    </form>
  </div>
</body>
</html>



By following these steps, you’ll have a basic login form structure in place. The next step will be to apply styling with CSS to enhance the form's appearance and ensure it is user-friendly.


Once you have the basic HTML structure of your login form, you can enhance its appearance with CSS. Here’s how you can style the form to make it look professional and user-friendly.

Step 02: Styling with CSS

Start by defining the overall appearance of the form container. This includes setting its dimensions, margins, and alignment:

✲    style.css
@import url('https://fonts.googleapis.com/css?family=Verdana:400,500,600,700&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Verdana', sans-serif;
}

body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 20px;
  justify-content: center;
  background: #12664F;
}

.wrapper{
  position: relative;
  max-width: 430px;
  width: 100%;
  background: #fff;
  padding: 34px;
  border-radius: 6px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

.wrapper h2{
  position: relative;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.wrapper h2::before{
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  height: 3px;
  width: 56px;
  border-radius: 12px;
  background: #12664F;
}

.wrapper form{
  margin-top: 30px;
}

.wrapper form .input-box{
  height: 55px;
  margin: 22px 0;
}

form .input-box input{
  height: 100%;
  width: 100%;
  outline: none;
  padding: 0 15px;
  font-size: 15px;
  font-weight: 400;
  color: #333;
  border: 1.5px solid #C7BEBE;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.input-box input:focus,
.input-box input:valid{
  border-color: #12664F;
}

form .policy{
  display: flex;
  align-items: center;
  margin: 5px 0 5px 2px;
}

form h3{
  color: #707070;
  font-size: 14px;
  font-weight: 500;
  margin-left: 10px;
}

.input-box.button input{
  color: #fff;
  letter-spacing: .4px;
  border: none;
  font-weight: bold;
  background: #12664F;
  cursor: pointer;
}

.input-box.button input:hover{
  background: #12664F;
}

form .text h3{
 color: #333;
 width: 100%;
 text-align: center;
}

form .text h3 a{
  color: #12664F;
  font-weight: 600;
  text-decoration: none;
}

form .text h3 a:hover{
  text-decoration: underline;
}



By applying these styles, you’ll create a visually appealing and user-friendly login form. Feel free to further customize the design to match your website's overall look and feel.

To make your login form not only functional but also user-friendly and visually appealing, you can add several enhancements.

By incorporating enhancements, you can create a login form that is not only functional but also visually appealing and user-friendly. These improvements will help guide users through the login process and ensure a positive experience across various devices.

With these techniques, you can ensure that your login form not only meets the functional requirements but also aligns with your overall design aesthetics.