Home > Web Front-end > HTML Tutorial > How to use tag in HTML?

How to use tag in HTML?

王林
Release: 2023-08-22 14:05:07
forward
1477 people have browsed it

How to use <code> tag in HTML?

In the next article, we will learn how to use the output tag in HTML.

One of the HTML5 elements is the tag. It provides a display location for the results of script calculations or user interaction with form elements (

tags). For complex calculations, such as exchange rate conversion results, the tag is specially designed.

grammar

The following is the syntax of the tag

<output>….content…</output>
Copy after login

Use the tag for calculation

is translated as:

Use the tag for calculation

You must have some knowledge of JavaScript to use . In order for the form to know that the user is entering an integer, it needs to define type="number". If the user provides any additional information, the form will return NaN, indicating not a number.

Let's look at some examples to understand how to use the tag in HTML...

The Chinese translation of

Example 1

is:

Example 1

In the example below, we are creating a multiplication task to display the output.

<!DOCTYPE html>
<html>
<body>
   <p>Multiplication:</p>
   <form oninput="a3.value = a1.valueAsNumber * a2.valueAsNumber">
      a1:<input type="number" id="a1"> *
      a2:<input type="number" id="a2"> =
      <output name="a3" for="a1 a2"> </output>
   </form>
</body>
</html>
Copy after login

When the script executes, it will generate an output showing the input fields a1, a2 to enter integer values ​​to perform the calculation we specified in the script.

When the user tries to enter the value of a1 and waits for the output, but does not enter the value of a2, a result with the output of "Nan" will be generated on the web page.

Example 2

In the following example, we use the scope of the element and the element.

<!DOCTYPE html>
<html>
<body>
   <form oninput="a1.value = a2.value">
      <input type="range" id="a2" value="10">
      <br /><br />
      The value is <output name="a1" for="a2">10</output>
   </form>
</body>
</html>
Copy after login

When the script is executed, it will generate an output showing a slider representing the range, with a default setting value of "10".

When the user swipes or tries to change the range of , the new value of the range will be displayed on our page.

Example 3

In the example below, we create an addition task using type="range" and "number".

<!DOCTYPE html>
<html>
<head>
   <title>HTML Output Tag</title>
</head>
<body>
   <form oninput = "result.value = parseInt(a1.value)+parseInt(a2.value)">
      <input type = "range" name = "a1" value = "0" /> +
      <input type = "number" name = "a2" value = "5" /> <br />
      The output is: <output name = "result"></output>
   </form>
</body>
</html>
Copy after login

After running the above script, the output window will pop up showing the input field for the range slider and the input field for the user to enter a number. By default, its value is set to 5.

When the user tries to slide and enter an integer into the input box, the addition task will be triggered and a new value will be displayed on the web page.

The above is the detailed content of How to use tag in HTML?. For more information, please follow other related articles on the PHP Chinese website!

source:tutorialspoint.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template