HTML.form.guide

HTML5 Number Input Type

html input type number decimal html5 number 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.

<!DOCTYPE html>
<html>
<head>
    <title>Number Input Type</title>
</head>
<body>
    <form action="your_action_page.php">
        <input type="number" name="apples">
        <input type="submit">
    </form>
</body>
</html>

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.

<form action="your_action_page.php">
<input type="number" name="apples" min="0" max="10">
<input type="submit">
</form>

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.

<form action="your_action_page.php">
<input type="number" name="apples" step="5">
<input type="submit">
</form>

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.

HTML code:

<div class="quantity">
<input type="number" min="1" max="9" step="1" value="1">
</div>

CSS code:

.quantity {
position: relative;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button
{
-webkit-appearance: none;
margin: 0;
}

input[type=number]
{
-moz-appearance: textfield;
}

.quantity input {
width: 45px;
height: 42px;
line-height: 1.65;
float: left;
display: block;
padding: 0;
margin: 0;
padding-left: 20px;
border: 1px solid #eee;
}

.quantity input:focus {
outline: 0;
}

.quantity-nav {
float: left;
position: relative;
height: 42px;
}

.quantity-button {
position: relative;
cursor: pointer;
border-left: 1px solid #eee;
width: 20px;
text-align: center;
color: #333;
font-size: 13px;
font-family: "Trebuchet MS", Helvetica, sans-serif !important;
line-height: 1.7;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

.quantity-button.quantity-up {
position: absolute;
height: 50%;
top: 0;
border-bottom: 1px solid #eee;
}

.quantity-button.quantity-down {
position: absolute;
bottom: -1px;
height: 50%;
}

JavaScript code:

jQuery('<div class="quantity-nav"><div class="quantity-button quantity-up">+</div><div class="quantity-button quantity-down">-</div></div>').insertAfter('.quantity input');

jQuery('.quantity').each(function () {

    var spinner = jQuery(this),

        input = spinner.find('input[type="number"]'),

        btnUp = spinner.find('.quantity-up'),

        btnDown = spinner.find('.quantity-down'),

        min = input.attr('min'),

        max = input.attr('max');

    btnUp.click(function () {

        var oldValue = parseFloat(input.val());

        if (oldValue >= max) {

            var newVal = oldValue;

        } else {

            var newVal = oldValue + 1;

        }

        spinner.find("input").val(newVal);

        spinner.find("input").trigger("change");

    });

    btnDown.click(function () {

        var oldValue = parseFloat(input.val());

        if (oldValue <= min) {

            var newVal = oldValue;

        } else {

            var newVal = oldValue - 1;

        }

        spinner.find("input").val(newVal);

        spinner.find("input").trigger("change");

    });

});

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.

Categories