HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLの入力ボックスで数値のみを受け付けるようにする方法

HTMLの入力ボックスで数値入力のみを受け付けるようにするには、<input type="number"> を使用します。このタイプを指定することで、ブラウザは数値専用の入力フィールドを自動的に生成し、ユーザーがテキストや記号を入力できないよう制御できます。

入力ボックスを数値に制限した状態で、ユーザーが文字列を入力して送信ボタンを押すと、ブラウザの標準バリデーションによって「数値を入力してください。」というエラーメッセージが表示され、フォームの送信が阻止されます。

HTMLの入力ボックスで数値のみを受け付けるようにする方法

実装例

以下のコードを実行すると、1から20までの数値のみを受け付ける入力ボックスを作成できます。

<!DOCTYPE html>
<html>
    <head>
        <title>HTML input number</title>
    </head>

    <body>
        <form action = "" method = "get">
            1〜20までの任意の数値を入力してください：
            <input type="number" name="num" min="1" max="20"><br>
            <input type="submit" value="送信">
        </form>
    </body>
</html>

便利な関連属性

type="number" と組み合わせて使える主な属性は以下のとおりです。

  • min / max： 入力できる数値の最小値と最大値を指定します。範囲外の値が入力された場合もバリデーションエラーになります。
  • step： 数値の増減刻みを指定します。例えば step="0.5" とすれば、0.5単位での入力が可能になります。
  • placeholder： 入力欄に薄く表示されるガイドテキストを設定できます。
  • required： 入力を必須項目にします。空のまま送信しようとするとエラーが表示されます。

このように <input type="number"> を活用すれば、JavaScriptを追加しなくても、HTMLだけで簡単かつ確実に数値入力の制限を実現できます。

  1. HTMLのplaceholder属性の使い方を解説！入力欄にヒントを表示する方法

    テキストエリアや入力フィールドにヒントを表示したい場合には、HTMLのplaceholder属性を活用しましょう。このヒントとして表示されるのは「入力が期待される値」の例で、ユーザーが実際に何かを入力する前に、氏名や詳細情報などの案内が薄い文字で表示されます。ユーザーが入力を始めると、ヒントは自動的に消えます。 記述例 以下のコードを実行すると、HTMLでplaceholder属性を使用する方法を実際に確認できます。ログインフォームや登録フォームなどでよく使われるパターンです。 <!DOCTYPE html> <html>    <body&

  2. HTML DOMの入力番号（number）オブジェクトとは？基本構文・プロパティ・メソッドを解説

    HTML DOM の入力番号（input number）オブジェクトは、type=number を指定した <input> 要素を表します。このオブジェクトを使うことで、JavaScript から数値入力フィールドの値や属性を動的に操作できます。ここでは、入力番号オブジェクトの作成方法、主なプロパティとメソッド、そして具体的なコード例をわかりやすく解説します。基本構文入力番号オブジェクトを作成するには、まず createElement() で INPUT 要素を生成し、その後 setAttribute() で type 属性に number を指定します。var numberInp