The HTML <fieldset> element is used to group related elements within a web form. The <legend> element provides a caption for the content of its parent <fieldset>, making forms more accessible and organized for users. These tags help improve form semantics and user experience.

Example 1: Basic Fieldset and Legend

<form>
  <fieldset>
    <legend>Personal Information</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </fieldset>
</form>

Explanation This example demonstrates a basic usage of <fieldset> and <legend> to group "Name" and "Email" fields under the caption "Personal Information." This clearly separates this section from other potential form elements.

Example 2: Fieldset with Radio Buttons

<form>
  <fieldset>
    <legend>Choose your favorite fruit:</legend>
    <input type="radio" id="apple" name="fruit" value="apple">
    <label for="apple">Apple</label><br>
    <input type="radio" id="banana" name="fruit" value="banana">
    <label for="banana">Banana</label><br>
    <input type="radio" id="orange" name="fruit" value="orange">
    <label for="orange">Orange</label>
  </fieldset>
</form>

Explanation Here, <fieldset> and <legend> organize a group of radio buttons for fruit selection. The legend "Choose your favorite fruit:" explicitly describes the purpose of this selection group, enhancing usability.

Example 3: Fieldset with Checkboxes

<form>
  <fieldset>
    <legend>Select your hobbies:</legend>
    <input type="checkbox" id="reading" name="hobby" value="reading">
    <label for="reading">Reading</label><br>
    <input type="checkbox" id="hiking" name="hobby" value="hiking">
    <label for="hiking">Hiking</label><br>
    <input type="checkbox" id="coding" name="hobby" value="coding">
    <label for="coding">Coding</label>
  </fieldset>
</form>

Explanation This example uses <fieldset> and <legend> to group a set of checkboxes. The legend "Select your hobbies:" clearly labels the section, allowing users to quickly understand the options available.

Example 4: Multiple Fieldsets in a Form

<form>
  <fieldset>
    <legend>Contact Information</legend>
    <label for="phone">Phone:</label>
    <input type="tel" id="phone" name="phone"><br><br>
    <label for="address">Address:</label>
    <input type="text" id="address" name="address">
  </fieldset>

  <fieldset>
    <legend>Account Details</legend>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username"><br><br>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
  </fieldset>
</form>

Explanation This demonstrates using multiple <fieldset> elements within a single form to separate different categories of information. This improves form organization and user comprehension for complex forms.

Example 5: Fieldset with Disabled Attribute

<form>
  <fieldset disabled>
    <legend>Shipping Options (Unavailable)</legend>
    <input type="radio" id="standard" name="shipping" value="standard" checked>
    <label for="standard">Standard Shipping</label><br>
    <input type="radio" id="express" name="shipping" value="express">
    <label for="express">Express Shipping</label>
  </fieldset>

  <fieldset>
    <legend>Billing Information</legend>
    <label for="card">Credit Card:</label>
    <input type="text" id="card" name="card">
  </fieldset>
</form>

Explanation Here, the disabled attribute is applied to a <fieldset>, making all enclosed form controls uneditable. This is useful for temporarily disabling sections of a form, for example, when certain conditions haven't been met.