Syntax
<fieldset>
<legend>Group Title</legend>
<!-- form controls -->
</fieldset>Examples
Grouped Radio Buttons
Using fieldset to group a set of related radio options.
<fieldset>
<legend>Preferred Contact Method</legend>
<label><input type="radio" name="contact" value="email"> Email</label>
<label><input type="radio" name="contact" value="phone"> Phone</label>
</fieldset>Multi-Section Form
Breaking a longer form into clearly labeled groups.
<form>
<fieldset>
<legend>Personal Details</legend>
<input type="text" placeholder="Full Name">
<input type="email" placeholder="Email">
</fieldset>
<fieldset>
<legend>Address</legend>
<input type="text" placeholder="Street">
<input type="text" placeholder="City">
</fieldset>
</form>Disabling a Whole Group
The disabled attribute on fieldset disables every control inside it at once.
<fieldset disabled>
<legend>Payment Details (complete Step 1 first)</legend>
<input type="text" placeholder="Card Number">
</fieldset>Attributes
- disabled (boolean): Disables every form control nested inside the fieldset
- name (string): Associates the fieldset with the form for scripting purposes
Best practices
- Always include a <legend> as the first child of a <fieldset> — it is what gives the group its accessible name
- Use fieldset to group related radio buttons or checkboxes so screen readers announce the group context
- Use the disabled attribute on a fieldset to disable a whole section at once instead of each input individually
- Avoid using fieldset purely for visual styling — use a <div> if there is no genuine grouping of controls
At a glance
- Purpose
- Structure and meaning for web content
- File extension
- .html · .htm
- Runs in
- Web browsers
- Usually used with
- CSS and JavaScript
Specifications & further reading
Related HTML documentation
<button>
The <button> element creates a clickable button that can trigger actions like submitting a form, resetting a form, or running custom JavaScript. Unlike <input type="button">, <button> can contain other HTML content such as icons or styled text, not just plain text. Its type attribute determines its default behavior within a form.<input>
The <input> element creates interactive form controls for collecting user data. Its behavior changes dramatically based on the type attribute — a single element can become a text field, checkbox, radio button, date picker, file uploader, and more. It is a void (self-closing) element with no closing tag or child content.<label>
The <label> element defines a caption for a form control, improving both usability and accessibility. Clicking a label activates or focuses its associated input — useful for small targets like checkboxes and radio buttons. Labels can be associated with an input either by wrapping it, or by using a for attribute that matches the input's id.<textarea>
The <textarea> element creates a multi-line plain-text input control, ideal for comments, messages, and any content longer than a single line. Unlike <input>, its default value is placed between the opening and closing tags rather than in a value attribute, and users can typically resize it by dragging its corner.
The <button> element creates a clickable button that can trigger actions like submitting a form, resetting a form, or running custom JavaScript. Unlike <input type="button">, <button> can contain other HTML content such as icons or styled text, not just plain text. Its type attribute determines its default behavior within a form.<input>
The <input> element creates interactive form controls for collecting user data. Its behavior changes dramatically based on the type attribute — a single element can become a text field, checkbox, radio button, date picker, file uploader, and more. It is a void (self-closing) element with no closing tag or child content.<label>
The <label> element defines a caption for a form control, improving both usability and accessibility. Clicking a label activates or focuses its associated input — useful for small targets like checkboxes and radio buttons. Labels can be associated with an input either by wrapping it, or by using a for attribute that matches the input's id.<textarea>
The <textarea> element creates a multi-line plain-text input control, ideal for comments, messages, and any content longer than a single line. Unlike <input>, its default value is placed between the opening and closing tags rather than in a value attribute, and users can typically resize it by dragging its corner.