フォームが応答する必要がある場合は、Output要素を使用する

レンジスライダーを備えたフォームを構築したものの、ユーザーが現在の値を確認できない状況になっていませんか。または、価格計算機を作成し、ユーザーが数量を変更するたびに合計を更新する必要がある場合はどうでしょうか。多くの開発者は<span>や<div>を使い、JavaScriptを組み込んで完成としてしまいます。

しかし、HTMLにはまさにこの目的のために設計された要素が既に存在します。それが<output>です。

この記事では、フォーム内で計算結果や派生値を表示するためにHTML output要素をいつ、なぜ使用すべきか、汎用コンテナとの違い、そして微妙なバグを避けるために知っておくべき重要な詳細について説明します。

<output>要素が実際に行うこと

<output>要素は、計算結果またはユーザーアクションの結果を表します。これは、合計、プレビュー、検証結果、またはユーザー入力に基づいて変化する派生値など、ライブフォームフィードバックを表示するために特別に設計されたフォーム関連要素です。

基本的な構文は次のとおりです:

<form>
  <input type="range" id="quantity" min="1" max="10" value="5">
  <output for="quantity">5</output>
</form>

for属性はスペース区切りのID列を受け取り、どのフォームコントロールがoutputの値に寄与するかを示します。これにより、入力とその派生結果の間にセマンティックな関係が作成されます。

なぜ単に<span>を使わないのか?

計算値はどの要素でも表示できます。しかし、<output>には特定の利点があります:

セマンティックな明確性。 この要素は、そのコンテンツが他のフォームコントロールから派生したものであることを明示的に伝えます。これにより、他の開発者がコードを理解しやすくなり、ブラウザがあなたの意図を理解するのに役立ちます。

フォームとの関連付け。 <input>や<select>と同様に、<output>要素はフォーム要素ファミリーに属します。form属性を介してフォームに関連付けることができ、<form>タグの外側に配置されている場合でも機能します。

ラベル付け可能。 <output>に<label>を関連付けることができますが、汎用要素では一貫してサポートされていません。

完全なCSS制御。 一部のフォーム要素とは異なり、<output>は完全にスタイル設定可能で、外観に関するブラウザによる制限はありません。

知っておくべき属性

for属性

for属性は、どのコントロールがoutputに寄与するかを文書化します。スペース区切りの要素IDを取ります:

<input type="number" id="price">
<input type="number" id="qty">
<output for="price qty">$0.00</output>

この関係は純粋にセマンティックなもので、自動的な動作は作成されません。計算を実行するには、依然としてJavaScriptが必要です。

name属性

name属性を使用すると、スクリプト内で要素を簡単に参照できます:

<output name="total" for="price qty">$0.00</output>

重要な詳細: nameを持っているにもかかわらず、<output>要素の値はフォームと一緒に送信されません。計算値をサーバーに送信する必要がある場合は、hidden inputにコピーしてください:

<output name="total">$50.00</output>
<input type="hidden" name="submitted_total" value="50.00">

form属性

要素が<form>タグの外側にある場合に、<output>をフォームに関連付けるために使用します:

<form id="calculator">
  <input type="number" id="amount">
</form>

<output form="calculator" for="amount">0</output>

JavaScriptとの連携

HTMLOutputElementは、表示されるコンテンツを取得および設定するためのvalueプロパティを公開します:

const slider = document.getElementById('quantity');
const output = document.querySelector('output');

slider.addEventListener('input', () => {
  output.value = slider.value;
});

output.valueを設定すると、要素のテキストコンテンツが更新されます。defaultValueプロパティは、リセットが必要な場合に備えて初期値を保存します。

アクセシビリティに関する注意事項

HTML仕様では、<output>をrole="status"にマッピングしており、これはライブリージョンの動作を意味します。しかし、スクリーンリーダーのサポートは、ブラウザと支援技術の組み合わせによって大きく異なります。

動的な変更の確実なアナウンスが必要な場合は、暗黙的なマッピングだけに頼らないでください。明示的なARIAライブリージョン属性を使用してください:

<output aria-live="polite" aria-atomic="true">Result: 42</output>

対象環境での動作を確認するために、実際のスクリーンリーダーでテストしてください。

<output>を使用すべき場合

次のような場合にHTML output要素を使用してください:

• フォームの計算(合計、小計、派生値)
• 人間が読める形式でのレンジスライダーの値
• 文字数カウントまたは検証フィードバック
• フォーム入力に基づくリアルタイムプレビュー

静的なコンテンツやユーザーインタラクションに関係のない値には使用しないでください。

まとめ

<output>要素は、計算値および派生値のためのセマンティックでフォーム関連のコンテナを提供します。値は自動的に送信されないため、そのためにはhidden inputが必要です。スクリーンリーダーが確実にアナウンスするアクセシブルなoutputには、暗黙的な動作に依存するのではなく、明示的なARIA属性を追加してください。

フォームが応答する必要がある場合、<output>が適切なツールです。ただし、何が自動的に行われ、何が行われないかを理解しておいてください。

よくある質問

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.