How to add a numerical box (textfield) in HTML

problem

You wish to add a numerical box on your web page to better guide your user to enter numbers only.

SOLUTION

By using the <input> tag with type=”number”. For example:

numerical_box.html

				
					<input type="number" />

output

We can either click on the buttons that are inside the box to increment/ decrement the number by one. The same action happens by pressing the key down/ up on the keyboard. Alternatively, we can simply type the number.

Note: No one constraints the user from typing other characters like letters, symbols, etc. This can be controlled by adding some JavaScript code.

Placing a label

In order to add a <label> tag, we need to specify the id attribute and link the two. For example:

numerical_box.html

				
					<label for="people">How many people:</label>
<input type="number" id="people" />

output

Disabling the numerical box (textfield)

If we want to disable the numerical box and disallow the user from typing anything inside, we can simply add the disabled attribute as follows:

numerical_box.html

				
					<label for="people">How many people:</label>
<input type="number" id="people" disabled />

output

The numerical box appears grayed out and cannot be clicked.

Adding a default number

If we want to load a default number into the numerical box we can simply use the value attribute as follows:

numerical_box.html

				
					<label for="people">How many people:</label>
<input type="number" id="people" value="44" />

output

The numerical box shows 44 when the web page is loaded.

Using min, max constraints

If we wish we can specify the numerical text field to accept values within a specified range. For this, we use the min and max attributes respectively. For example to put range of numbers 1 to 5:

numerical_box.html

				
					<label for="people">How many people:</label>
<input type="number" id="people" min="1" value="4" max="5"/>

output

In the animation above, we can see that when the up button is clicked and the number 5 (max) is reached; it stops incrementing the number. The same happens with the down button, it stops decrementing when the number is 1 (min). Thus, staying in the range specified by the min and max attributes.

conclusion

In this post we saw how to use the <input> tag with type=”number” to create a numerical text field. The user can use the down/ up arrow on the keyboard to decrement/ increment the number by one. Alternatively, by clicking buttons, or by typing the number.

References:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

Share it!

Ellion

Professional IT consultant, writer, programmer enthusiast interested in all sorts of coding.
Eats all cookies 🍪

Tagged user-input

0 0 votes

Article Rating