Qarpeo LogoInstitute

<legend>

The HTML <legend> element offers a title or description for a <fieldset>, aiding in grouping and labeling related form controls for improved organization and accessibility.

<legend> tag

The <legend> HTML element serves as a caption for the content within its parent <fieldset>.

Syntax

index.html
<fieldset>
  <legend>Legend Text</legend>
  <!-- Form controls go here -->
</fieldset>

<legend> Demo

Form Example
Personal Information





Preferences

index.html
<h1>Form Example</h1>
<form>
  <fieldset>
    <legend>Personal Information</legend>
    <br>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" placeholder="Enter your name">
    <br>
    <br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="Enter your email">
    <br>
    <br>
  </fieldset>
  <br>
  <fieldset>
    <legend>Preferences</legend>
    <br>
    <label for="newsletter">Subscribe to newsletter:</label>
    <input type="checkbox" id="newsletter" name="newsletter">
  </fieldset>
  <br>
  <button type="button">Submit</button>
</form>

Key Points

  • Semantic Grouping: The <legend> tag provides a caption for the <fieldset>, helping to group related form elements and improve structure.
  • Styling: The <legend> tag can be styled with CSS to fit the form's design.

Conclusion

The <legend> tag helps group related <form> elements by providing a clear caption for the content inside a <fieldset>. This enhances the structure and accessibility of forms, making them easier to understand. The tag can also be styled with CSS to match the form’s design.

<label>

The HTML <label> element links a descriptive text with a form control, enhancing accessibility and usability by clearly identifying the corresponding input field.

<meter>

The HTML <meter> element represents a scalar value within a defined range, functioning as a progress bar or gauge to help users visualize and understand quantitative data.