REFERENCEhtml

html Documentation

📖 INDEX

# a-tag

# abbr-tag

LOADING ENGINE...

HTML Fieldset Tag

Group related form elements together. Learn to use the <fieldset> tag with <legend> for better form organization and accessibility.

fieldset.html

<legend>Contact Info</legend>

</fieldset>

📋

Interactive Tutorial Text Version

The <fieldset> tag groups related form elements together. It creates a visual and semantic grouping, making forms more organized and accessible.

<fieldset>

A <fieldset> wraps related form controls. Use <legend> inside to label the group. This helps screen readers understand the form structure.

<fieldset>
  <legend>Group Name</legend>
</fieldset>

Now we add form elements inside the fieldset. The browser renders it with a border around the grouped elements, and screen readers announce the legend when navigating.

<fieldset>
  <legend>Contact Info</legend>
  <input type="text" name="name">
  <input type="email" name="email">
</fieldset>

In the browser, <fieldset> appears with a border around the grouped form elements. The <legend> appears as a caption at the top of the border.

<fieldset>
  <legend>Contact Info</legend>
  <input type="text" name="name">
  <input type="email" name="email">
</fieldset>

Checkpoint: What element should you use inside <fieldset> to label the group?

<fieldset>
  <legend>Contact Info</legend>
</fieldset>

Correct! The <legend> element provides a caption for the <fieldset>. It's announced by screen readers when users navigate into the fieldset group.

<fieldset>
  <legend>Contact Info</legend>
  <input type="text" name="name">
  <input type="email" name="email">
</fieldset>

Now it's your turn. Using <fieldset> and <legend> makes forms more accessible and organized. Complete the challenges below to master the Fieldset tag!

fieldset.html

1 / 7

📋

Tutor:The <fieldset> tag groups related form elements together. It creates a visual and semantic grouping, making forms more organized and accessible.

⭐ 0 EXP

Form Grouping Mastery

Unlock nodes by learning form structure and accessibility.

Concept 1: The Fieldset Tag

The <fieldset> tag groups related form elements together. It creates a visual and semantic grouping, making forms more organized and accessible.

System Check

What is the primary purpose of the <fieldset> tag?

To style form elementsTo group related form elementsTo validate form inputTo submit forms

Community Holo-Net

Share Form Designs

Created accessible forms with fieldsets? Share your code and best practices.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

HTML Fieldset Tag

Pascual Vila

Frontend Instructor.

The <fieldset> tag groups related form elements together. It creates a visual and semantic grouping, making forms more organized and accessible.

Form Grouping

The <fieldset> element wraps related form controls (like inputs, selects, textareas) to create a logical group. This helps users understand which fields belong together.

Using with Legend

Always use a <legend> element inside <fieldset> to provide a caption for the group. The legend appears visually at the top of the fieldset border and is announced by screen readers.

Accessibility Benefits

Screen readers announce the legend when users navigate into a fieldset, providing context for the grouped form elements. This makes complex forms much more accessible and easier to navigate.

Best Practices

Use <fieldset> to group logically related form fields. Keep legends concise but descriptive. Use multiple fieldsets to organize large forms into manageable sections. This improves both visual organization and accessibility.

Fieldset Tag Glossary

<fieldset>: HTML element that groups related form elements together. Creates visual and semantic grouping for better organization and accessibility.
<legend>: HTML element that provides a caption for a <fieldset>. Must be the first child of fieldset and is announced by screen readers.
Form Grouping: The practice of organizing related form controls together. <fieldset> provides semantic grouping for accessibility.
Accessibility: Screen readers announce the legend when navigating into a fieldset, providing context for grouped form elements. This makes forms more accessible.
Block Element: An element that creates a new line and takes full width. <fieldset> is a block-level element.