Create a Stacked Form using CSS

Last Updated : 24 May, 2024

A stacked form layout is a common design pattern where form elements are displayed vertically, one on top of the other. This layout is often used for simplicity and clarity in user interfaces. In this article, we will explore the process of creating a Stacked Form using CSS.

Approach

Create a <div> element with a class of "form-container" to hold the form inside <body>.
Create a <form> element to encapsulate the form fields within the "form-container" <div>.
Inside the <form> element, create form fields using <div> elements with a class of "form-group".
Add <input> elements for each form field with appropriate type attributes such as "text", "password", "email", "tel", etc, and set the id and name attributes accordingly.
Ensure that all required fields are marked with the "required" attribute.
Add a "required" attribute for each field for form validation.
Define CSS styles for the form container, form groups, labels, input fields, and submit button.

Example: Implementation To Create a Stacked Form using CSS.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title> Stacked Form</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
        }
        
        .form-container {
            max-width: 400px;
            margin: 50px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border: 2px solid #007bff;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            color: #333;
        }
        
        input[type="text"],
        input[type="password"],
        input[type="email"],
        input[type="tel"],
        button {
            width: 95%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            transition: border-color 0.3s ease;
        }
        
        input[type="text"]:focus,
        input[type="password"]:focus,
        input[type="email"]:focus,
        input[type="tel"]:focus {
            border-color: dodgerblue;
            outline: none;
        }
        
        button {
            background-color: dodgerblue;
            width: 100%;
            color: #fff;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        
        button:hover {
            background-color: #007bff;
        }
        h2{
            text-align: center;
            color: green;
        }
        h3{
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="form-container">
        <h2>Welcome to GeeksForGeeks</h2>
        <h3>Stacked form</h3>

        <form>
            <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>

            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" id="email"
                       name="email" required>
            </div>

            <div class="form-group">
                <label for="phone">Phone:</label>
                <input type="tel" 
                       id="phone" 
                       name="phone" required>
            </div>

            <button type="submit">Submit</button>
        </form>
    </div>
</body>
</html>

Output:

How to Create a Stacked Form using CSS ?

ghuleyogesh

Improve

Article Tags :

Create a Stacked Form using CSS

Approach

Similar Reads

Thank You!

What kind of Experience do you want to share?