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.
Tóm Tắt
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:
** 
**
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:
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
: 45
px
;
height
: 42
px
;
line-height
: 1.65
;
float
: left
;
display
: block
;
padding
: 0
;
margin
: 0
;
padding-left
: 20
px
;
border
: 1
px
solid
#eee
;
}
.
quantity
input
:focus
{
outline
: 0
;
}
.
quantity-nav
{
float
: left
;
position
: relative
;
height
: 42
px
;
}
.
quantity-button
{
position
: relative
;
cursor
: pointer
;
border-left
: 1
px
solid
#eee
;
width
: 20
px
;
text-align
: center
;
color
: #333
;
font-size
: 13
px
;
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
: 1
px
solid
#eee
;
}
.
quantity-button
.quantity-down
{
position
: absolute
;
bottom
: -1
px
;
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:
As you can see from the above screenshot, we have got a numeric input field with an improved design.
