数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 HTML 中使用
在下面的文章中，我们将学习如何在 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 次浏览
广告