ITコラム

プログラミングノウハウ

2017.03.01

#HTML入門

HTML【フォーム】12～出力欄（output）

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

フォームについては、こちらのページもご参照下さい。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

１．output要素
２．出力欄の作成

１．output要素

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

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

使用する要素　：　<output> ～ </output>

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

▲目次へ戻る

２．出力欄の作成

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

計算結果として表示される部分が、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”>で作られた２つの入力欄に、aとbという名前を付けているので、a.valueは、aの入力値という意味です。
ですので、上記のoninput=”・・・”は、どちらかの入力欄に入力があった場合に、２つの入力欄の入力値を足して、結果を出力欄に表示する、という命令を記載しています。

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

数字の入力時に計算結果が表示された先ほどの例と違って、「計算」ボタンを押した時に、出力欄に計算結果が表示されます。
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属性は、半角スペースで区切って複数指定できます。

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

上の表示に対する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に置き換えています。

▲目次へ戻る