How to limit an HTML input box so that it only accepts numeric input?

HTML Web Development Front End Technology

In this article, we will learn how to limit an HTML input box so that it only accepts numeric inputs.

We use the <input type="number"> to limit an HTML input box so that it only accepts numeric inputs. By using this, we will get a numeric input field.

Syntax

Following is the syntax to limit an HTML input box so that it only accepts numeric input.

<input type="number">

Example

Following is the example program to limit an HTML input box so that it only accepts numeric input -


<!DOCTYPE html>
<html>
<center>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      input[type=number] {
         width: 10%;
         padding: 12px 20px;
         margin: 8px 0;
         box-sizing: border-box;
         border: 2px solid mediumseagreen;
         border-radius: 4px;
      }
   </style>
</head>
<body>
   <h1>Tutorialspoint</h1>
   <form action = "" method = "get">
      Enter your Mobile number -
      <input type="number"> <br><br>
      Enter your area Pincode -
      <input type="number"> <br><br>
      <input type="submit" value="Submit">
   </form>
</body>
</center>
</html>

If we try to enter any value apart from numeric it will not allow. So it strictly allows only numeric values.

Example

Following is another example program to limit an HTML input box so that it only accepts numeric input -


<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <form action = "" method = "get">
      Phone Number:
      <input type="number" name="num" min="1" max="20"><br>
      <input type="submit" value="Submit">
   </form>
</body>
</html>

After limiting the input box to number, if a user enters text and press submit button, then the following can be seen “Please enter a number.”

We can also limit the value of the number input field.

After limiting the input box to number, if a user enters greater than the limit and press submit button, then the following can be seen “Value must be less than or equals to limit value specified(20)”

Example

Following is another example program to limit an HTML input box so that it only accepts numeric input -


<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <form action = "" method = "get">
      <h3>Select the quantity, and we cannot deliver more than 5.</h3><br>
      Pizza<input type="number" name="num" min="0" max="5"><br>
      Burger<input type="number" name="num" min="0" max="5"><br>
      Garlic Bread<input type="number" name="num" min="0" max="5"><br>
      Pepsi<input type="number" name="num" min="0" max="5"><br>
   </form>
</body>
</html>