<output>
The result of a calculation or a user action.
Syntax
<output name="result" for="a b">0</output>Attributes
| Parameter | Type | Description |
|---|---|---|
| for | id list | The `id` values of the fields the result is calculated from. |
| name | text | A name for reaching it from a script. |
Examples
The sum updates as you type:
<form oninput="total.value = Number(a.value) + Number(b.value)">
<input type="number" id="a" value="2"> +
<input type="number" id="b" value="3"> =
<output name="total" for="a b">5</output>
</form>The slider value next to it:
<form oninput="level.value = vol.value">
<input type="range" id="vol" min="0" max="100" value="30">
<output name="level" for="vol">30</output>%
</form>Notes
Screen readers announce changes inside <output>, so for results it is better than a <span>. The <output> value is not sent to the server.
See also
- <form> — A form: collects data from its fields and sends it to the server.
- <input> — An input field; its kind is set by the `type` attribute.
- <progress> — A progress bar for a task: an upload, the steps of a form.
Related recipes
In the tutorial
- Input types — The type attribute of input — text, email, password, numbers and sliders, dates, checkboxes, radio buttons, colour and file.