column

ITコラム

mv2716

プログラミングノウハウ

2017.03.01

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

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)
HTML 【フォーム】12 ~ 出力欄(output)( 本ページ )
HTML 【フォーム】13 ~ 数量や割合のゲージ(meter)
HTML 【フォーム】14 ~ 進捗状況を示すプログレスバー(progress)
HTML 【フォーム】15 ~ キーを発行して暗号化(keygen)
HTML 【フォーム】16 ~ CSSでフォームを整える

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

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){
    let 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に置き換えています。

▲目次へ戻る

無料説明会

SHARE

最新記事

無料説明会に参加してみる

INTERNOUS,inc. All rights reserved.

無料オンライン説明会へ