【初心者向け】HTMLでnumber属性を使う方法

「webサイト上でユーザに数値を入力してもらうフォームを作ってみたいが、やり方が分からない・・・」

こう思う方も多いのではないでしょうか。

本記事をお読みいただくと以下が分かります。

入力フォームはユーザにとって分かりやすい必要がありますし、あなたがその数値を正しく受け取れる設計にする必要があります。

入力フォームは非常に重要なので、是非本記事をお読みいただき、理解を深めてください。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

HTMLのnumber型とは

HTMLの<input type=”number”>は、数値の入力フォーマットを設置するために使います。Inputタグのtype属性でtype=”number”と指定することで、数値の入力フォーマットが作れるという仕組みです。

これだけ聞くと「なんだ、それだけか」と思われるかもしれないですが、type=”number”と設定した場合、他にも指定可能な属性がいくつかあります。
これらを組み合わせて使うことでユーザにとっても使いやすく、そして受け取る側からも扱いやすくなるメリットがあります。

HTMLのnumber型を使う際の注意点

1点目：全角入力を半角入力に自動修正はしてくれない

本当は半角で入力してほしかったのに、ユーザが数値を全角で入力してしまうケースは多いと思います。
もちろん、入力フォームは「本当は半角で入力してほしい」という意図は分からないので、半角への自動修正機能はありません。

もしこの機能をつけたい場合はJavaScriptを使う必要があるので注意しましょう。

2点目：ゼロから始まる項目の入力フォーマットとして使わない

例えば、「携帯電話番号」「口座番号」「クレジットカード番号」がこれらの例に当たります。
number型はあくまで入力されたデータを数値として扱うので、ゼロから始まる場合はゼロが消されてしまうことがあります（ブラウザや環境によって異なるようです）。

今回の例のようにゼロから始まる項目を扱いたい場合は、number型を使って数値にするのではなく、text型でテキストデータとして送信されるように設計しましょう。

ここまで、number型を扱う際の注意点を紹介しました。次から、いよいよ具体的なコードの書き方を見ていきましょう。

HTMLのnumber型の使い方や属性

まずは、非常にシンプルで基本の形から紹介します。

<input type="number" name="example1">

いかがでしょうか。非常に簡単ですよね。type=”number”を指定して、nameをつけてあげると、数値を入力できるフォーマットが1つできあがります。

このシンプルな形と、他の属性を組み合わせることで便利な入力フォーマットを作っていきましょう。

初期値を設定したい：value

入力数値が変わるケースが少ない場合や、参考として初期値を入力しておきたい場合もあると思います。
そのようなときは、以下のようにvalue=を使うことでデフォルトで数値を入力しておくことができます。

<input type="number" name="example2" value="10">

最小値、最大値を設定したい：min,max

入力できる数値に最小値や最大値がある場合は、minやmax属性を使用することがおすすめです。最小値や最大値の範囲を超えた数値をユーザが入力した場合、ブラウザ上でエラーを表示してくれるようになります。

<form>
<input type="number" max="100" value="30">
<input type="number" max="100" value="1000">
<button type="submit">送信</button>
</form>

上記のコードでは、最大値が100の入力フォーマットが2つあり、1つ目は問題ないですが2つ目はユーザが誤って1000と入力してしまっています。

この場合、「値は100以下にする必要があります」のようなエラーをブラウザで表示してくれるため、ユーザも自分のミスに気づきやすくなります。

入力の単位を指定する：step

step属性を利用することで、入力の単位を制限することができます。
例えばwebサイトで希望購入個数を入力するフォーマットを作る際、今回は5個単位でないと購入できない設定にしたいとします。
そのようなときは、以下のようにstep=5と指定することで実現できます。

<form>
<input type="number" step="5">
<button type="submit">送信</button>
</form>

上記の入力フォーマットに「8」のような、5単位ではない数値を入れるとブラウザがエラーを表示してくれるというわけです。

また、step属性の使い方として、「整数のみ入力できるようにしたい」時も有効です。以下のように、step=1にすることで小数の入力をエラーとして返すことができます。

<form>
<input type="number" step="1">
<button type="submit">送信(小数入力不可)</button>
</form>

オートコンプリート機能を使いたい：autocomplete

オートコンプリート機能とは、入力内容の自動補完です。あまり使う場面はないかもしれないですが、onとoffを指定することで実装可能です。

<input type="number" name="example" autocomplete="off">

入力候補を表示したい：list

list属性を使うことで、入力候補のリストを表示することができます。これは、ユーザが自動入力するのではなく、ある程度「この数値の中から選択してもらう」状況の時は便利な設定方法です。

<input type="number" name="example" list="data">
<datalist id="data">
<option value="10"></option>
<option value="20"></option>
<option value="30"></option>
</datalist>

上の例では、入力フォーマットにカーソルを合わせたとき、10・20・30が自動で表示され、その中から選択することができます。

入力のヒントを表示しておきたい：placeholder

「こういう数値を入力してください」といったヒントをデフォルトで表示したい場合、placeholder属性を使うと便利です。

<form>
<input type="number" name="example" placeholder="5以上100以下で入力してください" min="5" max="100" style="width: 18em;">
<button type="submit">送信</button>
</form>

上記の例では、入力フォーマットに薄い字で「5以上100以下で入力してください」と表示されています。
また、既に紹介したmax,min属性も併せて使用することで、範囲外の数値を入力した場合はブラウザがエラーを返してくれる仕組みになっています。

ここまでできると、ユーザにとっても便利ですし、受け取る側も想定と全く違う数値が送られてきて、ユーザに問い合わせをするといった手間が省けるため、非常に便利だと実感頂けると思います。

フォームを入力必須にしたい：required

最後に、フォームを入力必須にしたい場合です。何も入力せずに操作ミスで誤って送信ボタンを押してしまう可能性も十分に考えられます。
そのようなケースに備え、required属性を使ってフォームを入力必須にしておくと良いでしょう。

<form>
<input type="number" name="example" required>
<button type="submit">送信</button>
</form>

上記のフォーマットでは、何も入力せずに送信ボタンを押すと、ブラウザでエラーを返してくれます。

まとめ

いかがでしたでしょうか。numberを使うことで、ユーザにとっても受け取る側にとっても便利な入力フォーマットを簡単に作れることがお分かりいただけたと思います。
是非本記事を活用して、より良いサイト作りを進めてください。