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