<fieldset>: The HTML Field Set Element

1 Description

The HTML <fieldset> element is used to act as a container element for <input> elements in an HTML <form>. <fieldset> elements generally have a <legend> element in them which acts as a label and is visible to the user.

Most web browsers will give the <fieldset> element a 1px black border which will visually group the children <input> elements together.

The most useful feature of the <fieldset> element is the 'disabled' attribute which can be applied to it. When the 'disabled' attribute is applied users are not able to interact or input information into the <input> elements which are children of the <fieldset> element. This can be useful when you want to disable an entire section of an HTML <form>.

2 Examples

<!DOCTYPE html>
<html>
    <head>
        <title>fieldset Example Page</title>
        <style>
            .column {
                display: flex;
                flex-direction: column;
            }
        </style>
    </head>
    <body>
        <h1>Order</h1>
        <form action="/api/order/create" method="POST">
            <input type="hidden" name="order_id" id="order_id" value="fdb048a2-3489-4235-b7e2-641521e87cfa"/>
            <fieldset class="column">
                <legend>Shipping Option</legend>
                <input type="radio" name="shipping_option" id="1_day" value="1" checked/>
                <label for="1_day">Next Business Day Delivery</label>
                <input type="radio" name="shipping_option" id="2_day" value="2"/>
                <label for="2_day">2nd Business Day Delivery</label>
                <input type="radio" name="shipping_option" id="3_day" value="3"/>
                <label for="3_day">3 Day Delivery</label>
                <input type="radio" name="shipping_option" id="slowest" value="4"/>
                <label for="slowest">2 Week Delivery</label>
            </fieldset>
            <fieldset class="column">
                <legend>Shipping Address</legend>
                <label for="street_address">Street Address</label>
                <input type="text" id="street_address" name="street_address" placeholder="Street Address" required/>
                <label for="city">City</label>
                <input type="text" id="city" name="city" placeholder"City" required/>
                <label for="state_territory">State/Territory</label>
                <input type="text" id="state_territory" name="state_territory" placeholder="State/Territory" required/>
                <label for="zip_code">Zip Code</label>
                <input type="number" id="zip_code" name="zip_code" placeholder="Zip Code" required/>
            </fieldset>
            <fieldset class="column">
                <legend>Billing Address</legend>
                <label for="street_address">Street Address</label>
                <input type="text" id="street_address" name="street_address" placeholder="Street Address" required/>
                <label for="city">City</label>
                <input type="text" id="city" name="city" placeholder"City" required/>
                <label for="state_territory">State/Territory</label>
                <input type="text" id="state_territory" name="state_territory" placeholder="State/Territory" required/>
                <label for="zip_code">Zip Code</label>
                <input type="number" id="zip_code" name="zip_code" placeholder="Zip Code" required/>
            </fieldset>
            <button type="submit">Place Order</button>
        </form>
    </body>
</html>

This document was last updated: