【HTML】フォーム入力で数値を入力させる『number型』の使い方と組み込み方法

今回ご紹介するのは

フォーム内で数値を入力させるnumber型の設定方法

について。実はフォームの部品にはテキスト入力欄の他、数値を入力させる部品もあるのです。

早速基本の使い方と、ページへの組み込み方、応用方法をご紹介します。

目次 [非表示]

1 フォームに数値入力欄を組み込む方法
2 実際にフォームへの数字入力を使用する
3 まとめ

フォームに数値入力欄を組み込む方法

<input type=”number>の使い方

組み込み方は簡単。HTMLのbodyタグ内に、以下のようにinputタグを記述するだけ。type属性のnumberは数値を入力するフォームであることを示します。

<input type="number">

1	<input type="number">

実際にフォーム内に組み込む

では実際に1~100の数値を入力するフォームを作成してみましょう。実行例は以下の通りです。

表示例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
  </head>

  <body>
    <label for="number_button">1~100までの数字を入力してください</label>
    <input type="number" id="number_button" min="1" max="100">
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<label for="number_button">1~100までの数字を入力してください</label>

</body>

</html>

実行例では見えていませんが、フォーム内に数値を1つずつ変化させるボタンが表示されています。number型のフォームでは数値を直接入力できる他、ボタンで1つずつ値を変化させることもできます。

ここで作成したフォームでは、基本の属性指定の他、labelタグ、id属性、min属性、max属性を記述しました。

・labelタグーid同士で結びつけることで文字をクリックしてもフォームに入力できるようにする
・id属性ーlabelタグと結びつけるために必須
・min属性ーフォームの最小値を指定する
・max属性ーフォームの最大値を指定する

注意

number型がサポートされていないブラウザではtext型のテキストボックスに置き換えられます。

number型で使用できる値

属性	説明
list	datalist要素のidを指定する
max	フォームに入力できる最大値
min	フォームに入力できる最小値
placeholder	フォームに入力する値の例を表示する
readonly	読み取り専用のフォームを指定する
step	矢印で値を指定する際の値の幅を指定する

実際にフォームへの数字入力を使用する

では実際にフォームに組み込み、より実用的な使用例を見てみましょう。完成すると以下のように表示されます。

表示例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">

    <script>
      // チケットの枚数を確認して料金を計算する関数
      function get_calc() {
        var ticket = Number(sample_form.ticket.value); //チケットの枚数取得
        var adult = Number(sample_form.adult.value); //大人の人数取得
        var kids = Number(sample_form.kids.value); //子どもの人数取得
        
        // チケットの枚数と人数をチェックする
        // チケットの枚数と人数が一致する場合は料金を表示
        if (ticket == adult + kids) {
          var result = 0;
          result = (adult * 2500) + (kids * 1000);
          document.write("料金は" + result + "円です。");
          // そうでなければアラートを表示する
        } else {
          alert("チケットの枚数を確認してください");
        }
      }
    </script>
  </head>

  <body>
    <form name="sample_form">
      <label for="ticket">チケットの購入枚数</label>
      <input type="number" id="ticket"  name="ticket" value="1" max="100" min="1">枚<br>

      <label for="adult">大人</label>
      <input type="number" id="adult" name="adult" value="1" max="50" min="1">人：
      <label for="kids">子ども</label>
      <input type="number" id="kids" name="kids" value="1" max="50" min="0">人<br>

      <input type="submit" onclick="get_calc()">
    </form>
  </body>
</html>

<!DOCTYPE html>

<head>

// チケットの枚数を確認して料金を計算する関数

function get_calc() {

var ticket = Number(sample_form.ticket.value); //チケットの枚数取得

var adult = Number(sample_form.adult.value); //大人の人数取得

var kids = Number(sample_form.kids.value); //子どもの人数取得

// チケットの枚数と人数をチェックする

// チケットの枚数と人数が一致する場合は料金を表示

if (ticket == adult + kids) {

var result = 0;

result = (adult * 2500) + (kids * 1000);

document.write("料金は" + result + "円です。");

// そうでなければアラートを表示する

} else {

alert("チケットの枚数を確認してください");

}

</script>

</head>

<body>

<label for="ticket">チケットの購入枚数</label>

<input type="number" id="adult" name="adult" value="1" max="50" min="1">人：

</form>

</body>

</html>

例として、チケット購入システムを作成してみました。まずはinputタグを3つ使用して、チケットの枚数入力欄、大人・子供の人数入力欄をそれぞれ作成します。

こうして実際のフォームを作成する際は、ユーザが入力する値が正しいのかを正確に判断する必要があります。ここではチケットの枚数や人数が1枚以上、100枚以下になるように設定しました。

送信ボタンをクリックすると計算が実行されます。

scriptタグ内に記述したJavaScriptでは、まず変数を3つ作成し、フォーム名.inputの部品名.valueで入力値を取得。

そしてチケットの枚数が人数と合っているかを条件分岐で判断し、一致していなければアラートを表示させます。

条件に一致した場合は、大人のチケット料金を2500円、子供のチケット料金を1000円で計算し、documet.writeでページに表示します。

まとめ

今回はフォーム内で数値の入力欄を作成するnumber型について解説しました。numberタグを使用する際は以下の点に留意して使用しましょう。

最大値、最小値を使用して大きすぎる、小さすぎる値を受け付けないようにする
placeholderでユーザに値の入力例を示す
value属性を付けて入力値を取得できるようにする

数値入力はテキスト入力に比べると、入力値に対し少しシビアにならなければなりません。いくつか実用的なシステムを作成し、練習してみましょう。

参考文献：
＜input type=”number＞ – MDN Web Docs

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。