<output></output>

ブラウザ
  • Cr
  • Sf
  • Fx
  • O
分類 フロー・コンテンツ / フレージング・コンテンツ / フォーム関連要素リスト化リセット可能再関連付け可能ラベル付け可能) / パルパブル・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容 フレージング・コンテンツ

output要素は、計算結果の出力欄を表します。


<output name="example"></output>

属性
任意属性
name="" 出力欄の名前 文字列 出力欄を識別するための名前
for="" 部品との関連付け ID名 関連付ける部品に指定したID名、半角スペース区切りで複数指定可能
form="" フォームとの関連付け ID名 関連付けるform要素に指定したID名

output要素は、計算結果を表示したい場合に使用します。(スクリプトを使ってoutput要素に出力することになります)

  • あくまで出力だけを目的とした要素なので、output要素の値(計算結果)がフォーム送信されることはありません。

name属性について

name属性は、出力欄を識別するための名前を指定します。

この名前は、スクリプトから参照する際に使用する場合があります。(フォーム送信のための名前ではありません)

<output name="example"></output>

for属性について

for属性は、計算の対象となるフォーム部品を指定します。この属性の値には、対象となるフォーム部品に指定したID名を記述します。

  • この属性は、フォーム部品と計算結果の関連性を明確に示したい場合に使用します。(この属性がない場合でも、計算結果を出力することは可能です)
<form onsubmit="return false" oninput="result.value = Number(a.value) + Number(b.value);">

<p><input type="number" name="a" id="a"> + <input type="number" name="b" id="b"> = <output name="result" for="a b"></output></p>

</form>

form属性について

form属性は、その出力欄をどのform要素に関連付けるかを指定します。この属性の値には、対応するform要素に指定したID名を記述します。

  • この属性は、出力欄をform要素の外に配置する場合に使用します。(form要素の中に配置する場合は不要です)
<form onsubmit="return false" id="example" oninput="result.value = Number(a.value) + Number(b.value);">
<p><input type="number" name="a"> + <input type="number" name="b"></p>
</form>

<p>計算結果:<output name="result" form="example"></output></p>
  • ただし、この機能に対応していないブラウザもあります。

使用例

簡単な計算結果を出力した例
  • 動作確認のため、送信先としてHTMLファイル(現在のページ)を指定しています。

<form method="get" action="output.html" oninput="result.value = Number(a.value) + Number(b.value);">

<p><input type="number" name="a" value="0"> + <input type="number" name="b" value="0"></p>

<p>計算結果:<output name="result">0</output></p>

<p><input type="submit" value="送信する"> <input type="reset" value="リセット"></p>

</form>

表示例

+

計算結果:0

  • 対応しているブラウザでは、入力欄の値を変更すると計算結果の値も変化します。
  • 計算結果の値は送信されません。
form属性を指定した例

<form onsubmit="return false" id="example" oninput="result.value = Number(a.value) + Number(b.value);">
<p><input type="number" name="a" value="0"> + <input type="number" name="b" value="0"></p>
</form>

<p>計算結果:<output name="result" form="example">0</output></p>

表示例

+

計算結果:0