<output>タグの解説
<output>は、アプリケーションやユーザーの操作によって出力された結果を表します。フォームの入力欄に基づく計算結果や、JavaScriptを実行して得られた内容をブラウザに表示する場合に使用します。
似たような要素に<samp>があります。こちらは、あらかじめ実行結果が分かっている内容の引用を表す場合に用います。
<output>タグの特徴
- レイアウトの初期値はインラインです。文章の改行には影響を与えません。
- 視覚的な効果は特に与えられません。必要に応じてスタイルシートを調整して下さい。
- 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。
<output>要素に指定できる属性
for- 入力コントローラに付与した
id属性の値を指定することで関連付けを行います。 form<form>に付与したid属性値を指定することで関連付けを行います。name- この要素の名前を指定します。JavaScriptからこの要素にアクセスする際に使用します。
<output>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。<form>の子要素に配置される場合は必要ありませんが、その範囲から外れる場合は関連する<form>のid属性に指定された値をfor属性で参照して関連付けます。
<form>
<output for="value">出力結果</output>
</form>
<form id="name">
// 内容
</form>
<output for="value" form="name">出力結果</output>
単純な計算式を扱ったサンプルを作成してみましょう。二つの入力欄に指定された値を計算して、その結果を反映しています。実際に数値を変えて結果を確認してみましょう。
<form oninput="add.value = Number(one.value) + Number(two.value);">
<input type="number" name="one" value="0" size="10"> ＋
<input type="number" name="two" value="0" size="10"> ＝
<output name="add" for="one two">0</output>
</form>