ITコラム

プログラミングノウハウ

2026.07.15

#HTML入門

HTML【フォーム】12～出力欄（output）

この記事の監修者

Kay Arai

プログラマカレッジ講師（元エンジニア）
未経験からプログラミングを学ぶ受講生の方を、数多くサポートしてきました。「プログラミングって難しそう・・」その気持ち、よく分かります。私自身、最初はエラーの意味も分からず心が折れそうになりました。だからこそ、つまずきやすいポイントを一つひとつ丁寧にご説明するよう心がけています。楽しみながら、一緒に「できた!」を増やしていきましょう。

HTMLを勉強し始めると、「入力した数字の計算結果を表示したい」「スライダーで選んだ値を画面に出したい」と思うことがあるのではないでしょうか。そんなときに便利なのが、output要素です。

この記事ではHTML初心者の方向けに、output要素の基本的な意味や、主な属性、出力欄の作り方を、サンプルコード付きでやさしく解説します。

フォームについては、こちらのページもご参照下さい。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

最終更新日：2026年7月15日

1. output要素
2. 出力欄の作成
3. HTMLのoutput要素について、よくある質問
4. まとめ

1. output要素

output要素は、HTMLで計算結果や入力結果などの「出力」を表示するための要素です。
HTML5から追加された要素で、フォームに入力した値をもとに、結果を見せたいときによく使われます。

たとえば、数字を入力して計算結果を表示したり、スライダーで選んだ値を表示したりすることができます。
このような結果を表示する欄が、output要素です。

次の囲み線内に数字を入力すると、ピンクの欄に計算結果が表示されます。
このピンクの欄が、output要素で作成した出力欄です。

output要素は、単に文字を表示するだけではなく、「ここは計算結果や入力結果の表示欄です」という意味を持つことが特徴です。　
では、具体的な属性を確認しましょう。

■ 使用する要素：<output> ～ </output>

output要素の属性	name属性	output要素に固有の名前を付ける
	for属性	フォーム部品の id 名を指定し、どのフォーム部品に関連する出力なのかを示す
	form属性	親の form 要素の外に output 要素を書いた場合に、どのフォームに関連付けるかを指定する
	グローバル属性	id属性、class属性、title属性、style属性など

▲目次へ戻る

2. 出力欄の作成

■ name属性を指定して、入力時に反応する出力欄を作ります

計算結果として表示される部分が、output要素で作った出力欄です。
上の表示に対するhtmlコードは、以下の通りです。

<form id="sum-form">
  <input type="number" name="a" value="0">
  ＋
  <input type="number" name="b" value="0">
  ＝
  <output name="op1" style="background:#FCC;">0</output>
</form>

<script>
  const sumForm = document.getElementById('sum-form');
  const sumA = sumForm.elements.a;
  const sumB = sumForm.elements.b;
  const sumOutput = sumForm.elements.op1;

  function updateSum() {
    const a = sumA.valueAsNumber || 0;
    const b = sumB.valueAsNumber || 0;
    sumOutput.value = a + b; 
  }

  sumForm.addEventListener('input', updateSum);
  updateSum();
</script>

このコードは、form要素の中にある2つの数値入力欄に値を入れると、その合計が output要素に表示される例です。

sumOutput.valueの「value」とは、要素の「値」のことです。output要素の場合、valueに値を代入することで、画面に表示される内容（textContent）も自動的に書き換わります。

また、valueAsNumber を使うと、入力された値を数値として扱うことができます。

以前は、form要素の開始タグにoninput を直接書き込む方法も使用されていました。現在は、HTMLとJavaScriptの処理をできるだけ分離できる、 JavaScriptの addEventListener() を使ってイベントを設定する書き方が一般的です。

▲目次へ戻る

■ name属性を指定して、ボタン押下時に反応する出力欄を作ります

先ほどの例では、数字の「入力時」に計算結果が表示されました。次に、「計算」ボタンを押した時に計算結果が表示される例をみてみましょう。

htmlコードは、以下の通りです。

<form id="multiply-form">
  <input type="number" name="a" value="0">
  ×
  <input type="number" name="b" value="0">
  ＝
  <output name="op1" style="background:#FCC;">0</output>
  <button type="button">計算</button>
</form>

<script>
  const multiplyForm = document.getElementById('multiply-form');
  const multiplyA = multiplyForm.elements.a;
  const multiplyB = multiplyForm.elements.b;
  const multiplyOutput = multiplyForm.elements.op1;
  const multiplyButton = multiplyForm.querySelector('button');

  multiplyButton.addEventListener('click', () => {
    const a = multiplyA.valueAsNumber || 0;
    const b = multiplyB.valueAsNumber || 0;
    multiplyOutput.value =a * b;
  });
</script>

この例では、ボタンがクリックされたときだけ計算を実行しています。

以前は input type=”button” と onclick を組み合わせる書き方もよく見られましたが、現在は button type=”button” を使い、JavaScript側で click イベントを設定する方法が推奨されています。

▲目次へ戻る

■ id属性とfor属性を指定して、入力時に反応する出力欄を作ります

htmlコードは、以下の通りです。

<form id="sum-form-by-id">
  <input type="number" id="a" value="0">
  ＋
  <input type="number" id="b" value="0">
  ＝
  <output for="a b" id="op1" style="background:#FCC;">0</output>
</form>

<script>
  const aInput = document.getElementById('a');
  const bInput = document.getElementById('b');
  const op1 = document.getElementById('op1');
  const sumFormById = document.getElementById('sum-form-by-id');

  function updateOutput() {
    const a = aInput.valueAsNumber || 0;
    const b = bInput.valueAsNumber || 0;
    op1.value = a + b; 
  }

  sumFormById.addEventListener('input', updateOutput);
  updateOutput();
