HTML <output> for Attribute

HTMLWeb DevelopmentFront End Technology

<p>The for attribute of the &lt;output&gt; element sets the relationship between the result of the calculation and the elements used in the calculation.</p><p>Following is the syntax:</p><pre class="result notranslate">&lt;output for=&quot;id&quot;&gt;</pre><p>Above, id is the element id, which sets a separate list of one or more elements with a space. These elements specify the relationship between the result of the calculation and the elements used in the calculation.</p><p>Let us now see an example to implement the for attribute of the &lt;output&gt; element:</p><h2>Example</h2><p><a class="demo" href="http://tpcg.io/VBXlQv" rel="nofollow" target="_blank">&nbsp;Live Demo</a></p><pre class="prettyprint notranslate">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;h2&gt;Result&lt;/h2&gt; &lt;form oninput=&quot;n.value=parseInt(p.value)+parseInt(q.value)+parseInt(r.value)&quot;&gt;0 &nbsp; &nbsp;&lt;input type=&quot;range&quot; id=&quot;p&quot; value=&quot;25&quot;&gt;100+&lt;input type=&quot;number&quot; &nbsp; &nbsp;id=&quot;q&quot; value=&quot;50&quot;&gt;+&lt;input type=&quot;number&quot; id=&quot;r&quot; value=&quot;50&quot;&gt; &nbsp; &nbsp;=&lt;output name=&quot;n&quot; for=&quot;p q r&quot;&gt;&lt;/output&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt;</pre><h2>Output</h2><p><img src="https://www.tutorialspoint.com/assets/questions/media/24400/result_1.jpg" class="fr-fic fr-dib" style="width:600px; height:195px; border:1px solid black;" width="600" height="195"></p><p>Now, increase the slider and the result would get displayed:</p><p><img src="https://www.tutorialspoint.com/assets/questions/media/24400/result_2.jpg" class="fr-fic fr-dib" style="width:600px; height:184px; border:1px solid black;" width="600" height="184"></p>
raja
Updated on 30-Jul-2019 22:30:26

Advertisements