資料結構
網路
關係型資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在HTML中使用<output>標籤？
在下面的文章中，我們將學習如何在HTML中使用output標籤。
HTML5元素之一是<output>標籤。它為顯示指令碼計算結果或使用者與表單元素（<form>標籤）互動的結果提供了一個位置。<output>標籤適用於複雜的計算，例如匯率轉換的結果。
語法
以下是<output>標籤的語法
<output>….content…</output>
使用<output>標籤進行計算
要使用<output>，您必須瞭解JavaScript。為了讓表單知道使用者正在輸入整數，請定義一個<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。
當用戶嘗試滑動並在輸入欄位中輸入整數時，加法任務將被觸發並在網頁上顯示新值。
更新於：2022年12月16日
732 次瀏覽
廣告