数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何在HTML5中包含计算结果？
要在HTML中定义或包含计算结果，我们使用<output>标签。 output标签有助于提供计算结果，该计算由JavaScript（客户端脚本语言）执行。
语法
<output>标签的用法如下：
<output> --- </output>
属性
output标签中使用的属性如下所示：
属性 |
描述 |
|---|---|
for |
其他元素的ID列表，即它指示哪些元素已为计算贡献了输入值。 |
form |
允许将输出元素放置在文档中的任何位置。 |
name |
这是元素的名称。 |
output标签也支持全局和事件属性。
示例
在下面的示例中，我们正在创建一个计算器并将计算结果包含回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 标签
让我们看看如何将样式标签应用于 output 元素。
语法
以下是大多数浏览器为 output 元素显示的默认值。
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>
更新于：2023年10月10日
585 次浏览
广告