SRIKODE
HTML & CSSBeginner

How to Create a Responsive Login Form using HTML and CSS

SriKode Team
Jul 12, 2026
1 min
69 views
How to Create a Responsive Login Form using HTML and CSS

Learn how to create a beautiful responsive login form using only HTML and CSS. This beginner-friendly tutorial includes complete source code, a live demo, and a GitHub repository.

Share this tutorial:

A login form is one of the most common components used in modern websites and web applications. In this tutorial, you'll learn how to create a clean and responsive login form using only HTML and CSS.

This project is perfect for beginners who want to improve their frontend development skills without using JavaScript or any CSS framework.

By the end of this tutorial, you'll have a professional-looking login form that works well on desktops, tablets, and mobile devices.

What You'll Build

  • Modern Login Form
  • Responsive Layout
  • Email & Password Fields
  • Login Button
  • Forgot Password Link
  • Clean UI Design
  • Mobile Friendly
  • Pure HTML & CSS

Project Structure

Project Structure
bash
1login-form/
2│
3├── index.html
4└── style.css

HTML Code

index.html
html
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Responsive Login Form</title>
7 <link rel="stylesheet" href="style.css" />
8 </head>
9
10 <body>
11 <div class="container">
12 <div class="login-box">
13 <h2>Login</h2>
14
15 <form>
16 <div class="input-box">
17 <input type="email" placeholder="Email Address" />
18 </div>
19 <div class="input-box">
20 <input type="password" placeholder="Password" />
21 </div>
22 <div class="options">
23 <a href="#">Forgot Password?</a>
24 </div>
25 <button>Login</button>
26 <p>
27 Don't have an account?
28 <a href="#">Register</a>
29 </p>
30 </form>
31 </div>
32 </div>
33 </body>
34</html>
35

CSS Code

style.css
css
1*{
2margin:0;
3padding:0;
4box-sizing:border-box;
5font-family:Arial,sans-serif;
6}
7
8body{
9display:flex;
10justify-content:center;
11align-items:center;
12height:100vh;
13background:#4f46e5;
14}
15
16.container{
17width:100%;
18padding:20px;
19display:flex;
20justify-content:center;
21}
22
23.login-box{
24width:100%;
25max-width:380px;
26background:#fff;
27padding:40px;
28border-radius:12px;
29box-shadow:0 15px 40px rgba(0,0,0,.15);
30}
31
32.login-box h2{
33text-align:center;
34margin-bottom:30px;
35}
36
37.input-box{
38margin-bottom:20px;
39}
40
41.input-box input{
42width:100%;
43padding:14px;
44border:1px solid #ddd;
45border-radius:8px;
46font-size:15px;
47outline:none;
48}
49
50.input-box input:focus{
51border-color:#4f46e5;
52}
53
54.options{
55text-align:right;
56margin-bottom:20px;
57}
58
59.options a{
60text-decoration:none;
61font-size:14px;
62color:#4f46e5;
63}
64
65button{
66width:100%;
67padding:14px;
68background:#4f46e5;
69border:none;
70color:white;
71font-size:16px;
72border-radius:8px;
73cursor:pointer;
74transition:.3s;
75}
76
77button:hover{
78background:#3730a3;
79}
80
81p{
82margin-top:20px;
83text-align:center;
84font-size:14px;
85}
86
87p a{
88text-decoration:none;
89color:#4f46e5;
90}
91
92@media(max-width:480px){
93
94.login-box{
95
96padding:25px;
97
98}
99
100}

Output

How It Works

The entire layout is created using Flexbox, allowing the login card to remain centered on every screen size.

The input fields use a clean border with a focus effect, making the interface more interactive. The button includes a smooth hover transition for a modern user experience.

A media query ensures the form remains responsive on smaller devices by reducing the padding.

Browser Support

  • Google Chrome ✅
  • Microsoft Edge ✅
  • Firefox ✅
  • Safari ✅
  • Opera ✅

Features

  • Responsive Design
  • Beginner Friendly
  • Clean UI
  • Lightweight
  • Easy to Customize
  • Pure HTML
  • Pure CSS
  • No JavaScript
  • Cross Browser Compatible

Customization Ideas

  • Add Google Login
  • Add Password Show/Hide
  • Add Remember Me Checkbox
  • Add Dark Mode
  • Add Background Image
  • Add Glassmorphism Effect
  • Connect with Backend
  • Add Form Validation

Live Demo

🚀 Click the Live Demo button to preview the project in your browser.

Source Code

📁 Download the complete source code from GitHub and customize it for your own projects.

Conclusion

Congratulations! You have successfully created a modern responsive login form using only HTML and CSS.

Although this project is simple, it introduces several important frontend concepts such as Flexbox, responsive layouts, spacing, hover effects, and reusable UI components.

You can continue improving this project by adding JavaScript validation, backend authentication, or integrating it into a React application.

Keep practicing by building more UI components, and you'll quickly become more confident in HTML and CSS.

“"The best way to master frontend development is by building real-world UI components one project at a time."”

AdvertisementSupport SriKode

Build Faster with Modern Web Stack SS

Explore curated templates, boilerplate kits, and verified libraries for rapid React & Next.js production delivery.

Explore Now →
#HTML#CSS#Login Form#Responsive Design#Beginner#CSS Tutorial
ST

Written by

SriKode Team

Web Developers & Technical Editors

Practical, hands-on web development tutorials, architecture patterns, and open-source starter kits built for modern developers.

About SriKode•GitHub•YouTube•X
Share this tutorial:

Previous

From "It Works" to "Production Ready": How I Improve a MERN Application

AdvertisementSupport SriKode

Build Faster with Modern Web Stack SS

Explore curated templates, boilerplate kits, and verified libraries for rapid React & Next.js production delivery.

Explore Now →

Comments (...)

Loading comments...

Leave a Comment

Your email won't be published. No registration needed.