How to Create a Responsive Login Form With CSS

Having a user-friendly and responsive login form is crucial for the success of any website or application.

A login form is an essential part of any website that requires user authentication, and a responsive login form ensures that the form adjusts to different screen sizes and devices, providing an optimal user experience.

In this tutorial, we will learn how to create a responsive login form using CSS.

We will go through the steps to create the HTML structure for the form, apply basic styling using CSS, and make it responsive using media queries.

HTML Structure for the Login Form

Let’s start by creating the HTML structure for the login form. The following code represents the basic HTML structure for the form:

<div class="container">
  <form action="#">
    <h2>Login</h2>
    <div class="form-group">
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" required>
    </div>
    <div class="form-group">
      <label for="password">Password:</label>
      <input type="password" id="password" name="password" required>
    </div>
    <button type="submit">Submit</button>
  </form>
</div>

In the above code, we have a form element that contains two text inputs (username and password) and a submit button.

We also have two div elements with the class “form-group” that act as containers for each input.

Basic Styling with CSS

Now that we have the HTML structure in place, let’s add some basic styling to the form using CSS. The following code represents the basic styling for the form:

.container {
  width: 50%;
  margin: 0 auto;
}

form {
  background-color: #f2f2f2;
  padding: 30px;
  border-radius: 10px;
}

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

.form-group {
  margin-bottom: 20px;
}

label,
input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 12px;
  border-radius: 5px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  margin-bottom: 10px;
  font-size: 16px;
}

button[type="submit"] {
  width: 100%;
  padding: 12px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

In the above code, we have added styles to the form’s container, form, headings, form-group, label, inputs, and button.

The styles include setting the width of the form, adding padding and a border-radius, and setting a background color.

Making the Login Form Responsive with Media Queries

Finally, let’s make the form responsive using media queries.

The following code represents the media queries for the form:

@media (max-width: 600px) {
.container {
width: 90%;
}

label,
input[type="text"],
input[type="password"] {
font-size: 14px;
}

button[type="submit"] {
font-size: 14px;
}
}

In the above code, we have added a media query that checks the maximum width of the screen.

If the screen width is less than 600px, we are reducing the width of the form container to 90%, and reducing the font size of the label, inputs, and submit button to 14px.

Conclusion

In this blog post, we learned how to create a responsive login form using CSS.

We created the HTML structure for the form, applied basic styling using CSS, and made it responsive using media queries.

By following these steps, you can create a responsive login form for your website or application, providing an optimal user experience for your users.