最終更新日

output要素

output要素は、計算の結果を示します。テキストコンテンツとして初期値を含めることができます。

for属性では、計算に使われる値または計算に影響される値と、計算結果の値を明示的に関連付けることができます。同じドキュメント内の要素でoutput要素の計算結果と関連付けたい要素のid属性の値を、スペースで区切って複数指定できます。

output要素は、Phrasingコンテンツの記述箇所で使用できます。

output要素に対応していないブラウザのユーザーのためにも、テキストコンテンツなどで計算内容を示しておくとよいでしょう。

HTML5での変更点
・output要素は、HTML5で追加された新しい要素です。
カテゴリ タグの省略 親要素 子要素
Flowコンテンツ
Phrasingコンテンツ
フォーム関連要素
省略不可 Phrasingコンテンツを子にできる要素 Phrasingコンテンツ
属性 説明
for ID 計算に使われる要素のid属性の値を指定します。
form ID form要素のid属性の値を指定します。
name 文字列 output要素の名前を指定します。
グローバル属性 - -
イベント属性 - -
サンプルコード
<body>
  <form oninput="piece.value = total.valueAsNumber / items.valueAsNumber">
    <p>ハンバーガーの単価を計算します。</p>
    <p>合計金額:<input type="number" name="total"></p>
    <p>個数:<input type="number" name="items"></p>
    <p>単価:<output name="piece"></output></p>
  </form>
</body>
参考文献:W3C HTML5「4.10.15 The output element」外部リンク
HOME
当サイトの活動をサポートしてみませんか?気軽にクリエイターの支援ができます。