2020.03.02 2023.01.10

<output>要素の使い方・サンプルコード

Sara

<output>
属性
使用例
対応ブラウザ
関連するタグ

<output>

<output>要素は、JavaScript を使って計算結果やユーザーの操作による結果を表示することができる要素です。

デモ：output要素

属性

for

for 属性の値と input 要素の id 属性の値を一致させることで、関連付けることができます。

複数の input 要素と関連付ける場合は空白スペースで区切ります。

form

関連付けたい form 要素の id を指定します。

form 属性を指定することで、form 要素の子要素に output 要素を置かなくても、同じ HTML 文書中にあるフォームに関連付けることができます。

以下のサンプルでは、form 要素と output 要素を関連づけています。

<form id="myForm" oninput="result.value=parseInt(num1.value)+parseInt(num2.value)">
  <input type="number" name="num1" id="num1"> + 
  <input type="number" name="num2" id="num2"> = 
</form>
<output form="myForm" name="result" for="num1 num2"></output>

name

要素の名前を指定します。

グローバル属性

全ての HTML に共通して使用できるグローバル属性はこちら

使用例

このサンプルでは、form 要素に oninput イベントハンドラーを用意し、2つの input 要素に入力された数値の合計を計算して output 要素に表示しています。

HTML

<form oninput="result.value=parseInt(num1.value)+parseInt(num2.value)">
  <input type="number" name="num1" id="num1"> + 
  <input type="number" name="num2" id="num2"> = 
  <output name="result" for="num1 num2"></output>
</form>

実行結果

対応ブラウザ

<output>要素の使い方・サンプルコード

<output>

属性

for

form

name

グローバル属性

使用例

対応ブラウザ

関連するタグ

<dd>要素の使い方・サンプルコード

<base>要素の使い方・サンプルコード

<title>要素の使い方・サンプルコード

<var>要素の使い方・サンプルコード

<kbd>要素の使い方・サンプルコード