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

Posted on by mtoplistChuyên mục:Top List

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

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
>

If you compile and run the above code, it will display 4 boxes and you can set the limit from minimum 0 to maximum 5.

Advertisements

mtoplist