output

タグの概要

<output>タグは、計算結果やユーザーの入力値を表示するためのタグです。フォーム要素と連携して使用され、計算結果や入力値を一定の形式で表示する際に利用されます。

基本の書き方（構文）

<output for="input_id"></output>

主な属性とその説明

• for: この属性は、関連するフォーム要素のIDを指定します。入力値や計算結果を表示する際に、どのフォーム要素と関連付けるかを指定します。

使用例（具体的なコード）

<form>
  <label for="num1">Number 1:</label>
  <input type="number" id="num1">

  <label for="num2">Number 2:</label>
  <input type="number" id="num2">

  <button onclick="calculate()">Calculate</button>

  <output for="num1 num2" id="result"></output>
</form>

<script>
function calculate() {
  let num1 = document.getElementById("num1").value;
  let num2 = document.getElementById("num2").value;
  let sum = parseInt(num1) + parseInt(num2);
  document.getElementById("result").textContent = "Sum: " + sum;
}
</script>

よくある注意点・間違い

・<output>タグは、フォーム要素と連携して使用することが適切です。単体で使用する際は、適切なコンテキストが必要です。

・<output>タグを適切に使用することで、SEOやアクセシビリティに配慮したウェブページを作成することが重要です。