【HTML】outputの使い方! 計算結果を表示させよう!

シュウ

今回は【HTML】outputの使い方! 計算結果を表示させよう!
の解説になります！

こんな方に読んでほしい

HTMLを学び始めた方へ
HTMLについて学びたい方へ
今回はoutput(計算結果)について解説しております。

今回は、output(計算結果)について詳しく解説していきます。
outputでは、「計算結果」が表示されます。

outputで作成すると、計算結果が表示されます。

Chrome	Safari	Firefox	IE	Edge

[記事の内容]

outputについて

outputを指定すると、計算結果表示されます。
outputは、JavaScriptによる計算結果を表示します。
書き方は以下のようになります。

outputについて

<form method="post" oninput="result.value=parseInt(num1.value) + parseInt(num2.value);">
 <div>
  <label for="number">合計を表示</label>
  <input type="number" name="num1" value="0"> ＋ 
  <input type="number" name="num2" value="0"> ＝ <output name="result">0</output>
 </div>
</form>

使用できいる属性

for
入力コントロールのid属性値を指定することで、関連付けを行います。
form
form要素にid属性を指定することで、このフォーム要素を関連付けを行います。
name
output要素に名前を指定します。

value属性(入力欄に初期値)について

value属性とは、入力欄に初期値の文字を指定します。
また、type属性が「submit」、「image」、「reset」、「button」の場合はボタン名として表示されます。
例)value="0"と指定すると、0が値の初期値になります。
例)value="100"と指定すると、100が値の初期値になります。

value属性について

<form method="post" oninput="result.value=parseInt(num1.value) + parseInt(num2.value);">
 <div>
  <label for="number">合計を表示</label>
  <input type="number" name="num1" value="100"> ＋ 
  <input type="number" name="num2" value="50"> ＝ <output name="result">0</output>
 </div>
</form>

その他の計算式について

上記では、加算について解説しましたが、主に加算・減算・乗算・除算が行えます。
formのoninput=""の中身の式を変更します。

その他の計算式

加算(+)
例) result.value=parseInt(num1.value) + parseInt(num2.value)
減算(-)
例) result.value=parseInt(num1.value) – parseInt(num2.value)
乗算(*)
例) result.value=parseInt(num1.value) * parseInt(num2.value)
除算(/)
例) result.value=parseInt(num1.value) / parseInt(num2.value)

乗算について

<form method="post" oninput="result.value=parseInt(num1.value) * parseInt(num2.value);">
 <div>
  <label for="number">合計を表示</label>
  <input type="number" name="num1" value="100"> 
  <input type="number" name="num2" value="50"> ＝ 
  <output name="result">0</output>
 </div>
</form>

min属性とmax属性(数値の選択範囲)について

min属性とは、数値の最小値を指定します。
例) min="1"と指定すると、数量が1から選択可能になります。

max属性とは、数値の最大値を指定します。
例) max="20"と指定すると、数量が20まで選択可能になります。

min属性とmax属性について

<form method="post" oninput="result.value=parseInt(num1.value) * parseInt(num2.value);">
<div>
	<label for="price">価格</label>
	<input type="number" name="num1" value="1000" />
</div>
<div>
	<label for="quantity">数量</label>
	<input type="number" name="num2" value="1" min="1" max="20" /> ＝ 
	<output name="result">0</output>
</div>
</form>

※上記のコードは分かりやすいように、改行を入れております。

step属性(選択可能な数値を制限)について

step属性とは、指定した値おきに数値を選択できます。
例) step="1000"と指定すると、価格が1000円おきに数値が増えます。

min属性とmax属性について

<form method="post" oninput="result.value=parseInt(num1.value) * parseInt(num2.value);">
<div>
	<label for="price">価格</label>
	<input type="number" name="num1" value="1000" step="1000" />
</div>
<div>
	<label for="quantity">数量</label>
	<input type="number" name="num2" value="1" min="1" max="20" /> ＝ 
	<output name="result">0</output>
</div>
</form>

※上記のコードは分かりやすいように、改行を入れております。

CSSでinput type=”number”を整える

今回はCSSの数値を指定するので、type="number"の属性セレクタを使い整えていきます。
書き方は以下のようになります

input[type="number"] {
  /*--type="number"のinput要素にのみ適用されます--*/
}

CSSでinput type=”number”を整える

<form method="post" oninput="result.value=parseInt(num1.value) * parseInt(num2.value);">
<div>
	<label for="price">価格</label>
	<input type="number" name="num1" value="1000" step="1000" />
</div>
<div>
	<label for="quantity">数量</label>
	<input type="number" name="num2" value="1" min="1" max="20" /> ＝ 
	<output name="result">0</output>
</div>
</form>

input[type="number"] {
  width: 200px; /*--幅--*/
  padding: 10px; /*--余白--*/
  font-size: 16px; /*--文字サイズ--*/
  border: solid 2px #cccccc; /*--ボーダー線--*/
  border-radius: 5px; /*--角丸--*/
}

/*--focus--*/
input[type="number"]:focus {
  background-color: #febe3e; /*--背景色--*/
}

/*--output (合計値 出力)--*/
output {
    background: #f9f9f9;
    border: solid 1px #ccc;
    display: inline-block;
    padding: 10px 20px;
    margin: 0 0 0 10px;
}

:focusとは、テキストフィールドなどのフォーム部品がフォーカス状態になったときに、
スタイルが適用されます。
今回は、「背景色」が変わるようになっております。

type=”text”	【HTML】type属性textの使い方、1行のテキスト入力欄を作成しよう!
textarea	【HTML】textareaの使い方、複数行のテキスト入力欄を作成しよう!
select	【HTML】selectの使い方、プルダウンメニューを作成しよう!
fieldset	【HTML】fieldsetの使い方、フォーム入力欄をグループ化しよう!