HTML入力欄で数字だけを受け付ける3つの方法！

はじめに
●数字のみの入力欄を作成する方法
- ①：inputタグのtype属性を利用する
●数字のみの入力欄を作成する方法
- ②：pattern属性とtitle属性を利用する
●数字のみの入力欄を作成する方法
- ③：JavaScriptを使って制御する
●カスタマイズの応用例
まとめ

はじめに

Webサイトやアプリケーションでよく見かける入力フォーム。

中でも、数字のみを受け付ける入力欄は、電話番号や数量などを入力する際に非常に便利ですよね。

しかし、初心者の方にとっては、その作り方や使い方が難しく感じるかもしれません。

そこで今回は、初心者向けにHTMLで数字のみの入力欄を作成する方法を3つ、徹底解説します！

実用的なサンプルコードやカスタマイズ方法も満載。今すぐ試して効果を実感しましょう！

●数字のみの入力欄を作成する方法

①：inputタグのtype属性を利用する

まずはじめに、HTMLで数字のみの入力欄を作る最もシンプルな方法を紹介します。

それは、inputタグのtype属性を利用する方法です。

下記のコードは、type属性を”number”に設定したinputタグです。

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

このように記述するだけで、ブラウザ上には数字のみの入力欄が表示されます。

簡単でしょう？

ただし、この方法には注意点があります。

一部の古いブラウザでは、type属性を”number”に設定した場合、テキスト入力欄として表示されることがあるため、予期せぬ不具合が起こる可能性があります。

その場合は、次に紹介する方法を試してみてください。

●数字のみの入力欄を作成する方法

②：pattern属性とtitle属性を利用する

もう少し柔軟性のある方法として、pattern属性とtitle属性を利用した方法を紹介します。

pattern属性を使うことで、入力欄に許可する文字列のパターンを正規表現で指定することができます。

また、title属性を使用することで、入力欄にツールチップ形式で説明を表示することができます。

下記のコードでは、pattern属性で数字のみの入力を許可し、title属性で説明を追加しています。

<input type="text" name="phone" pattern="\d*" title="数字のみを入力してください。">

これにより、入力欄に数字以外の文字が入力された場合、ユーザーにメッセージが表示され、エラーが出るようになります。

●数字のみの入力欄を作成する方法

③：JavaScriptを使って制御する

最後に紹介する方法は、JavaScriptを使って数字のみの入力を制御する方法です。

この方法は、上記の方法と比較して、より柔軟でカスタマイズしやすいというメリットがあります。

下記のコードは、数字以外の文字を入力した際に、それを削除するJavaScriptのサンプルです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>数字のみの入力欄</title>
  <script>
    function validateNumberInput(input) {
      input.value = input.value.replace(/[^0-9]/g, "");
    }
  </script>
</head>
<body>
  <input type="text" name="num" oninput="validateNumberInput(this);">
</body>
</html>

このコードでは、入力欄でoninputイベントが発生した際に、validateNumberInput関数が呼び出されます。

この関数では、数字以外の文字を削除することで、入力欄には数字のみが残るようになっています。

このように、JavaScriptを用いることで、入力欄の挙動を自由にカスタマイズすることができます。

●カスタマイズの応用例

ここでは、上記で紹介した方法を応用して、入力欄のカスタマイズを行う方法をいくつか紹介します。

○最小値・最大値の設定

inputタグのtype属性を”number”に設定した場合、min属性とmax属性を使用して、入力可能な最小値・最大値を指定することができます。

下記のコードは、最小値を0、最大値を100と設定した例です。

<input type="number" name="score" min="0" max="100">

これにより、入力欄に0未満や100超の数字を入力しようとすると、エラーが表示されます。

○ステップ値の設定

inputタグのtype属性を”number”に設定した場合、step属性を使用して、入力可能な数字の間隔を指定することができます。

下記のコードは、step値を10に設定した例です。

<input type="number" name="multiple_of_ten" min="0" max="100" step="10">

これにより、入力欄で上下矢印をクリックすると、10刻みで数字が変化します。

また、10の倍数以外の数字を入力しようとすると、エラーが表示されます。

○プレースホルダーの設定

inputタグには、placeholder属性を使用して、入力欄にデフォルトの表示内容を設定することができます。

これは、ユーザーに入力例を示すために役立ちます。

下記のコードは、プレースホルダーに「数字を入力」と表示する例です。

<input type="text" name="num" pattern="\d*" title="数字のみを入力してください。" placeholder="数字を入力">

このように、placeholder属性を利用することで、入力欄が何を求めているのかをユーザーにわかりやすく伝えることができます。

まとめ

この記事では、HTMLで数字のみの入力欄を作成する方法を3つ紹介しました。

inputタグのtype属性を利用する
pattern属性とtitle属性を利用する
JavaScriptを使って制御する

また、カスタマイズの応用例として、最小値・最大値の設定、ステップ値の設定、プレースホルダーの設定などを紹介しました。

これらの方法を試して、自分のニーズに合った数字のみの入力欄を作成しましょう。

そして、より使いやすく、魅力的なWebサイトやアプリケーションを作成していきましょう！