如何在 HTML 中使用標籤？

在下面的文章中，我們將學習如何在 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。

當用戶嘗試滑動並在輸入欄位中輸入整數時，加法任務將被觸發並在網頁上顯示新值。

Yaswanth Varma

更新於： 2022年12月16日

732 次瀏覽

開啟你的職業生涯

透過完成課程獲得認證

立即開始

如何在 HTML 中使用 標籤？

語法