HTML5 Number Input Type

As we all know, HTML5 has actually presented a variety of brand-new input types. Among them, there is a "number" type. It is simple to understand, the "number" type is a form field that allows numeric input. You can have a number input field as a spinner and you have an up and down arrow at the right of the textbox to increase or reduce the number worth.

So what occurs in Chrome if we try to go into a decimal number and send the form? Chrome will appear a recognition mistake. Well in fact it's not a bug. Actually, the type field is acting as defined by the W3C.

In the following part, we will introduce how to use and set the number input type. Meanwhile, you will also know about the advantages of using this brand-new input type.

Number Input Type

The number input type (<input type="number">) is among the many input types, which provide a numeric input field in an HTML kind. It lets you go into numbers in a flexible manner. Utilizing this input type, you can input a value in 2 ways which are from the keyword and by clicking the little up and down buttons offered in the input field. Here, we provide a basic example to demonstrate 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>

Number Input Type Advantages

There are lots of benefits of using the number input type. The browsers can improve the number input to get in numbers easily. For instance, mobile phones can display numbers with just an enhanced keyboard for a number field.

How to Customize the Number Input Type Using CSS

The following example shows you how to customize the number input type using CSS.

.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%;
}


Leave a reply



Submit