<output> - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:output

  1. HOME
  2. HTML CSS
  3. HTML Tag
  4. output

Introduction

The output element represents the result of a calculation.

The output Element summary

Item Value
Element: output
Local Attributes: name, form, for
Contents:Phrasing content
Tag Style: Start and end tag
New in HTML5?Yes
Changes in HTML5: N/A

Style Convention: 

output {
   display: inline;
}

Tag-Specific Attributes

The following table shows the attributes that are specific to the <output> tag.

Attribute Value Description
for element-id Indicating the relationship between the result and the elements contributed values.
form form-idsets the form element that this element is associated with.
name name sets vname of the element.

The following code shows how to use the output Element

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
   <head> 
      <title>Example</title> 
   </head> 
   <body> 
      <form onsubmit="return false" oninput="res.value = quant.valueAsNumber * price.valueAsNumber"> 
         <fieldset> 
            <legend>Price Calculator</legend> 
            <input type="number" placeholder="Quantity" id="quant" name="quant">
             x <!--from w w  w .ja v a  2  s.co  m-->
            <input type="number" placeholder="Price" id="price" name="price">
             = 
            <output for="quant name" name="res"></output> 
         </fieldset> 
      </form>  
   </body>
</html>

Related Tutorials