fieldset: The Field Set element

The <fieldset> HTML element is used to group several controls as well as labels (<label>) within a web form. The <legend> element provides a caption for the fieldset.

Attributes

Specific attributes

Allowed attributes

disabled disables all the form controls that are descendants of the fieldset. The disabled state is displayed visually and prevented from receiving user input.

form="[form id]" specifies the <form> element with which the fieldset is associated. The value must be the id of a <form> element in the same document.

name="[name]" the name associated with the fieldset. This can be used to reference the fieldset programmatically.

Global attributes

accesskey Specifies a keyboard shortcut to activate or focus an element.

aria-* Defines accessibility properties and states for assistive technologies.

class Specifies one or more CSS class names for styling the element.

data-* Stores custom data private to the page or application.

dir Sets the text direction (left-to-right, right-to-left, or auto).

hidden Hides the element from display and assistive technologies.

id Defines a unique identifier for the element within the document.

inputmode Hints which virtual keyboard type to display on mobile devices.

itemid Provides a global identifier for microdata items.

itemprop Defines a property name-value pair for microdata.

itemref Associates properties with an item via element IDs for microdata.

itemscope Creates a new microdata item container.

itemtype Specifies the vocabulary URL for microdata items (like Schema.org).

lang Specifies the primary language of the element’s content.

nonce Provides a cryptographic nonce for Content Security Policy.

role Defines the element’s semantic role for accessibility.

tabindex Controls keyboard navigation order and focusability.

title Provides advisory information displayed as a tooltip.

Example

<form action="/contact" method="post">
  <fieldset>
    <legend>Contact Information</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <label for="website">Personal Website:</label>
    <input type="url" id="website" name="website" placeholder="https://your-domain.com">
  </fieldset>
  
  <fieldset>
    <legend>Message</legend>
    <label for="subject">Subject:</label>
    <input type="text" id="subject" name="subject">
    
    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="5" cols="40" required></textarea>
  </fieldset>
  
  <fieldset>
    <legend>Communication Preferences</legend>
    <label>
      <input type="checkbox" name="newsletter" value="yes">
      Subscribe to updates about IndieWeb events
    </label>
    <label>
      <input type="checkbox" name="webmention" value="yes">
      Send me webmentions when you link to my site
    </label>
  </fieldset>
  
  <button type="submit">Send Message</button>
</form>