<output></output>
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | フロー・コンテンツ / フレージング・コンテンツ / フォーム関連要素（リスト化、リセット可能、自動大文字化継承、ラベル付け可能） / パルパブル・コンテンツ |
| 利用場所 | フレージング・コンテンツが置ける場所 |
| 内容 | フレージング・コンテンツ |
output要素は、計算結果などの出力欄を表します。
<output name="example"></output>
| 属性 | 値 | ||
|---|---|---|---|
| 任意属性 | |||
name="" |
出力欄の名前 | 文字列 | 出力欄を識別するための名前 |
for="" |
部品との関連付け | ID名 | 関連付ける部品に指定したID名、半角スペース区切りで複数指定可能 |
form="" |
フォームとの関連付け | ID名 | 関連付けるform要素に指定したID名 |
output要素は、計算結果またはユーザー操作の結果を表示したい場合に使用します。（スクリプトを使ってoutput要素に出力することになります）
- あくまでも出力だけを目的とした要素なので、output要素の値（計算結果）がフォーム送信されることはありません。
name属性について
name属性は、出力欄を識別するための名前を指定します。
この名前は、スクリプトから参照する際に使用する場合があります。（フォーム送信のための名前ではありません）
<output name="result"></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からの変更点
-
- HTML5：output要素が定義されました。
使用例
- 動作確認のため、送信先として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>
- 表示例
- 対応しているブラウザでは、入力欄の値を変更すると計算結果の値も変化します。
- 計算結果の値は送信されません。
<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>
- 表示例
-
計算結果：