Grouping & Gauges

<fieldset> groups related form controls inside a border. Its <legend> child provides the group's accessible name, announced before each control inside. Adding disabled to a <fieldset> disables every descendant control in one attribute: all inputs, selects, textareas, and buttons become inert and their values are excluded from submission. This makes fieldset the cleanest tool for "loading" or "confirm before edit" states.

<input type="range"> is a slider with min, max, and step attributes. It submits a string, not a number. It has no native value label, so pair it with an <output> element. <output> is the semantic element for computed or derived values: its for attribute takes a space-separated list of input ids that feed into it, creating a programmatic association assistive technology can use. <output> can also carry a name attribute and submits its current value with the form.

<meter> and <progress> solve different problems and are not interchangeable. <meter> represents a scalar measurement within a known range: disk usage, battery level, a test score, blood pressure. It accepts low, high, and optimum attributes that tell the browser where the optimal zone is. A disk usage meter with optimum="0" (lower is better) turns yellow as it crosses high and red as it enters the critical zone, giving users a color-coded signal without any JavaScript or CSS. <progress> represents how far along a task is: an upload, a build, an installation. It does not have good/bad zones; it just fills toward completion.

Choosing the right element communicates intent in the accessibility tree. A screen reader encountering a <meter> will announce it as a meter with its current value and range. A <progress> is announced as a progress bar. Using a plain <div> with an animated width conveys nothing to AT without significant ARIA work.

To drive an <output> from a range input, give the input an id and set the output's for to that id. Update the output's text content in JavaScript (or with an oninput handler) as the slider moves. The browser does not automatically populate <output> from its for inputs; for is a semantic association, not a live binding.

For <meter>, set min, max, and value for the current reading. Add low and high to mark the boundary between good, acceptable, and concerning ranges. Set optimum to indicate which end of the range is preferable: optimum="0" (or closer to min) means lower values are better (disk usage, error rate). optimum closer to max means higher is better (fuel level, signal strength). The browser derives the colour automatically from these values.

For <progress>, set max and value. A value equal to max shows a full bar. Omitting value entirely renders an indeterminate animation in most browsers, useful while a task is running but its completion fraction is unknown.