如何在 HTML5 中包含计算结果?

htmlfront end technologyweb development更新于 2024/7/28 6:04:17

要在 HTML 中定义或包含计算结果，我们使用 <output> 标签。output 标签用于提供计算结果，该计算由 JavaScript(客户端脚本语言)执行。

语法

以下是 <output> 标签的用法 −

<output> --- </output>

属性

output 标签中使用的属性如下所示 −

属性	描述
for	其他元素的ID列表，即表示为计算贡献了输入值的元素。
form	可以将输出元素放置在文档中的任何位置。
name	元素的名称。

输出标签也支持全局和事件属性。

示例

在下面的示例中，我们创建一个计算器，并将计算结果返回到 HTML 页面 −

<!DOCTYPE html>
<html>
<head>
   <title>HTML Output Tag</title>
</head>
<body>
   <form oninput="sumresult.value = parseInt(z1.value)+parseInt(z2.value)+parseInt(z3.value)">
      <input type="range" name="z1" value="0" /> + <input type="number" name="z2" value="30" /> + <input type="number" name="z3" value="60" />
      <br> The output is: <output name="sumresult"></output>
   </form>
</body>
</html>

CSS 设置到输出标签

让我们看看如何将样式标签应用于输出元素。

语法

以下是大多数浏览器为输出元素显示的默认值。

output {
   display: inline;
}

示例

让我们再看一个例子，通过应用 CSS 来定义 HTML5 中的计算结果 −

<!DOCTYPE html>
<html>
<head>
   <title> Result of a calculation </title>
   <style>
      body {
         text-align: center;
      }
   
      h1 {
         color: blue;
      }
   </style>
</head>
<body>
   <h1>Tutorials Point</h1>
   <h2> Include the result of a calculation in HTML? </h2>
   <form oninput="sumresult.value = parseInt(first.value) + parseInt(second.value) + parseInt(third.value)">
      <input type="number" name="first" value="30" /> + <input type="range" name="second" value="0" /> + <input type="number" name="third" value="50" />
      <br> Result: <output name="sumresult"></output>
   </form>
</body>
</html>