目次に戻る

output要素:HTML Living Standard各要素別メモ

概要

カテゴリー

W3C : HTML5.3Reassociateable elementにも属していた。

W3C : HTML5.3Autocapitalize-inheriting element自体が存在してなかった。

配置できる場所
内容モデル
属性
  • グローバル属性
  • name→当該要素名前文字列
  • for→同一HTML文書内にある要素id属性値を半角スペース区切りで複数指定可能。計算に使われる値を示す又は入力する要素と関連付ける。
  • form→同一HTML文書内にあるform要素id属性値。当該フォームに関連付ける。
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • デフォルトroleは、statusデフォルトroleは、role属性値に指定すべきでない。
  • デフォルトrole以外では、すべてのroleが指定可能。
視覚系ブラウザデフォルトとして期待されるCSS

  output {unicode-bidi: isolate;}
  
意味・用法

アプリケーションによって実行された計算の結果、又はユーザーアクションの結果を表す。

この要素は、送信値を持たない。

私見・補足

スクリプトやウェブアプリケーションによる出力結果を表示するためのプレースホルダーとしての用法が主。

samp要素とは異なるので注意。

フォームoninputイベント等に、フォーム内のinput要素等の入力値を元に計算した結果をoutput要素内容として表示させるスクリプトを設定すれば、サーバーにフォーム送信する必要のないインタラクティブな計算フォームを構成できる。

表示確認

ソース

  <form oninput="result.value = Number(num1.value) + Number(num2.value);">
    <div><label>数1:<input type="number" name="num1" placeholder="数字" /></label></div>
    <div><label>数2:<input type="number" name="num2" placeholder="数字" /></label></div>
    <div><label>足し算結果:<output name="result">ここがoutput</output></label></div>
  </form>
  
表示結果