How To Use Html5 Output Tag With Example

The Html5 output tag can be used to show the text on the web page. You can set the text from the javascript code. In general, it will output the other Html tag’s value on the web page. This article will show you examples of how to use it.

Table of Contents

1. How To Use Html5 Output Tag Examples.

The example demo video URL is https://youtu.be/0XyTIDamEuU.
There are 3 examples in this article.
In the first example, when you slide the number range slider, it will show the current slider number in the output tag.

In the second example, when you input different numbers in the Html5 number input text box, it will calculate the summary of the 2 numbers and show it in the output tag.
In the third example, when you input an email address in the input text box, it will show the input text in the output tag below it.

2. The Html5 Output Tag Example Source Code.

The Html example file name is how-to-use-html5-output-tag-example.html.

There are 3 Html forms and 3 javascript functions in the web page source code.
The javascript function will be invoked when the form’s oninput event is triggered.
When the web page is loaded, it will trigger the body tag’s onload event, and it will call the javascript function on_form_input_1() to initialize the 2 number’s summary value and show it in the output tag.

Below is the full source code of the example Html web page.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>How To Use Html5 Output Tag Examples</title>
</head>
<script language="javascript">

function on_form_input(src){
    
    range1_object = document.getElementById('range1');
    
    output_object = src.output1;
    
    output_object.value = range1_object.value;
}


function on_form_input_1(){
    
    number_x_object = document.getElementById('number_x');
    
    number_y_object = document.getElementById('number_y');
    
    number_x = parseInt(number_x_object.value);
    
    number_y = parseInt(number_y_object.value);
    
    number_z_object = document.getElementById('number_z');
    
    number_z_object.value = number_x + number_y;
    
}

function on_form_input_2(){
    
    input_email_object = document.getElementById('input_email');
    
    output_email_object = document.getElementById('output_email');
    
    output_email_object.value = input_email_object.value;
}

</script>
<body onload="javascript:on_form_input_1()">

<h3>Html5 Output Tag Example1.</h3>
<form id="form1" oninput="javascript: on_form_input(this)">
Please select a number: <br/>
<input name="range1" id="range1" type="range" min=10 max=100 step=5/><br/>
Your selected number is: <output id="output1">50</output>
</form>

<h3>Html5 Output Tag Example2.</h3>
<form id="form2" oninput="javascript:on_form_input_1()">
  <input type="number" id="number_x" value="50">
  +<input type="number" id="number_y" value="25">
  =<output id="number_z"></output>
</form> 

<h3>Html5 Output Tag Example3.</h3>
<form id="form3" oninput="javascript:on_form_input_2()">
Please input email: <input type="text" id="input_email" placeholder="Please input an email address." style="width:15%"><br/>
Your email: <output id="output_email"></output>
</form> 

</body>
</html>

1. How To Use Html5 Output Tag Examples.

2. The Html5 Output Tag Example Source Code.

Leave a Comment Cancel Reply