Section 22: Fieldset, Legend, Output, Progress, Meter and Advanced Form Patterns

Learning Objectives

• Group related form controls with fieldset and legend.
• Understand the output element.
• Display task completion using progress.
• Represent a measurement using meter.
• Build forms that are organized and accessible.

1. The fieldset Element

fieldset groups related controls in a form. It commonly provides a visual border around the group and helps communicate relationships between controls.

<fieldset>
  <label for="first-name">First Name</label>
  <input id="first-name" name="first_name" type="text">

  <label for="last-name">Last Name</label>
  <input id="last-name" name="last_name" type="text">
</fieldset>

2. The legend Element

legend provides a caption for a fieldset. It is especially useful for groups of radio buttons and checkboxes.

<fieldset>
  <legend>Delivery Address</legend>

  <label for="street">Street</label>
  <input id="street" name="street" type="text" required>

  <label for="city">City</label>
  <input id="city" name="city" type="text" required>

  <label for="postal-code">Postal Code</label>
  <input id="postal-code" name="postal_code" type="text" required>
</fieldset>

3. The output Element

output represents the result of a calculation or user action. HTML provides the element, but JavaScript or other application logic must update its value when a calculation is needed.

<form id="price-form">
  <label for="quantity">Quantity</label>
  <input id="quantity" name="quantity" type="number" min="1" value="1">

  <label for="unit-price">Unit Price</label>
  <input id="unit-price" name="unit_price" type="number" min="0" step="0.01" value="100">

  <p>Total: <output id="total" for="quantity unit-price">100.00</output></p>
</form>

<script>
  const quantity = document.querySelector("#quantity");
  const unitPrice = document.querySelector("#unit-price");
  const total = document.querySelector("#total");

  function updateTotal() {
    const q = Number(quantity.value);
    const price = Number(unitPrice.value);

    total.value = (q * price).toFixed(2);
  }

  quantity.addEventListener("input", updateTotal);
  unitPrice.addEventListener("input", updateTotal);
  updateTotal();
</script>

The output element is useful for presenting a calculated result. In production applications, validate the inputs and recalculate important totals on the server rather than trusting browser-generated values.

4. The progress Element

progress represents completion of a task, such as an upload, installation or multi-step registration process.

<label for="upload-progress">Upload progress</label>
<progress id="upload-progress" value="60" max="100">60%</progress>

With value="60" and max="100", the task is 60% complete. If the value attribute is omitted, the progress is indeterminate: the browser cannot tell how much work has been completed.

5. The meter Element

meter represents a measurement within a known range, such as storage usage, a rating or a score.

<label for="storage">Storage used</label>
<meter id="storage" min="0" max="100" value="75"
  low="30" high="80" optimum="20">75%</meter>

meter is not intended to show the progress of a task. Use progress for task completion and meter for a measurement within a defined range.

6. progress vs meter

7. Disabled Fieldset

A disabled fieldset disables most descendant form controls. A control inside its first legend element is an exception to this rule.

<fieldset disabled>
  <legend>Account Details</legend>
  <label for="account-email">Email</label>
  <input id="account-email" name="email" type="email">
  <label for="account-phone">Phone</label>
  <input id="account-phone" name="phone" type="tel">
</fieldset>

Disabled controls are generally excluded from normal form submission. Do not use disabled fields as a way to preserve trusted data or enforce permissions.

8. Advanced Form Design Principles

• Group related fields with fieldset and legend when that improves clarity.
• Give every control a meaningful, associated label.
• Use appropriate input types and native validation constraints.
• Explain errors clearly and identify the field that needs correction.
• Keep keyboard navigation and screen-reader support in mind.
• Validate all submitted values on the server.
• Use server-side security protections appropriate to the application.

Practice Exercises

1. Create a personal-details fieldset with a legend and three labelled fields.
2. Build a payment-method radio group inside a fieldset.
3. Display a fixed progress value of 40% using progress.
4. Display a storage measurement using meter.
5. Build a small total-price calculator using output and JavaScript.
6. Explain the difference between output, progress and meter.

Revision Quiz

1. Which element groups related form controls?
2. Which element provides a caption for a fieldset?
3. Which element represents a calculation result?
4. Which element shows task completion?
5. Which element represents a measurement within a known range?
6. Are disabled controls normally included in submitted form data?

Answer Key and Explanations

1. fieldset — It groups related form controls.
2. legend — It labels the fieldset.
3. output — It represents the result of a calculation or user action.
4. progress — It communicates task completion.
5. meter — It displays a measurement within a known range.
6. No. Disabled controls are generally omitted from normal form submission.