Contents
HTML output: Main Tips
- HTML output element displays the result of a calculation, which is typically performed using JavaScript.
- It is used along with the <form> and <input> elements.
- HTML
output
tag was newly introduced in HTML5 and supports all global attributes.
Usage of HTML Output Element
The content between output
HTML tags represents a container where the result of a calculation may be displayed:
<form oninput="result.value=parseInt(x.value)+parseInt(y.value)">
0<input type="range" id="x" value="75">100
+<input type="number" id="y" value="72">
=<output name="result" for="x y"></output>
</form>

- Easy to use with a learn-by-doing approach
- Offers quality content
- Gamified in-browser coding experience
- The price matches the quality
- Suitable for learners ranging from beginner to advanced
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable

- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion

- A wide range of learning programs
- University-level courses
- Easy to navigate
- Verified certificates
- Free learning track available
- University-level courses
- Suitable for enterprises
- Verified certificates of completion
Tag Attributes for <output>
The most crucial attributes used with HTML output
tags are for
and name
. The first one specifies the elements used as inputs for the calculation, and the second one names the outputted element:
<form oninput="result.value=parseInt(x.value)+parseInt(y.value)">
0<input type="range" id="x" value="75">100
+<input type="number" id="y" value="25">
=<output name="result" for="x y"></output>
</form>
If your HTML output
element is associated with a form control, you can also use the form
attribute. It defines the <form> element to which your <output>
element belongs:
<form action="process.php" id="sum" oninput="result.value=parseInt(x.value)+parseInt(y.value)">
0<input type="range" name="x" id="x" value="50">100
+<input type="number" name="y" id="y" value="50">
=<output name="result" for="x y"></output>
<br>
<input type="submit">
</form>
<output form="sum" name="result" for="x y"></output>
Browser support

Chrome

Edge

Firefox

IE

Opera

Safari
Mobile browser support

Chrome

Firefox

Opera
