output要素の使い方

HTMLのoutput要素は、計算やユーザー操作の結果をページに表示するための要素です。入力欄そのものではなく、「計算した結果がここに出ます」と意味付けできます。

先に結論

最小の例

<label for="price">価格</label>
<input id="price" type="number" value="10">

<label for="quantity">数量</label>
<input id="quantity" type="number" value="2">

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

この例では、priceとquantityが計算に使われ、totalが結果を表示します。for属性は計算を自動で実行する属性ではありません。計算と表示の更新はJavaScriptなどで行います。

入力を変えると、JavaScriptがoutput.valueを更新します。リセットすると、最初に書かれていた結果へ戻ります。「送信項目を確認」を押すと、name="total"を付けたoutputでも、FormDataには含まれないことを確認できます。

for属性で関係を示す

for属性には、計算に使った要素のidを指定します。複数ある場合は空白で区切ります。

<input id="width" type="number" value="5">
<input id="height" type="number" value="4">
<output id="area" for="width height">20</output>

これは、結果と入力の関係をHTMLに記録するものです。forの値に書いた要素を監視したり、計算したりする機能はありません。入力が変わったときに結果も変える処理は、別途実装します。

表示する値と送信する値は別

outputはフォームの中に置けますが、入力値を受け取るフォームコントロールと同じではありません。nameを指定しても、outputの値が通常のフォーム送信データに自動で入るわけではありません。

<form>
  <input id="amount" name="amount" type="number" value="1000">
  <output id="tax" name="tax" for="amount">100</output>
  <input type="hidden" name="tax-to-send" value="100">
  <button type="submit">送信</button>
</form>

実際に送信する値は、送信対象のinputなどで管理します。計算結果を送る場合は、表示用のoutputと送信用の値を同期し、サーバー側でも値を検証してください。

読みやすく、伝わりやすくする

• 結果が何を表すか分かるlabelや説明文を付ける。
• 変化する数値だけを置かず、単位や計算内容を近くに示す。
• 値の更新を支援技術へどう伝えるかは、ブラウザーと支援技術で確認する。
• 結果を送信する必要がある場合は、outputだけに送信データを任せない。

よくある間違い

• for属性を書いただけで、自動計算や自動更新が起きると思う。
• outputの表示値が、そのままフォーム送信されると思う。
• 結果の意味を説明せず、画面に数字だけを表示する。
• JavaScriptが失敗した場合の初期表示や説明を用意しない。

Atlasで確認する

outputのカテゴリ、forとform owner、value・defaultValue・reset、フォーム送信との境界、DOM API、アクセシビリティまで確認したい場合は、Yugien Atlasのoutput要素を参照してください。入力欄との関連付けはAtlasのinput要素、ラベルの仕組みはAtlasのlabel要素でも確認できます。