HTML Number Inputs

In the previous section, we learned about HTML text inputs. Now, we will learn about HTML number inputs, which allow users to enter numeric values in a form.

What are Number Inputs?

Number inputs are HTML elements that allow users to enter numeric values. They are commonly used in forms for collecting data such as quantities, prices, and other numerical information.

Basic Number Input

The most basic number input is created using the <input> element with the type attribute set to "number". This creates a single-line input field where users can type in numeric data.

How to Create a Number Input

To create a number input in HTML, you can use the <input> element with the type attribute set to "number". Here is an example:

<input type="number" name="quantity" placeholder="Enter quantity" />

The output of the above code will look like this:

As you can see, we have created a number input where users can enter a quantity. Also at the right side of the input box, you will see up and down arrows that allow users to increase or decrease the value.

Attributes of Number Inputs

Number inputs have several attributes that can be used to change the appearance and behavior of the input box. Here are all the attributes of number inputs:

Example of Number Input with Attributes

<input type="number" name="price" min="0" max="1000" step="10" placeholder="Enter price" />

The output of the above code will look like this:

In this example, we have created a number input for entering a price with the following attributes:

• min="0": The minimum value allowed is 0.
• max="1000": The maximum value allowed is 1000.
• step="10": The value must be a multiple of 10.

So everytime, we click on the up or down arrows, the value will increase or decrease by 10 until it reaches the maximum or minimum value.

🔢 Input with Range Slider

We can also create a range slider using the type="range" attribute. This allows users to select a value from a specified range by sliding a handle along a track.

<input type="range" name="volume" min="0" max="100" step="1" />

The output of the above code will look like this:

As you can see, we have created a range slider for selecting a volume level between 0 and 100 with a step of 1.

🎮 Try it yourself!

1. Create a folder named interactive-elements.
2. Create an HTML file named number-inputs.html.
3. Create a basic HTML structure and try to add a number input for entering age, price, or any other numeric value.

🎊 What we have learned

• ✅ We learned about HTML number inputs and how to create them using the <input> element with type="number".
• ✅ We explored the attributes of number inputs such as min, max, and step to control the input values.
• ✅ We practiced creating a number input with attributes to limit the range and step size of the input value.
• ✅ We learned about the range slider input using type="range" to allow users to select a value from a specified range.

🚀 What’s Next?

Now next we will learn about HTML Selection Inputs which help users to select options from a dropdown list or multiple choices.