HTML <fieldset> Tag

The HTML <fieldset> tag is used to group related elements within a form, making the form more organized and easier to understand for users. By visually grouping related input fields together, the <fieldset> tag helps improve form accessibility and usability. It is particularly useful in long forms with multiple sections, as it allows developers to create logical blocks of related content.

When combined with the <legend> tag, the <fieldset> tag can also provide a caption or label for the group, helping users quickly identify the purpose of each section of the form. This contributes to better user experience and ensures that the form is accessible to screen readers and other assistive technologies.

Syntax of the <fieldset> Tag

html
<fieldset>
    <legend>Group Label</legend>
    <!-- Form elements go here -->
</fieldset>
  • <fieldset>: Defines a section of the form and groups related to form elements.
  • <legend>: Optional, but recommended for providing a label or caption for the grouped section.

Attributes of the <fieldset> Tag

The <fieldset> tag supports several attributes that enhance its functionality and customization.

AttributeDescription
disabledDisables all form controls within the <fieldset>, preventing user interaction with the grouped elements.
formAssociates the <fieldset> with a specific form using the form’s ID. This is useful when the <fieldset> is outside the form tag.
nameAllows the <fieldset> to be referenced by a name, enabling form submissions to group the fieldset's data.
global attributesSupports all global attributes, such as id, class, style, lang, etc., for customization and styling purposes.

The disabled attribute is particularly useful when you want to disable an entire section of the form at once.

Examples of HTML <fieldset> Tag

Example 1: Basic Use of the <fieldset> Tag with <legend>

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fieldset Example</title>
</head>
<body>
    <form>
        <fieldset>
            <legend>Personal Information</legend>
            <label for="fname">First Name:</label>
            <input type="text" id="fname" name="fname"><br><br>
            
            <label for="lname">Last Name:</label>
            <input type="text" id="lname" name="lname">
        </fieldset>
    </form>
</body>
</html>

In this example, the <fieldset> groups personal information fields (first and last name) under the label "Personal Information," making the form easier to read and understand.

Example 2: Disabled Fieldset

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Disabled Fieldset Example</title>
</head>
<body>
    <form>
        <fieldset disabled>
            <legend>Payment Information</legend>
            <label for="ccnum">Credit Card Number:</label>
            <input type="text" id="ccnum" name="ccnum"><br><br>

            <label for="expdate">Expiration Date:</label>
            <input type="date" id="expdate" name="expdate">
        </fieldset>
    </form>
</body>
</html>

In this example, the <fieldset> is disabled, preventing users from interacting with the input fields inside the fieldset.

FAQs About HTML <fieldset> Tag

Q1: What is the purpose of the HTML <fieldset> tag?
A: The <fieldset> tag is used to group related form elements, providing structure and organization to complex forms. It improves form readability and accessibility.

Q2: Can I use the <fieldset> tag without the <legend> tag?
A: Yes, the <fieldset> tag can be used without the <legend> tag, but including <legend> is recommended as it provides a clear label for the grouped elements, enhancing accessibility.

Q3: What is the purpose of the disabled attribute in the <fieldset> tag?
A: The disabled attribute prevents users from interacting with any form elements inside the <fieldset>, effectively disabling that section of the form.

Q4: Does the <fieldset> tag improve accessibility?
A: Yes, by grouping related form elements and using the <legend> tag, the <fieldset> tag improves accessibility, especially for users relying on screen readers.

Q5: Can I style the <fieldset> tag using CSS?
A: Yes, the <fieldset> tag can be styled using CSS just like other HTML elements. You can use attributes like class and id to apply specific styles.

tools

HTML

Related Articles