HTML Tutorial

HTML Tag: <fieldset>

Usage of <fieldset>:

  • Groups related form elements (radio buttons, checkboxes, etc.) into a logical unit.
  • Creates visual grouping and organization for improved user interface.

Attributes of <fieldset>:

  • disabled: Disables all form elements within the fieldset.
  • form: Specifies the form to which the fieldset belongs.
  • name: Assigns a name to the fieldset for identification purposes.

Examples with <fieldset>:

  • Group radio buttons representing different genders:
<fieldset>
  <legend>Gender</legend>
  <input type="radio" name="gender" value="male"> Male
  <input type="radio" name="gender" value="female"> Female
  <input type="radio" name="gender" value="other"> Other
</fieldset>
  • Create a section for personal information:
<fieldset>
  <legend>Personal Information</legend>
  <label for="name">Name:</label>
  <input type="text" id="name">
  <label for="email">Email:</label>
  <input type="email" id="email">
</fieldset>

Simple HTML Example:

<!DOCTYPE html>
<html>
<body>
  <h1>User Preferences</h1>

  <fieldset>
    <legend>Language Options</legend>
    <input type="checkbox" name="lang" value="en"> English
    <input type="checkbox" name="lang" value="es"> Spanish
  </fieldset>

  <fieldset>
    <legend>Notifications</legend>
    <input type="checkbox" name="notify" value="email"> Email
    <input type="checkbox" name="notify" value="sms"> SMS
  </fieldset>

  <input type="submit" value="Save">
</body>
</html>

Benefits of Using <fieldset>:

  • Improved organization and readability of forms.
  • Facilitates accessibility for users with disabilities (e.g., screen readers).
  • Provides a consistent visual representation of related elements.