HTML <output> Tag

We’re talking about HTML Tag output with examples. This will fulfill the requirements for learning.

The <output> tag is a self-closing tag in HTML and is used to represent the result of a calculation or user action. It is used in conjunction with the <form> and the <input> tags. The <output> tag displays the result of the calculation or user input on the web page.

Calculate the result and display it in an <output> element:

Example: 

<!DOCTYPE html> <html> <body> <form oninput="mrx.value=parseInt(x.value)+parseInt(y.value)"> <input type="range" id="x" value="55"> +<input type="number" id="y" value="15"> =<output name="mrx" for="x y"></output> </form> </body> </html>

The <output> tag example is as follows:

Example: 

<!DOCTYPE html> <html> <body> <form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> <input type="number" id="a" value="10"> + <input type="number" id="b" value="20"> = <output name="result" for="a b"></output> </form> </body> </html>

Here is another example of the <output> tag with the javascript:

Example: 

<!DOCTYPE html> <html> <body> <script> function calculateDiscount() { let price = document.getElementById("price").value; let discount = document.getElementById("discount").value; let result = document.getElementById("result"); result.value = (price = (price * (discount / 100))).toFixed(2); } </script> <form> <label for="price">Enter the price:</label> <input type="number" id="price" name="price" value="100" oninput="calculateDiscount()"> <br> <label for="discount">Enter the discount percentage:</label> <input type="number" id="discount" name="discount" value="10" oninput="calculateDiscount()"> <br> <label for="result">Discounted price:</label> <output name="result" id="result" for="price discount"></output> </form> </body> </html>
Table Of Content-

Tag Output Usage

The Tag output <output> is intended to indicate the outcome of a calculation (such as one done by a script).

Here are some common use cases for the <output> tag:

  • The <output> tag can be used to display error messages or other feedback to the user after they submit a form.
  • The <output> tag can be used to display the result of a calculation performed by a JavaScript function.
  • The <output> tag can be used to display the output of an interactive application, such as a game or simulation.

Attributes

Global

In HTML, the <output> tag accepts Global Attributes as well.

Event

In HTML, the <output> tag accepts Event Attributes as well.

Attributes List

AttributeValueOverview
forelement_idDetermine the relationship between the calculation’s result and the elements involved in the calculation.
formform_idProvides information about the output element’s form.
namenameAn output element’s name is determined.

Browser Compatibility

Numbers in the table indicate the earliest browser version fully compatible with the element.

Element
<output>10.013.04.05.111.0

Predefined CSS

The majority of browsers will show the <output> element with the following values by default in Tag Output:

output {
display: inline;
}

HTML <output> Tag Advantages

Some of the advantages of using the “output” tag in HTML include:

  • The “output” tag provides valuable information to screen readers and other assistive technologies, making your website more accessible to people with disabilities.
  • Using the “output” tag can make your code more efficient, reducing load times and improving performance.
  • The “output” tag helps to clarify the purpose of a form or calculation by displaying the results in a clear and organized way.
  • The “output” tag can be used to display the results of a wide range of calculations and user actions, making it a versatile tool for web developers.
  • Using the “output” tag can help ensure consistency across different web browsers and devices, making your website more user-friendly.
  • The “output” tag can be customized using CSS, allowing you to style the output to fit your website’s design.
If this article somewhere met your education desires, then do subscribe to our Newsletter below in order to be connected with the similar content on this site.
We value your feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!
icon
By subscribing, you agree with our privacy policy and our terms of service.

Leave a Reply

Your email address will not be published. Required fields are marked *