HTML Output Element

HTML Output Element where in this learn about
Output Element Using For and Form Attributes and also Output Element with Attributes
Attribute | Description |
Global | Attributes that are available to any HTML5 element. For comprehensive documentation of these attributes see: MDN Global Attributes |
name | A string representing the name of an output. As a form element, the output can be referenced by its name using the document. forms property. This attribute is also used for collecting values on a form submit. |
for | A space separated list of form element ids (e.g. <inputs id="inp1"> for value is "inp1") that the output is meant to display calculations for. |
form | A string representing the <form> that is associated to the output. If the output is actually outside the <form>, this attribute will ensure that the output still belongs to the <form> and subject to collections and submits of said <form>. |
Output Element Using For and Form Attributes
The following demo features an <output> element's use of the [for] and [form] attributes. Keep in mind, <output> needs JavaScript in order to function. Inline JavaScript is commonly used in forms as this example demonstrates. Although the <input> elements are type="number", their values are not numbers, they are text. So if you require the values to be calculated, you must convert each value into a number using methods such as parseInt(), parseFloat(), Number(), etc.
<!DOCTYPE html>
<html>
<head>
<title>Atutorialhub demo title</title>
</head>
<body>
<form id="form1" name="form1" oninput="out1.value = parseInt(in1.value, 10) + parseInt(in2.value,
10)">
<fieldset>
<legend>Output Example</legend>
<input type="number" id="in1" name="in1" value="0">
<br />
+
<input type="number" id="in2" name="in2" value="0">
</fieldset>
</form>
<output name="out1" for="in1 in2" form="form1">0</output>
</body>
</html>
Output Element with Attributes
<output name="out1" form="form1" for="inp1 inp2"></output>
ATutorialHub Related Guide
HTML Tutorials Comments (9)
User Comments

panduranga gupta
2021-07-05 07:03:13good website for learning and help me a lot

raju
2021-09-25 14:58:47The awsome website i am looking like for a long time, good work atutorialhub team keep doing

Shivani
2021-09-01 15:03:56Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

Harshitha
2021-09-10 15:05:45It is very helpful to students and easy to learn the concepts

Sowmya
2021-09-14 15:06:41Great job Tutorials are easy to understand Please make use of it

Zain Khan
2021-09-18 15:07:23Great content and customized courses.

Rudrakshi Bhatt
2021-09-09 15:08:10Well structured coursed and explained really well!

Pavana Somashekar
2021-09-11 15:09:08Good platform for beginners and learn a lot on this website

Sax
2021-09-25 19:35:50Nice website
Leave a Comment