The number is input type is used for specifying numerical value. It is used to collect the number either it is integer or floating point. All known browsers use this as spinner which have up and down arrow at right side of the textbox to increase or decrease the number value. If we specify type=”number” in the type attribute of the tag, number input field is created.
The number input type has following attributes:
- value: The initial value when a page is first loaded.
- step: It specifies how much to change the value when you click on up or down arrows of the control. The default value is 1.
- min: It represents smallest value of the number.
- max: It represents biggest number of the number input.
Browser Support
The number input type is supported by browsers such as Google Chrome 8.0, Opera,Safari, IE.
Syntax of number Input Type
<input type="number" name="some-name" min="0" max="20" step="2"/>
HTML5 Input Type Example
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>number input type</title>
</head>
<body>
<form>
<input type="number" min="2" max="15" step="1" value="0" name="myNumber">
</form>
</body>
</html>
As shown in the above program, we have used number input type which specifies numerical value which is either in integer or floating point. It specifies attributes namely min to represents smallest number , max attribute to specify biggest number and step attribute specifies how much to change the value when you click on up or down arrows of the control, value attribute specifies initial value when page is first loaded and name attribute provides name to form part.
HTML5 Input Type Demo
- Save the file as number_example.html in your system.
- Just open file in the browser, you will see the below picture in the browser. Note that the browser must support HTML5 specification.
When the execution process is completed successfully, we will get the following output:
When we run the program, we will get number starting from 2 to 15, because we have set minimum number to 2 and maximum number to 15. The number will increase or decrease one number as we have set step value as 1.
JSF 2 TextArea Example