HTML5 Number Input Type

HTML5 has introduced many input types. The number input type is one of them. In this tutorial, we will learn how to use and customize the number input type. This post will also talk about the advantages of using this new input type.

What is the number input type?

The number input type (<input type=”number”>) is one of the many input types. It gives a numeric input field in an HTML form, which lets you enter numbers in a flexible manner. Using this input type, you can enter a value in two ways — from the keyword and by clicking the little up and down buttons provided in the input field.

Using the number input type

This section shows how to use the number input type.

A simple example:

Consider the following code example to understand how to use the number input type.

Screenshot of the result:

 Html Input Type Number

Using the ‘min’ and ‘max’ attributes:

The ‘min’ and ‘max’ attributes specify the minimum and maximum values respectively. 

Screenshot of the result:

Html Input Type Number

Using the ‘step’ attribute:

The ‘step’ attribute lets you enter values in steps. The code example below allows the user to enter values in step of 5. That means when you click the up button, the value will be incremented by 5 and when the down button is pressed, the value will be decremented by 5.

Advantages of the number input type

There are many advantages of using the number input type. The browsers can enhance the number input to enter numbers easily.
For example, the mobile devices can display the numbers only optimized keyboard for a number field (rather than the full alphabet keyboard).

Customizing the number input type using CSS and JavaScript

In this section, we’re going to see how we can customize the number input type using CSS and JavaScript. Examine the following code snippets.

light

HTML code:

CSS code:

JavaScript code:

Screenshot of the result:

Html Input Type Number

As you can see from the above screenshot, we have got a numeric input field with an improved design.

Comments on this entry are closed.