Article Categories

Selected Reading

How to create a stacked form with CSS?

CSS Web Development Front End Technology

A stacked form is a form layout where input fields, labels, and buttons are vertically aligned, stacking on top of each other. This design is especially useful for mobile-responsive forms as elements naturally stack when screen space is limited.

Syntax

form {
    display: block; /* Default behavior for stacking */
    max-width: value;
}

input, label, button {
    width: 100%;
    display: block; /* Forces vertical stacking */
}

Example: Creating a Stacked Registration Form

The following example demonstrates how to create a complete stacked form with styled input fields, labels, and buttons −

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        margin: 0;
        padding: 20px;
    }
    
    .form-container {
        max-width: 500px;
        margin: 0 auto;
        background-color: white;
        padding: 30px;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    h2 {
        text-align: center;
        color: #333;
        margin-bottom: 30px;
    }
    
    label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
        color: #555;
    }
    
    input[type="text"], input[type="email"], input[type="password"] {
        width: 100%;
        padding: 12px;
        margin-bottom: 20px;
        border: 2px solid #ddd;
        border-radius: 4px;
        font-size: 16px;
        box-sizing: border-box;
    }
    
    input:focus {
        border-color: #4CAF50;
        outline: none;
    }
    
    .submit-btn {
        width: 100%;
        background-color: #4CAF50;
        color: white;
        padding: 15px;
        border: none;
        border-radius: 4px;
        font-size: 18px;
        cursor: pointer;
        margin-top: 10px;
    }
    
    .submit-btn:hover {
        background-color: #45a049;
    }
    
    .login-link {
        text-align: center;
        margin-top: 20px;
        color: #666;
    }
    
    .login-link a {
        color: #4CAF50;
        text-decoration: none;
    }
</style>
</head>
<body>
    <div class="form-container">
        <h2>Create Account</h2>
        <form>
            <label for="name">Full Name</label>
            <input type="text" id="name" name="name" placeholder="Enter your full name" required>
            
            <label for="email">Email Address</label>
            <input type="email" id="email" name="email" placeholder="Enter your email" required>
            
            <label for="password">Password</label>
            <input type="password" id="password" name="password" placeholder="Create a password" required>
            
            <label for="confirm-password">Confirm Password</label>
            <input type="password" id="confirm-password" name="confirm-password" placeholder="Confirm your password" required>
            
            <button type="submit" class="submit-btn">Register</button>
        </form>
        
        <div class="login-link">
            Already have an account? <a href="#">Sign in here</a>
        </div>
    </div>
</body>
</html>

A centered registration form with vertically stacked elements appears: a white container with "Create Account" title, four input fields (Full Name, Email, Password, Confirm Password) arranged vertically, a green "Register" button at the bottom, and a "Sign in here" link. Each element takes full width and stacks naturally.

Key CSS Properties for Stacking

Property	Purpose	Common Value
`width: 100%`	Makes elements span full container width	Ensures vertical stacking
`display: block`	Forces elements to stack vertically	Default for form elements
`margin-bottom`	Adds space between stacked elements	10px - 20px
`box-sizing: border-box`	Includes padding/border in width calculation	Prevents overflow issues

Conclusion

Stacked forms provide an excellent user experience across all devices by naturally organizing form elements vertically. Use width: 100% and proper spacing to create clean, responsive form layouts that work seamlessly on both desktop and mobile devices.

AmitDiwan

Updated on: 2026-03-15T14:38:07+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next