資料結構
網路
關係資料庫管理系統 (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 次瀏覽
廣告