Number input in HTML5 Forms

Number input in HTML5 Forms, number type indicates to the browser that the field is expecting numeric input. In this article you can learn more about number input type field. This field type can also be used with the min, max, and step attributes to provide additional UI features to help the user select a number. Browsers that support this type can also validate the field’s value to ensure that it is a valid number.

Code for adding simple number input field.
[html] <input type="number" name="number1" value="5"/>

Number input field with min and max values, if you want to limit value by a minimum and maximum value then we can use min, max attributes for number field.
[html] <input type="number" name="number2" min="2" max="12" value="5"/>

Number input field with step. If you want to step increment then we can use step attribute for number input field.
[html] <input type="number" name="number3" value="5" step="5"/>

Number input field with min, max and step. You can combine all the above attributes that means min, max and step. After applying all these attributes it will have minimum value, maximum value and step to increase it by a step.
[html] <input type="number" name="number4" min="2" max="12" step="2" value="6"/>

Number input field in fractions with min, max and step. And last type we can add fractions to these number fields. If you want to use it for fractions, you can use this type.
[html] <input type="number" name="number5" min="0.0" max="2.0" step="0.2" value="0.8"/>

These are different types for using number input field type in HTML5. If you want to know other input type fields Read this -> HTML5 Form new input field types. If you want to know about form validations in HTML5 read this -> HTML5 form validation

Vivek Vengala

Vivek Vengala is a Online Entrepreneur, Web Developer from Hyderabad India.