<output>要素

Technical Summary

Definition / Categories

項目	定義
意味	アプリケーションによる計算、またはユーザー操作の結果
Categories	Flow content、Phrasing content、Listed、Labelable、Resettable、Form-associated、autocapitalize-and-autocorrect inheriting、Palpable content
Context	Phrasing contentが期待される場所
Content model	Phrasing content
Tag omission	開始タグ・終了タグとも省略不可
Content attributes	for、form、name、グローバル属性
DOM interface	HTMLOutputElement

for属性と計算元

for属性は、計算結果に使われた要素、または計算へ影響した要素との明示的な関係を示します。値は同じtree内の要素のidを、重複しない空白区切りのtokenとして列挙します。

<label for="price">価格</label>
<input id="price" name="price" type="number" value="10">
<label for="quantity">数量</label>
<input id="quantity" name="quantity" type="number" value="2">

<label for="total">合計</label>
<output id="total" for="price quantity">20</output>

forは関係を記録する属性であり、入力の監視、計算、表示更新を実行する属性ではありません。結果の更新はアプリケーション側で実装します。

Form ownerとname

outputは、祖先form、またはform属性によってform ownerと関連付けられます。name属性は、フォームAPIのform.elementsから名前で参照するための名前です。

<form id="calculation-form">
  <input id="amount" name="amount" type="number" value="1000">
</form>

<output id="tax" name="tax" form="calculation-form" for="amount">100</output>

form ownerとの関連付けは、イベント処理やフォームAPI上の関係を作ります。しかし、フォームに関連付けたことだけで、結果の計算や送信が発生するわけではありません。

Value・defaultValue・reset

初期のdefault valueは、基本的には要素の子孫テキストです。valueのsetterは現在表示される値を変更し、defaultValueは既定値を読み書きします。

<form id="output-form">
  <output id="result" for="a b">3</output>
  <button type="reset">リセット</button>
</form>

const result = document.querySelector('#result');
result.value = '42';
result.defaultValue; // 初期の既定値を読む
// form.reset() またはreset buttonで既定値へ戻る

動的な結果を更新するときは、結果の表示だけでなく、リセット時に何へ戻るべきかも設計します。value、default value、子孫テキストを同じ意味だと扱わないことが重要です。

Form submissionとの境界

outputはlisted・form-associatedですが、submittableなフォームコントロールではありません。form ownerを持っていても、outputの値自体はフォーム送信時のentry listに含まれません。

<form id="invoice">
  <input name="amount" value="1000">
  <output name="tax" for="amount">100</output>
</form>

const formData = new FormData(document.querySelector('#invoice'));
formData.has('amount'); // true
formData.has('tax');    // false

サーバーへ結果を送る要件がある場合は、送信対象のinputなどを別に用意し、表示用のoutputと同期します。表示された値を信頼して認可や金額計算を行わず、サーバー側で再計算・検証してください。

DOM Interface

HTMLOutputElementは、計算元のhtmlFor、form owner、name、type、defaultValue、value、labelsなどを公開します。

API	意味	境界
htmlFor	for属性のtoken list	計算元との関係を読む・変更する。計算自体は行わない
form	解決されたform owner、またはnull	formとの関連付け。送信対象であることを意味しない
value	現在の値。setterで子孫テキストを更新する	表示更新であり、FormDataへの追加ではない
defaultValue	resetで使われる既定値	現在値との違いを分けて確認する
labels	関連するlabelのNodeList	結果のaccessible nameを確認する入口
willValidate / validity	constraint validation APIの公開面	実装挙動とvalidation対象の扱いは別途観測する

Fact / Evidence（主張 / 根拠）

仕様上の意味、カテゴリ、関係付け、状態、フォーム送信との境界を、主張・条件・根拠位置に分けて記録します。ブラウザーやアクセシビリティツリーでの結果は、下のImplementation Evidenceに分離します。

Evidence

1. HTML Standard: The output element — meaning、categories、attributes、form association、submission boundary、reset、DOM interface
2. HTML Accessibility API Mappings: output — outputのroleとaccessible name computation
3. Web Platform Tests: HTML forms — output、form association、reset、DOM APIに関係するテストを特定する入口

Implementation Evidence

仕様上の主張とは別に、ブラウザー実装、WPT、アクセシビリティツリーの観測を記録します。forms-output-v1を2026-09-20にChrome 153 / Windows NT 10.0で実行し、fixture範囲のIMPLを確認済み、Accessibility Treeを部分観測として登録しました。WPT、Firefox・Safari、支援技術、platform APIは未実施です。

専用fixture: forms-output-v1は、for、form owner、form.elements、label、value、defaultValue、reset、動的更新、FormDataへの非参加を再現します。fixture本体はdocs/atlas/forms-output-v1-fixture.htmlとforms-output-v1-check.js、実行記録はdocs/atlas/forms-output-v1-results-2026-09-20.mdに登録しています。

aria-liveやrole="status"を追加したときの通知は、要素の仕様上の意味、ブラウザーのAX tree、支援技術の読み上げを分けて評価します。単一環境の観測を、すべてのブラウザーや支援技術に共通する結果として登録しません。

Coverage / Open Issues

• 確認済み意味、Categories、Context、Content model、tag omission、content attributes
• 確認済みforによる計算元との関係、form owner、nameとform.elementsの境界
• 確認済みvalue・defaultValue・reset、およびoutput値がフォーム送信されない仕様上の境界
• 部分確認Chrome 153 / Windows NT 10.0でforms-output-v1の8項目、label付きoutputのAccessibility Tree公開を確認
• 未完了Firefox・Safariを含むvalue更新、reset、form owner、FormData、constraint validation APIの実装比較
• 未完了WPTの個別テスト実行結果と、ブラウザー間のsubmission・DOM API差異
• 未完了HTML-AAMの全mapping、aria属性・titleによるaccessible name、動的更新のAX tree、支援技術、platform API、ARIA通知の観測

このページは初期Coverageです。仕様上の範囲を整理したものであり、すべてのブラウザーで同じDOM、フォームAPI、アクセシビリティAPI、通知結果になることを主張しません。

Related surface

初心者向けの計算結果表示、for属性、送信との違いはYugienのoutput要素ページを参照してください。入力との関係はinput要素、labelable要素とaccessible nameはlabel要素、フォーム所有関係とentry listはform要素でも確認できます。