</script>

output要素のfor属性は、出力元のフォーム部品を明確に示すためのもので、「どの入力欄に関係する出力なのか」を分かりやすくすることができます。
for属性は、半角スペースで区切って複数指定できます。

この例では、2つの入力欄それぞれに指定した id属性の値を使い、output要素の for属性で関連付けを行っています。
その上で、JavaScrip側で id を使って各要素の値を取り出し、output要素の値に代入して表示しています。

▲目次へ戻る

■ id属性とfor属性を指定して、ボタン押下時に反応する出力欄を作ります

htmlコードは、以下の通りです。

<form id="multiply-form-by-id">
  <input type="number" id="num-a" value="0">
  ×
  <input type="number" id="num-b" value="0">
  ＝
  <output for="num-a num-b" id="result-op" style="background:#FCC;">0</output>
  <button type="button" id="calc-button">計算</button>
</form>

<script>
  const numA = document.getElementById('num-a');
  const numB = document.getElementById('num-b');
  const resultOp = document.getElementById('result-op');
  const calcButton = document.getElementById('calc-button');

  calcButton.addEventListener('click', () => {
    const a = numA.valueAsNumber || 0;
    const b = numB.valueAsNumber || 0;
    resultOp.value = a * b; 
  });
</script>

この例では、ボタンを押したときに、id属性を使って各要素の値を取り出し、計算結果を output要素へ表示しています。
ここでも、output要素の for属性を半角スペースで区切って複数指定しています。

for属性は、どの入力欄に関係する出力なのかを明確にすることができ、スクリーンリーダーなどの支援技術や意味付けにも利用されます。

▲目次へ戻る

■ レンジのスライダーを動かして選んだ数値の出力欄を作ります

　
上の表示に対するhtmlコードは、以下の通りです。

<form id="range-form">
  <label for="volume">ボリューム（1～10）：</label>
  <input type="range" id="volume" name="a" min="1" max="10" value="6">
  <output name="op1" for="volume" style="background:#FCC;">6</output>
</form>

<script>
  const rangeForm = document.getElementById('range-form');
  const volume = document.getElementById('volume');
  const rangeOutput = rangeForm.elements.op1;

  function updateRange() {
    rangeOutput.value = volume.value;
  }

  volume.addEventListener('input', updateRange);
  updateRange();
</script>

これは、スライダーを動かすと、その値が output要素に表示される例です。
それぞれの部品のid属性やname属性を使って値を取り出し、スライダーの入力結果を output要素の値として代入・表示しています。

このようにoutput要素は、計算結果だけでなく、現在の入力値を表示する用途にも使うことができます。

▲目次へ戻る

■ テキスト入力に対する出力欄を作ります

ここまでは、数値入力用のフォーム部品に対する出力欄を作っていましたが、output要素は、テキストの入力欄に対する出力欄として使うこともできます。

上の表示に対するhtmlコードは、以下の通りです。

<p>
  いらっしゃいませ <output id="guest">お客</output> 様！
</p>

<form id="guest-form">
  <input
    type="text"
    id="guest-name"
    name="g_name"
    placeholder="お名前を入力して「表示」ボタンを押して下さい"
  >
  <button type="button" id="guest-button">表示</button>
</form>

<script>
  const guestNameInput = document.getElementById('guest-name');
  const guestOutput = document.getElementById('guest');
  const guestButton = document.getElementById('guest-button');

  guestButton.addEventListener('click', () => {
    const name = guestNameInput.value.trim() || 'お客';
    guestOutput.value = name;
  });
</script>

この例では、まずテキスト入力欄に名前を入力します。そして「表示」ボタンを押すと、上部の「お客」の表示がその名前に置き換わります。

手順としては、入力したテキストの前後の余白を、trim()を使い削除をしてから、output 要素の値に代入し表示しています。

ここまで見てきたように、output要素は、JavaScriptを組み合わせて使うことが一般的です。
初心者の方はまず、計算結果や入力結果を取り出して表示するまでの流れのイメージを、ざっくりとつかんでおくとよいでしょう。

▲目次へ戻る

3. HTMLのoutput要素について、よくある質問

Q1. output要素とspan要素の違いは何ですか？

【A】共に文の中の一部の範囲を表す要素ですが、span要素は特定の意味を持たないのに対し、output要素は「出力結果を表示する場所」という意味を持っています。

Q2. output要素の値はフォーム送信されますか？

【A】output要素はフォームデータとしては送信されません。送信したい値は、input要素などの他のフォーム部品で扱います。

Q3. output要素はJavaScriptを使わなくても書けますか？

【A】要素自体はHTMLだけで書くことができますが、表示内容を動的に変えるにはJavaScriptを使うのが一般的です。

Q4. output要素の中に最初の値や文字を書いておいてもいいですか？

【A】問題ありません。初期値や説明用の文字を入れておくことができます。

▲目次へ戻る

4. まとめ

HTML の output要素について、いかがでしたでしょうか。

「HTMLから始めていつかプログラマーになりたいけど、独力では限界がある！」と感じている方には、「プログラマカレッジ」もおすすめです。
プログラマカレッジは、本気でプログラマーを目指す方のための就職支援付き、受講料無料のプログラミングスクールです。今回ご紹介したHTMLを含む豊富なカリキュラムで、IT初心者からプログラマーとして就職するまで、プロが完全にサポートします。

本気でプログラマーとして就職・転職したいという方は、ぜひ一度のぞいてみて下さいね。
→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」

▲目次へ戻る