fieldset

I. 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.

II. 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>