HTML - <output> 標籤

HTML <output> 標籤是一個靈活且未充分利用的元件，它使程式設計師能夠動態地在內容中顯示計算或指令碼的結果。它透過提供一種快速有效的方式來顯示使用者活動或計算的結果，從而改善整體使用者體驗。

由於它是一個自閉合標籤（這意味著不需要結束標籤），因此它可以用於表單、數學相關材料或文件中任何需要提供動態輸出的任何其他部分。

語法

<output>
</output>

屬性

HTML output 標籤支援 HTML 的全域性和事件屬性，以及一些下面列出的特定屬性。

屬性	值	描述
for	element_id	其他元素的 ID 列表，即它指示哪些元素已為計算貢獻了輸入值。
form	form_id	允許將輸出元素放置在文件中的任何位置。
name	name	這是元素的名稱。

HTML output 標籤示例

下面的示例將說明 output 標籤的用法。在哪裡、何時以及如何使用它來建立輸出部分，以及如何使用 CSS 樣式化該輸出。

建立輸出元素

以下是一個示例，我們提供了一個範圍滑塊和一個輸入欄位，並考慮使用者給定值的總和。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML output tag</title>
</head>
<body>
   <!--create output element-->
   <form oninput="add.value = parseInt(n1.value) + parseInt(n2.value)">
      <input type="range" min="0" max="100" name='n1' value="10">
      <input type="number" name='n2' value="20">
      <br> Output: <output name='add'></output>
   </form>
</body>
</html>

基於兩個輸入欄位的輸出

考慮另一種情況，我們將使用兩個具有預定義值的輸入欄位，並將輸出作為兩個值的組合來檢索。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML output tag</title>
</head>
<body>
   <!--create output element-->
   <form oninput="add.value = (txt1.value).concat(txt2.value)">
      <input type="text" name='txt1' value="HTML">
      <input type="text" name='txt2' value="CSS">
      <br> Output: <output name='add'></output>
   </form>
</body>
</html>

算術運算的輸出

在下面的示例中，我們將執行算術運算。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML output tag</title>
</head>

<body>
    <!--create output element-->
    <form oninput="sum.value = parseInt(n1.value) 
   + parseInt(n1.value) + parseInt(n3.value)">
        <input type="range" value="10" name='n1'> +
        <input type="number" value="5" name='n2'> +
        <input type="number" value="10" name='n3'> =
        <output name='sum'></output>
    </form>
</body>

</html>

樣式化輸出元素

讓我們來看下面的例子，我們將把 CSS 應用到 output 標籤。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML output tag</title>
   <style>
      output {
         width: 200px;
         height: 50px;
         color: blue;
         padding: 10px;
         background-color: cadetblue;
         font-size: 20px;
      }
   </style>
</head>
<body>
   <!--create output element-->
   <form oninput="sum.value = parseInt(n1.value) + parseInt(n1.value)">
      <input type="range" value="5" name='n1'> 
      + 
      <input type="number" value="2" name='n2'>
      <br>
      <br> Output: <output name='sum' for="n1 n2"></output>
   </form>
</body>
</html

支援的瀏覽器

標籤
output	是 10.0	是 13.0	是 4.0	是 5.1	是 11.0

html_tags_reference.htm

列印頁面