Home
CSS
Forms

Creating a Login Form with Labels in HTML and CSS

Login Form | Coding Zemigle

In this tutorial, we guide you through building a simple and functional login form using HTML and CSS. We start with the basic HTML structure, ensuring the use of semantic elements and accessibility features like labels linked to input fields. We then move on to styling the form with CSS, creating a visually appealing design that includes centered alignment, padding, box shadows, and hover effects for the submit button.

This tutorial provides a clear, step-by-step process suitable for beginners and helps enhance your web development skills by creating a fundamental login form component.

Step 1: Setting Up the HTML Structure

First, let's start by creating the basic HTML structure for our login form. We'll use semantic HTML elements to ensure our code is clean and accessible.

✲    index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Login Form | Coding Zemigle</title>
</head>
<body>
  <form action="/login" method="post">
    <div class="container">
      <h2>Login Form</h2>
      <label for="Email address">Email address</label>
      <input type="email" name="email" id="email" required>
      <label for="Password">Password</label>
      <input type="password" name="password" id="password" required>
      <button type="submit">LOGIN</button>
      <div class="register-link">Don't have an account › <a href="#">Registration</a></div>
    </div>
  </form>
</body>
</html>



In this HTML code:
  • We create a <div> with the class login-container to center our form on the page.
  • Inside the <div>, we create a <form> with the class container. The action attribute specifies where the form data should be sent upon submission.
  • We use <h2> to add a heading for the form.
  • Each input field is wrapped in a <div> with the class form-group for styling purposes.
  • Labels are linked to their corresponding input fields using the for attribute, which enhances accessibility.


Step 2: Styling the Login Form with Labels

Next, let's style our login form to make it visually appealing. Create a CSS file named style.css and add the following styles:

✲    style.css
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@200;300;400;500;600;700&display=swap");

body{
  font-family: "Roboto", sans-serif;
  background: #225560;
  display: flex;
  justify-items: center;
  align-items: center;
  padding: 15px 20px;
  height: 100%;
  margin: 0;
}

form {
    display: flex;
    flex-direction: column;
}

.container{
  background: #FFF;
  border-radius: 10px;
  padding: 10px 25px 40px 25px;
  width: 345px;
  position: absolute;
  top: 31%; /* adjust accordingly */
  left: 50%;
  transform: translate(-50%, -50%);
}

h2{
  text-align: center;
  font-size: 30px;
  margin-bottom: 40px;
}

label{
  display: block;
  margin-bottom: 10px;
}

input{
  padding: 15px;
  margin-bottom: 35px;
  font-size: 15px;
  width: 90%;
}

button{
  background: #225560;
  width: 100%;
  padding: 17px;
  border: none;
  margin-top: 10px;
  border-radius: 3px;
  font-size: 18px;
  color: #FFF;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.register-link{
  text-align: center;
  margin-top: 30px;
}

.register-link a{
  color: royalblue;
  text-decoration-line: none;
}



In this CSS code:
  • We center the form on the page using display: flex, justify-content: center, and align-items: center on the body.
  • The .container class adds a background color, padding, box shadow, and border radius to create a card-like effect.
  • The .login-form class defines a fixed width for the form.
  • We style the heading with margin-bottom for spacing and text-align: center for alignment.
  • Each form group (.form-group) has margin-bottom for spacing.
  • Labels are styled to be bold and have some margin below them.
  • Input fields are styled with full width, padding, border, and border-radius.
  • The submit button is styled with a background-color, padding, border, and border-radius, and changes color on hover.
By following these steps, you've created a simple yet functional login form with labels using HTML and CSS. This form is not only visually appealing but also accessible and easy to use. You can further enhance it by adding more styling, JavaScript validation, and integrating it with a backend for user authentication.

Keep experimenting and learning to improve your web development skills. Happy coding!