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

HTMLの<output>要素におけるfor属性の使い方

<output>要素のfor属性とは

<output>要素のfor属性は、計算結果と、その計算に使用された要素との関連性(リレーション)を明示的に設定するための属性です。フォーム内で動的な計算を行う際に、どの入力要素が結果に影響しているのかをブラウザや支援技術に対して伝える役割を果たします。

構文は以下の通りです。

<output for="id">

上記の「id」には要素のIDを指定します。半角スペースで区切ることで、1つ以上の複数の要素を同時に指定することも可能です。ここで指定した要素によって、計算結果と計算元となる要素との関係が定義されます。

それでは、<output>要素のfor属性を実際に実装した例を見てみましょう。

サンプルコード

<!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>

このサンプルでは、スライダー(type="range")と2つの数値入力フィールド(type="number")の値を合算し、その結果を<output>要素に表示しています。for属性には「p q r」というように、3つの入力要素のIDをスペース区切りで指定しています。

表示結果

HTMLの<output>要素におけるfor属性の使い方

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

HTMLの<output>要素におけるfor属性の使い方


  1. HTMLのtabindex属性とは？タブ移動の順序を制御する方法を解説

    HTMLのtabindex属性は、HTMLドキュメント内の要素がTabキーでフォーカスされる順序（タブ移動の順番）を定義するための属性です。tabindexはグローバル属性に分類されるため、すべてのHTML要素に対して使用することができます。通常、Tabキーを押すと要素はHTMLの記述順にフォーカスされますが、tabindex属性を指定することで、この順序を自由にコントロールできます。値には整数を指定し、数値が小さいものから順にフォーカスされます。tabindex属性の値について正の数（1以上）：指定した数値の順序でタブ移動が行われます0：HTMLの記述順にフォーカスされます（デフォルトの挙動

  2. HTMLのrequired属性とは？使い方とサンプルコードをわかりやすく解説

    HTMLのrequired属性は、フォームを送信する前に該当要素の入力または選択が必須であることを指定するためのブール型属性です。この属性は、input、select、textarea の各要素に適用できます。required属性が設定されたフィールドが空のままフォームを送信しようとすると、ブラウザが自動的にバリデーションを行い、「このフィールドは必須です」といったエラーメッセージを表示して送信を阻止します。JavaScriptを使わずに簡単な入力チェックを実現できるため、フォーム作成時には非常に便利な属性です。構文（シンタックス）required属性の基本的な構文は以下の通りです。<t