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

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

HTMLの<output>タグは、計算やユーザー操作の結果を出力・表示するために使用される要素です。HTML5で新たに導入されたタグであり、フォーム内でのリアルタイムな計算結果の表示などに活用されます。

<output>タグの主な属性

<output>タグでは、以下の3つの属性を使用できます。

  • for … 計算結果と、その計算に使用された要素（複数の場合はスペース区切り）との関連性を示します。
  • form … このoutput要素が属するフォームを指定します。
  • name … output要素に名前を付けます。JavaScriptから値を参照する際に利用されます。

<output>タグの実装例

それでは、<output>タグを使った具体的なコード例を見てみましょう。スライダーと2つの数値入力欄の値を合計し、その結果をリアルタイムに表示するサンプルです。

<!DOCTYPE html>
<html>
<body>
<h2>Result</h2>
<form oninput="n.value=parseInt(p
   .value)+parseInt(q.value)+parseInt(r.value)">0
   <input type="range" id="p" value="25">100
   +<input type="number" id="q" value="50">+<input type="number" id="r" value="50">
   =<output name="n" for="p q r"></output>
</form>
</body>
</html>

このコードでは、フォームのoninputイベントを使って、スライダー（p）と2つの数値入力欄（q、r）の値を加算し、その結果を<output>要素（n）に即座に反映させています。

実行結果

上記のコードを実行すると、次のように初期状態の計算結果が表示されます。

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

ここでスライダーの値を変更してみましょう。すると、以下のように計算結果がリアルタイムに更新されて表示されます。

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

このように、<output>タグを活用することで、JavaScriptと組み合わせた動的な計算結果の表示が簡単に実現できます。電卓機能や見積もりシミュレーションなど、インタラクティブなWebフォームを作成する際にぜひ活用してみてください。

  1. HTMLのembedタグとは？使い方と主な属性をわかりやすく解説

    <embed>タグとは<embed>タグは、HTML文書の中に外部アプリケーションやプラグインコンテンツ（PDFファイル、動画、音声など）を埋め込むための要素です。開始タグのみで構成され、基本的に終了タグは不要です。<embed>タグで使用できる主な属性は以下の通りです。height：埋め込むコンテンツの高さをピクセル単位で指定します。src：埋め込む外部ファイルのアドレス（URL）を指定します。type：埋め込みコンテンツのメディアタイプ（MIMEタイプ）を指定します。例：「application/pdf」など。width：埋め込むコンテンツの幅をピクセル

  2. HTMLの<dfn>タグとは？定義用語のマークアップ方法を実例付きで解説

    HTMLの<dfn>タグは、専門用語や略語など「定義の対象となる語」が文書内で最初に登場する箇所を示すための要素です。多くのブラウザでは、<dfn>タグで囲まれた部分は斜体（イタリック体）で表示されます。 それでは、<dfn>タグの具体的な実装例を見ていきましょう。 コード例 <!DOCTYPE html> <html> <body> <h2>MCAの科目一覧</h2> <p><dfn title="Master of Computer Applications"