計算の結果を出力するときなどにoutput要素を使います。
計算結果はJavaScriptなど、クライアントサイドスクリプトとよばれるプログラムを用いて出力するので、JavaScriptに対応していない環境では利用できません。
その場合にはoutput要素の内容が表示されます。
output要素で使える属性
output要素では以下のような属性を指定できます。
- name（ネーム）
- for（フォー）
- form（フォーム）
name（ネーム）
name属性で、output要素に名前をつけることができます。
このname属性は、JavaScriptからoutput要素にアクセスする際に必要です。
for（フォー）
for属性では、フォーム部品につけたid属性値を指定することで、そのフォーム部品と関連づけることができます。
form（フォーム）
form属性に任意のform要素につけたid属性値を指定することで、そのフォームと関連づけることができます。
少しわかりにくいですが、下のようにoutput要素を使って、2つの数を足した結果を出力することができます。
<form onsubmit=”return false” oninput=”o.value = a.valueAsNumber + b.valueAsNumber”>
<p>2つの整数の和を計算します。</p>
<input type=”number” name=”a” id=”a”> + <input type=”number” name=”b” id=”b”> = <output name=”o” id=”o” for=”a b”>計算結果が出力されます。</output>
</form>
<p>2つの整数の和を計算します。</p>
<input type=”number” name=”a” id=”a”> + <input type=”number” name=”b” id=”b”> = <output name=”o” id=”o” for=”a b”>計算結果が出力されます。</output>
</form>
ちなみにform要素で指定しているonsubmit属性やoninput属性はイベントハンドラ属性といって、ユーザーがデータを入力したときや送信する際にスクリプトを実行することを指定している属性です。
Leave a Comment