Code has been added to clipboard!

HTML output Tag

Reading time 1 min
Published Jun 29, 2017
Updated Oct 2, 2019

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:

Example
<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>
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid certificates of completion
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

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:

Example
<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:

Example
<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

Browser image
Chrome
10+
Browser image
Edge
All
Browser image
Firefox
4+
Browser image
IE
-
Browser image
Opera
11+
Browser image
Safari
7+

Mobile browser support

Browser image
Chrome
All
Browser image
Firefox
4+
Browser image
Opera
-
Browser image
Safari
All

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 03/03/2021
3176 People Used
Only 97 Left
Rating
5.0