HTML 5 Input Number Control
HTML5 Basics - Part 18
Forward: In this part of the series, we look at the HTML 5 input control into which the user should type only a number.
By: Chrysanthus Date Published: 22 Jul 2012
Introduction
Note: If you cannot see the code or if you think anything is missing (broken link, image absent, etc), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.
Kind of Number typed
The user can type a whole number (integer) or a number with a decimal point.
Syntax
The basic input element for a number is:
<input type = "number" name = "somename">
All input elements are single tag elements. Input text elements as well as the input number element can have the value attribute for the initial value (in this case initial number).
Try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Input Number Control</title>
</head>
<body>
<input type = "number" name = "myno" value="56.48">
</body>
</html>
max and min Attributes
The input text number has attributes whose names are, min and max. The min attribute indicates the minimum value that can be typed by the user into the number control field. The max attribute, on the other hand, indicates the maximum number that can be typed into the number field. So you can have a tag like,
<input type="number" name="myno" value="50" min="10" max="90">
The value, min and max attributes are optional like most attributes in HTML.
There is more to the input number control than what I have given you above. However what I have given you will take you a long way.
We stop here and continue in the next part of the series.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT