HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのoutputタグとは？使い方と主要属性を実例つきでわかりやすく解説

HTMLの<output>タグは、計算やユーザー操作の結果を表示するための要素です。フォーム内でJavaScriptなどを使って処理した結果を、ページの再読み込みなしにリアルタイムで表示したい場合に特に役立ちます。

outputタグの主な属性

属性値説明
for 要素ID 計算に関わった入力要素のIDをスペース区切りで指定します。「どの要素が計算に値を提供したか」を示すためのものです。
form フォームID 紐付ける<form>要素のIDを指定します。この属性を使うことで、output要素をフォームの外側などドキュメント内の任意の場所に配置できます。
name 名前 output要素自体の名前を指定します。フォーム送信時には、この名前をキーとして結果の値が送信されます。

サンプルコード

以下のコードでは、スライダー（range）と数値入力（number）の2つの値をoninputイベントで合計し、その結果を<output>タグに即座に表示しています。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Output Tag</title>
  </head>
  <body>
    <form oninput="result.value = parseInt(a1.value) + parseInt(a2.value)">
      <input type="range" name="a1" value="0" /> +
      <input type="number" name="a2" value="5" /><br />
      計算結果：<output name="result"></output>
    </form>
  </body>
</html>

コードのポイント

  • oninputイベントは、フォーム内の入力値が変わるたびに発火します。
  • parseInt()で各入力値を数値に変換し、合計をresult.valueに代入することで、output要素の表示内容が自動的に更新されます。
  • name="result"を指定しているため、JavaScriptからもフォーム送信時にも「result」という名前で参照できます。

このように<output>タグを使うことで、計算結果を意味的にマークアップでき、検索エンジンやスクリーンリーダーにとっても意図が伝わりやすいHTMLになります。

  1. HTMLで要素に値を追加するには？value属性の使い方を解説

    HTMLで要素に値を設定するには、value属性を使用します。value属性は、フォーム送信時にサーバーへ送られる初期値や、要素が持つ現在の値を指定するために使われます。 value属性が使用できる要素 value属性は、以下のHTML要素で利用できます。 <button> … ボタンのラベルとして送信される値 <input> … 入力フィールドの初期値 <li> … 順序付きリスト（<ol>）内での項目の開始番号 <option> … 選択肢としてサーバーへ送信される値 <meter> … 計測範囲内における現在の値

  2. HTMLのoutputタグとは？計算結果を表示する方法と主要な属性を解説

    HTMLの<output>タグは、計算やユーザー操作の結果を出力・表示するために使用される要素です。HTML5で新たに導入されたタグであり、フォーム内でのリアルタイムな計算結果の表示などに活用されます。 <output>タグの主な属性 <output>タグでは、以下の3つの属性を使用できます。 for … 計算結果と、その計算に使用された要素（複数の場合はスペース区切り）との関連性を示します。 form … このoutput要素が属するフォームを指定します。 name … output要素に名前を付けます。JavaScriptから値を参照する際に利用されま