html

Number Input HTML

At times, while creating web forms, you intend to collect numbered data. The great thing about HTML is that it provides dedicated tags for collecting such types of data. The numberic input tag of HTML falls under the category of such tags, and in this article, we will try to explore the usage of this HTML tag in depth.

What is the Number Input Tag in HTML?

The number input tag in HTML allows you to enter a numbered input. This input can be any number, including negative and non-negative integers as well as “0”. The number input tag in HTML enables you to either enter the numbered input through the keyboard or select it from the list provided by this tag. Moreover, this tag also has some other attributes associated with it that are used to serve different purposes. For example, you can use the “min” and “max” attributes of the number input tag to specify the minimum and maximum input limit. Similarly, you can use the “step” attribute to specify the intervals of input. To learn more about how the number input tag works in HTML, you will have to go through the preceding sections of this article.

Usage of the Number Input Tag in HTML:

To master the usage of the number input tag in HTML, you will have to understand the following two examples:

Example # 1: Entering the Age between a Certain Limit:

We will design this example in such a way that it will be able to collect the age of a user within the specified limit. The HTML script that we have used is shown in the image below:


In this example, we have first defined the label for our numbered input, i.e., Age. Then, we used the number input tag to define the age limit, which we kept between 15 and 30. It means that this HTML script will ask the user to enter his/her age, but that age must be constrained between 15 and 30. Also, we have added a submit button to this script to make it look more presentable.

Upon executing the HTML script shown above, the following web page was displayed in our browser. You can see that we have been provided with a number input field in which we can either type a particular number lying within the specified range with our keyboard or we can even use the arrow keys associated with the number input field to select the desired age.


The image shown below represents a randomly selected age:


Also, since the minimum age limit is 15, we will neither be able to type anything below it nor be able to select a number below 15 by using the arrows. Once we reach the minimum age limit, that number will automatically be highlighted as shown in the following image, indicating that we cannot move below this age limit.


Similarly, we will also not be allowed to go beyond the maximum age limit, which is “30” in this case. This is depicted in the image shown below:

Example # 2: Entering the Number of Apples with a Specified Interval:

In this example, we will introduce you to a new attribute associated with the number input tag of HTML, i.e., the step attribute. This attribute is used for specifying the intervals with which you want to increase or decrease the numbered input. To do that, we have written the following HTML script:


In this example, we wanted the user to enter the number of apples he/she wanted in kilograms in multiples of “2”, i.e., he/she can enter 2, 4, 6, 8, and so on. To achieve this functionality, we have specified the “step” attribute with the input type tag and have kept its value as “2”.

When we executed this script, we were presented with the web page shown in the image below:


The following image shows that we have selected 6 kilograms of apples:


However, in this example, we did not define any lower or upper limit because of the possibility that the user might end up selecting a negative number (which would technically be invalid), as shown in the image below:


To prevent this from happening, we will slightly modify the above script by making use of the “min” attribute to specify that the minimum amount of apples cannot be less than 2 kilograms as shown in the following image:


When we executed our HTML script after making this modification, we were not allowed to go below 2 kilograms, as shown in the image below:

Conclusion:

Through this article, we wanted to convey the usage of the number input tag oin HTML to our readers. We first developed a basic understanding of this tag by discussing some of the attributes associated with it. After that, we explained the usage of this tag with the help of two relevant examples. Once you go through this guide, you will clearly understand how the number input tag works in HTML.

About the author

Ayesha Sajid

Ayesha Sajid has secured a Bachelor's degree in Computer Sciences and a Master's degree in Information Security. She is a technical content writer by profession who has around four years of experience in working with Windows and different flavors of the Linux operating system. She also has a keen interest in exploring the latest technology trends.