数据结构
网络
关系数据库管理系统
操作系统
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日
588 次浏览
广告