数据结构
网络
关系型数据库管理系统(RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在HTML中使用<output>标签？
在下面的文章中，我们将学习如何在HTML中使用output标签。
HTML5元素之一是<output>标签。它为显示脚本计算结果或用户与表单元素（<form>标签）交互的结果提供了一个位置。<output>标签适用于复杂的计算，例如汇率转换的结果。
语法
以下是<output>标签的语法
<output>….content…</output>
使用<output>标签进行计算
要使用<output>，您必须了解JavaScript。为了让表单知道用户正在输入整数，请定义一个<input> type="number"。如果用户提供任何其他信息，<output>表单将返回NaN，即非数字。
让我们来看一些示例，了解如何在HTML中使用<output>标签……
示例1
在下面的示例中，我们创建了一个乘法任务来显示输出。
<!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>
当脚本执行时，它将生成一个输出，显示用于输入a1、a2的输入字段，以输入整数来执行我们在脚本中分配的计算。
当用户尝试输入a1的值并等待输出而没有输入a2的值时，它将在网页上生成“NaN”输出。
示例2
在下面的示例中，我们将<output>元素与<input>范围元素一起使用。
<!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>
当脚本执行时，它将生成一个输出，显示表示<input>范围的滑块，其默认设置值为“10”。
当用户滑动或尝试更改<input>的范围时，范围的新值将显示在我们的网页上。
示例3
在下面的示例中，我们创建了一个带有type="range"和"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>
运行上述脚本后，将弹出输出窗口，显示范围滑块的输入字段和用户输入数字的输入字段。默认情况下，其值为5。
当用户尝试滑动并在输入字段中输入整数时，加法任务将被触发并在网页上显示新值。
更新于：2022年12月16日
732 次浏览
广告