如何在 HTML 中使用 <output> 标签?

htmlweb developmentfront end technology更新于 2024/8/13 7:08:17

在下文中，我们将学习如何在 HTML 中使用 output 标签。

<output> 标签是 HTML5 元素之一。它指定一个位置来显示脚本计算的结果或用户与表单元素(<form> 标签)交互的结果。对于复杂的计算，例如汇率转换的结果，<output> 标签是理想的选择。

语法

以下是 <output> 标签的语法

<output>….content…</output>

使用 <output> 进行计算

您必须了解 JavaScript 才能使用 <output> 标签。为了让表单知道用户正在输入整数，请定义 <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。

当用户尝试滑动并在输入字段中输入整数时，将触发加法任务并在网页上显示新值。