What is Fieldset and Legend? | HTML Interview Questions

What You'll Learn

Using fieldset and legend
Form accessibility
Disabling groups

The Elements

fieldset: Groups related form controls with a border
legend: Caption for the group, appears in the border

Example

index.htmlHTML

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

Radio Button Group

index.htmlHTML

<fieldset>
  <legend>Select your plan:</legend>
  <input type="radio" id="free" name="plan" value="free">
  <label for="free">Free</label>
  <input type="radio" id="pro" name="plan" value="pro">
  <label for="pro">Pro - $9/month</label>
</fieldset>

Disable All Controls

index.htmlHTML

<fieldset disabled>
  <legend>Premium Features</legend>
  <!-- All inputs inside are disabled -->
</fieldset>

Accessibility

Screen readers announce the legend when entering the group.