<output>: OUTPUT 要素
最終更新：2026-10-13
<output>OUTPUT 要素
計算やユーザー操作の結果を表します。フォームのライブ出力を JavaScript で表示する際によく使われ、参照する入力は for 属性で示します。
| カテゴリ | フォーム |
|---|---|
| コンテンツモデル | フローコンテンツ |
| 許可される親要素 | フローコンテンツを受け入れる要素 |
| 閉じタグ | 必要 </output> タグ |
| ステータス | 標準 |
📝 構文
<output name="result">0</output>⚙️ 属性
この要素はグローバル属性に加え、以下の属性をサポートします：
| 属性 | 値 | 説明 |
|---|---|---|
for | Space-separated ids of elements that contributed to the result. | |
form | The id of the owning form (may be outside it). | |
name | Field name used when submitting the form. |
▶ サンプル
下のコードを編集して、playground でリアルタイム結果を確認：
🌐 ブラウザサポート
| ブラウザ |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <output> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザでサポート | |||||
ヒント： output は編集できませんが、フォームのリセットで初期化されます。結果の表示にのみ使います。
❓ よくある質問
Qoutput タグは何に使うものですか？
A
<output> は「計算やユーザー操作の結果」を表示します。典型場面はスライダーに連動する数値や、フォームのリアルタイム合計です：<output for='a b'>30</output> のように、for 属性に関係するコントロールの id を列挙します。aria-live の意味を内蔵し、値の変化がスクリーンリーダーに通知されます。Qoutput と span で計算結果を表示する違いは何ですか？
A
<output> は「結果」という意味を持ち、デフォルトで aria-live='polite'（値の変化を自動通知）です。span にはそのどちらもありません。計算結果や連動する値は output、静的なテキストは span にすれば、意味もアクセシビリティも正確になります。Qoutput の for 属性は必須ですか？
A必須ではありません。1つのコントロールとの連動（スライダーの横の数値など）なら for は省略できます。結果が複数のコントロールで決まる場合（a+b など）は、
for='a b' と id をスペース区切りで書くと関連が明確になります。🏷️ 関連タグ
💡 関連ケース
今後さらにケーススタディを追加予定です。
📚 関連チュートリアル
