HTML 【フォーム】12 ~ 出力欄(output)

Calculator Accounting Finance Business Concept

HTML5からの新要素にoutput要素があります。output要素は、計算結果を表示する等、出力欄を作るための要素です。
今回は、このoutput要素についてまとめたいと思います。

フォームについては、以下のページもご参照下さい。
HTML 【フォーム】1 ~ フォームの概要とform要素の属性一覧
HTML 【フォーム】2 ~ form要素の使い方
HTML 【フォーム】3 ~ form要素で使う主な属性の使い方
HTML 【フォーム】4 ~ fieldset要素とlegend要素
HTML 【フォーム】5 ~ input要素(1)フォーム部品一覧
HTML 【フォーム】5 ~ input要素(2)テキスト入力部品
HTML 【フォーム】5 ~ input要素(3)ラジオボタンとチェックボックス
HTML 【フォーム】5 ~ input要素(4)日時の入力部品
HTML 【フォーム】5 ~ input要素(5)数値の入力部品
HTML 【フォーム】5 ~ input要素(6)レンジ(range)の入力部品
HTML 【フォーム】5 ~ input要素(7)色(color)の入力部品
HTML 【フォーム】5 ~ input要素(8)ファイル送信のための部品
HTML 【フォーム】5 ~ input要素(9)隠し情報(hidden)
HTML 【フォーム】5 ~ input要素(10)ボタン(submit、reset、button)
HTML 【フォーム】5 ~ input要素(11)画像ボタン(image)
HTML 【フォーム】6 ~ button要素で作るボタン
HTML 【フォーム】7 ~ ボタンの作り方比較とJavaScriptでアラート表示
HTML 【フォーム】8 ~ セレクトリスト
HTML 【フォーム】9 ~ 入力候補(datalist)
HTML 【フォーム】10 ~ テキストエリア(textarea)
HTML 【フォーム】11 ~ ラベル(label)

目次

1.output要素
2.出力欄の作成

1.output要素

output要素は、HTML5 からの新要素で、出力欄を作るための要素です。
結果の値を表示するのが目的で、表示された値が送信されたりすることはありません。

次の水色の欄に数字を入力すると、ピンクの欄に計算結果が表示されます。
このピンクの欄が、output要素で作成した出力欄です。



0
使用する要素 <output>~</output>
output要素の属性 name属性 output要素に固有の名前を付ける
for属性 フォーム部品の id名を呼び出す
form属性 親のform要素のid名を呼び出して関連付ける
グローバル属性 id属性、class属性、title属性、style属性など

▲目次へ戻る

2.出力欄の作成

●name属性を指定して、入力時に反応する出力欄を作ります。



0

計算結果として表示される部分が、output要素で作った出力欄です。
上の表示に対するhtmlコードは、以下の通りです。

<form oninput=”op1.value = Number(a.value) + Number(b.value);”>
<input type=”number” name=”a” value=”0″>

<input type=”number” name=”b” value=”0″>

<output name=”op1″ style=”background:#FCC;”>0</output>
</form>

form要素の開始タグ内のoninputは、JavaScriptのイベントハンドラで、入力時に処理をするという命令を指定しています。
<input type=”number”>で作られた2つの入力欄に、aとbという名前を付けているので、a.valueは、aの入力値という意味です。
ですので、上記のoninput=”・・・”は、どちらかの入力欄に入力があった場合に、2つの入力欄の入力値を足して、結果を出力欄に表示する、という命令を記載しています。

●name属性を指定して、ボタン押下時に反応する出力欄を作ります。

×

0 

数字の入力時に計算結果が表示された先ほどの例と違って、「計算」ボタンを押した時に、出力欄に計算結果が表示されます。
htmlコードは、以下の通りです。

<form>
<input type=”number” name=”a” value=”0″>
×
<input type=”number” name=”b” value=”0″>

<output name=”op1″ style=”background:#FCC;”>0</output>
<input type=”button” onclick=”op1.value = Number(a.value) * Number(b.value);” value=”計算”>
</form>

ボタン(input type=”button”)の onclickイベントハンドラで計算結果を返す命令を書いています。
onclickイベントハンドラは、クリック時に処理をするという命令を指定します。

●id属性とfor属性を指定して、入力時に反応する出力欄を作ります。





htmlコードは、以下の通りです。

<form oninput=”document.getElementById(‘op1’).value =
parseInt(document.getElementById(‘a’).value, 10) +
parseInt(document.getElementById(‘b’).value, 10)”>
<input type=”number” id=”a”>

<input type=”number” id=”b”>

<output for=”a b” id=”op1″ style=”background:#FCC;”></output>
</form>

for属性は、出力元のフォーム部品を明確に示すためのものです。
for属性は、半角スペースで区切って複数指定できます。
入力欄のフォーム部品にid属性で名前を付け、outprt要素のfor属性で関連付けを行います。

for要素のoninputイベントで、id属性を使って各要素のvalue値を呼び出して計算し、outout要素の値として返しています。

●id属性とfor属性を指定して、ボタン押下時に反応する出力欄を作ります。

×

 

htmlコードは、以下の通りです。

<form>
<input type=”number” id=”a”>
×
<input type=”number” id=”b”>

<output for=”a b” id=”op1″ style=”background:#FCC;”></output>
<input type=”button” onclick=”document.getElementById(‘op1’).value =
parseInt(document.getElementById(‘a’).value, 10) *
parseInt(document.getElementById(‘b’).value, 10)” value=”計算”>
</form>

ボタン(input type=”button”)のonclickイベントで、id属性を使って各要素のvalue値を呼び出して計算し、outout要素の値として返しています。
outprt要素のfor属性は、半角スペースで区切って複数指定できます。

●レンジのスライダーを動かして選んだ数値の出力欄を作ります。

ボリューム(1~10):  
6

上の表示に対するhtmlコードは、以下の通りです。

<form oninput=”op1.value = Number(a.value);”>
ボリューム(1~10): <input type=”range” name=”a” min=”1″ max=”10″>
<output name=”op1″ style=”background:#FCC;”>6</output>
</form>

それぞれの部品にname属性で名前を付けて値を呼び出しています。
form要素のoninputイベントで、レンジの入力結果をoutout要素の値として返しています。

●テキスト入力に対する出力欄を作ります。

いらっしゃいませ お客様!



先ほどまで数値入力用のフォーム部品を組み合わせて出力欄を作っていましたが、output要素で、テキストの入力欄(input type=”text”)に対する出力欄も作ることができます。
上の表示に対するhtmlコードは、以下の通りです。

<script>
function change(ctrl){
var g = document.getElementById(‘guest’);
g.value = ctrl.value;
}
</script>
<form>
<p>
いらっしゃいませ <output id=”guest”>お客</output>様!
</p>
<input type=”text” name=”g_name” placeholder=”お名前を入力して「表示」ボタンを押して下さい” />
<input type=”button” value=”表示” onclick=”change(g_name)”/>
</form>

ここではまず、JavaScriptでchange(ctrl) という関数を作っています。
この中で、id名(guest)を付けたoutput要素のvalue値が置き換えられるように指定しています。

form要素の中では、テキスト入力部品のinput要素に、name属性で名前(g_name)を付けておいて、ボタン部品のonclickイベントで、change(g_name)と関数を呼び出して、output要素のvalue値をg_nameに置き換えています。

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です