Grouped Form with Fieldsets Template

Bring semantic structure and clarity to complex forms by grouping related fields with fieldsets.

This template demonstrates how to use the fieldset and legend elements to create organized, accessible, and easy-to-navigate forms.

Screenshot of a form with visible borders and headings around groups of related fields.

Get Source Code → Preview →

About this Grouped Form Layout

When a form has many fields, it can be intimidating for users. The fieldset element solves this by acting as a container for a group of related form controls. The legend element then provides a caption or title for that group.

This is more than just a visual grouping; it's a powerful semantic tool. For users of assistive technologies like screen readers, it's a huge accessibility win. As a screen reader navigates through the form, it can announce the legend for each group (e.g., "Entering Personal Information section..."), giving the user crucial context about the fields they are about to fill in. This template provides a clean, modern style for these elements, turning a functional necessity into an aesthetic benefit.

Features

Enhanced Accessibility: Provides essential context for screen reader users.
Logical Organization: Breaks a large form into smaller, more manageable sections, reducing cognitive load.
Semantic HTML: The standard and correct way to group related form controls.
Clean Styling: A modern take on the default browser styling for fieldsets and legends.

Ideal Use Cases

Long registration or application forms.
Complex checkout processes with distinct "Shipping", "Billing", and "Payment" sections.
Detailed settings or configuration pages in a web application.

Dependencies

None. This is pure HTML and CSS.

Code

Here's the full code for the form with fieldsets:

.form-group {
    margin-bottom: 15px;
}
.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}
.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box;
}

.submit-btn {
    width: 100%;
    padding: 12px;
    border: none;
    background-color: #007bff;
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
}
</style>

<div class="fieldset-form-container">
    <form action="#" method="post">
        <h2>Account Profile</h2>
    
        <fieldset>
            <legend>User Identity</legend>
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" id="username" name="username">
            </div>
            <div class="form-group">
                <label for="email">Email Address</label>
                <input type="email" id="email" name="email">
            </div>
        </fieldset>
    
        <fieldset>
            <legend>Security</legend>
            <div class="form-group">
                <label for="current-password">Current Password</label>
                <input type="password" id="current-password" name="current_password">
            </div>
            <div class="form-group">
                <label for="new-password">New Password</label>
                <input type="password" id="new-password" name="new_password">
            </div>
        </fieldset>
        
        <fieldset>
            <legend>Contact Information</legend>
             <div class="form-group">
                <label for="phone">Phone Number</label>
                <input type="tel" id="phone" name="phone">
            </div>
             <div class="form-group">
                <label for="address">Mailing Address</label>
                <input type="text" id="address" name="address">
            </div>
        </fieldset>
        
        <button type="submit" class="submit-btn">Save Changes</button>
    </form>
</div>

View Output