https://hmaster.net/


HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する 方法を分かりやすく解説しているサイトです。 初心者向けに見やすい、読みやすい作りになっています。

計算結果の出力欄を表す

<output>~</output>でフォームの計算結果の出力欄を表すこと ができます。


属性 説明
name 出力欄の名前
for 計算で使用する要素のIDを指定する
form formに関連するIDを指定する

下の例ではフォームタグにoninput属性(入力フォームの値が変更された際に実行する)を指定し数値入力欄の名前aとvalueAsNumber (数値の入力値) が 関連付けられており同様に、数値入力欄の名前bとvalueAsNumber (数値の入力値) が 関連付けられ双方の合計値がoutputタグによって「結果」の文字の場所に出力されます。

入力欄の三角マークを押すことで数値の増減ができます。 マイナスの値も表示、計算可能になります。

【ブラウザ表示】

結果

ソース

<form oninput="keisan.value = a.valueAsNumber + b.valueAsNumber">
<input type="number" name="a" value="0"> +
<input type="number" name="b" value="0"> =
<output name="keisan">結果</output>
</form>

■ その他の項目

オートコンプリートを指定する
フォームの入力データの検証を無効にする
初期表示する内容を指定する
フォームの入力候補を表示する
作業の進捗状況を示す
規定範囲内の容量を示す

HTML5のタグ一覧

HTMLタグ一覧

CSS一覧

このエントリーをはてなブックマークに追加