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

HTML5で計算結果を表示するには？outputタグの使い方を解説

HTML5では、計算やユーザー操作による結果を表示するために<output>タグを使用します。このタグは、JavaScriptなどによって計算された結果をフォーム内に示すために設計されており、スクリーンリーダーなどの支援技術にも「計算結果」として認識されるというメリットがあります。

<output>タグで使える主な属性

属性値説明
for要素ID計算に入力値を提供した他の要素のIDリスト。どの要素が計算に関与したかを明示します。
formフォームIDoutput要素をフォームタグの外側など、ドキュメント内の任意の場所に配置できるようにします。
name名前要素の名前。フォーム送信時やスクリプトから値を参照する際に使用されます。

使用例

以下のコードを実行すると、HTML5で<output>タグを実装し、計算結果をリアルタイムに表示する方法を確認できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Output Tag</title>
   </head>
   <body>
      <form oninput = "sumresult.value = parseInt(z1.value)+parseInt(z2.value)+parseInt(z3.value)">
         <input type = "range" name = "z1" value = "0" /> +
         <input type = "number" name = "z2" value = "30" /> +
         <input type = "number" name = "z3" value = "60" /><br />
         計算結果：<output name = "sumresult"></output>
      </form>
   </body>
</html>

この例では、スライダー1つと数値入力2つの合計3つの入力値が、oninputイベントによって即座に加算され、その結果が<output>要素に自動的に反映されます。ユーザーが入力を変更するたびに結果が更新されるため、動的で直感的なインターフェースを簡単に実現できます。

  1. HTMLで要素に値を追加するには？value属性の使い方を解説

    HTMLで要素に値を設定するには、value属性を使用します。value属性は、フォーム送信時にサーバーへ送られる初期値や、要素が持つ現在の値を指定するために使われます。 value属性が使用できる要素 value属性は、以下のHTML要素で利用できます。 <button> … ボタンのラベルとして送信される値 <input> … 入力フィールドの初期値 <li> … 順序付きリスト（<ol>）内での項目の開始番号 <option> … 選択肢としてサーバーへ送信される値 <meter> … 計測範囲内における現在の値

  2. MySQLでフィールドの値が0より大きい場合に1を引く方法

    MySQLで値が0より大きい場合のみ1を減算する方法MySQLでは、UPDATE文とCASE式を組み合わせることで、「フィールドの値が0より大きい場合にだけ1を引く」という条件付きの更新を簡単に実現できます。値が0の場合はそのまま維持されます。以下、実際の手順をサンプル付きで解説します。1. サンプルテーブルを作成するまず、テスト用のテーブルを作成します。mysql> create table DemoTable ( Id int NOT NULL AUTO_INCREMENT PRIMARY KEY, Value int ); Query OK, 0 rows affe