5.5 — Other Form Controls

Multi‑Line Text with <textarea>

<textarea> is a container element (not void) designed for paragraphs of text. Use rows and cols to set its visible dimensions, and wrap to control line‑break behavior.

• wrap="soft" – text wraps visually but line breaks are not sent to the server (default).
• wrap="hard" – line breaks are included in the submitted value; requires a cols attribute to know where to break.

Dropdown Selection Trees: <select>, <optgroup>, <option>

The <select> element creates a dropdown list. Inside it, <option> elements define each choice. To group options under a non‑selectable header, wrap them in <optgroup> with a label attribute.

<select name="engine" id="engine-select">
  <optgroup label="Relational">
    <option value="pg">PostgreSQL</option>
    <option value="my">MySQL</option>
  </optgroup>
  <optgroup label="Document">
    <option value="mongo">MongoDB</option>
  </optgroup>
</select>

The value attribute of each option is sent to the server; the visible text is for the user.

The <button> Element & the Button Trap

Unlike <input> buttons, <button> is a container: you can put text, images, or other inline elements inside it. However, its default type inside a form is submit. If you forget to set type="button", clicking it will fire the form’s submission – the infamous “button trap”.

<button type="submit">Save Changes</button>
<button type="reset">Clear</button>
<button type="button">Run Local Diagnostic</button>

Live‑Value and Gauge Elements

<output> – Calculated Result Display

The <output> element holds the result of a calculation, often tied to input fields via for attributes. It does not have its own value; it displays whatever content or script‑populated text is inside.

<progress> – Task Completion Bar

Shows how much of a task is complete. Use value (current) and max (total). If value is omitted, the bar is indeterminate (animated in most browsers).

<meter> – Scalar Gauge

Represents a measurement within a known range (e.g., disk usage, CPU temperature). Use min, max, low, high, and optimum to define thresholds. The browser may color‑code the gauge based on these boundaries.

System Resource & Ingestion Configuration – Complete Blueprint

The following form integrates a textarea, a dropdown with optgroups, explicit buttons (avoiding the button trap), a meter gauge, and a progress indicator into one cohesive dashboard.

<form action="/api/metrics" method="post" id="dashboard-matrix">
  <fieldset>
    <legend>System Resource & Ingestion Configurations</legend>

    <label for="sys-desc">Detailed Cluster Incident Description</label>
    <textarea id="sys-desc" name="incident_description"
              rows="5" cols="40" wrap="soft"></textarea>

    <label for="engine-select">Primary Database Allocation Engine</label>
    <select id="engine-select" name="database_engine">
      <optgroup label="Relational Architectures">
        <option value="pg-db">PostgreSQL Core</option>
        <option value="my-db">MySQL Cluster Engine</option>
      </optgroup>
    </select>

    <label for="disk-gauge">Server Drive Capacity Status</label>
    <meter id="disk-gauge" value="88" min="0" max="100"
           low="20" high="80" optimum="10">88%</meter>

    <progress value="45" max="100">45%</progress> <!-- job completion -->

    <button type="submit">Publish Record Logs</button>
    <button type="button">Trigger Local UI Diagnostic</button>
  </fieldset>
</form>

This blueprint demonstrates how each control contributes: the textarea for narrative logs, the dropdown for database selection, the meter for a static threshold gauge, progress for an active job, and properly typed buttons to avoid accidental submissions.