はじめに
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サイトやアプリケーションを作成していきましょう！
