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

概要

カテゴリー

• Flow content
• Phrasing content
• Form-associated element
  • Listed element
  • Labelable element
  • Resettable element
  • Autocapitalize-and-autocorrect-inheriting element
• Palpable content

配置できる場所

• 上記カテゴリーの要素が置ける場所。

内容モデル

• Phrasing content。計算結果のデフォルトを表す。

属性

• グローバル属性
• 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>
  

表示結果

数1：

数2：

足し算結果：

ここがoutput