How to limit the HTML input box to only accept numeric input?-HTML Tutorial-php.cn

How to limit the HTML input box to only accept numeric input?

PHPz

Release： 2023-09-01 13:37:02

forward

1434 people have browsed it

How to limit the HTML input box to only accept numeric input?

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

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

Syntax

The following is the syntax to limit the HTML input box to only accept numeric input.

<input type="number">

Copy after login

Example

The following is a sample program to limit the HTML input box to only accept 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>

Copy after login

If we try to enter any value other than a number, it will not be allowed. Therefore, it strictly only allows 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>

Copy after login

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 numbers, if the user enters a value greater than the limit value and clicks the submit button, the following content will be displayed: "The value must be less than or equal to the specified limit value (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>

Copy after login

If you compile and run the above code, it will show 4 boxes where you can set the limit from a minimum value of 0 to a maximum value of 5.

The above is the detailed content of How to limit the HTML input box to only accept numeric input?. For more information, please follow other related articles on the PHP Chinese website!