Simple numeric field
An element input with the type=”number” attribute is used to enter numbers. It creates a numeric field that we can customize with the following attributes:
- min: minimum allowed value
- max: maximum allowed value
- readonly: read-only
- required: indicates that this field must have a value
- step: the value to increase the number in the field
- value: default value
Using a numeric field:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <! DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Numeric field in HTML5</ title > </ head > < body > < form > < div class = "form-group" style = "margin-bottom: 15px;" > < label for = "age" >Age: </ label > < input type = "number" step = "1" min = "1" max = "99" value = "10" id = "age" name = "age" /> </ div > < div class = "form-group" style = "margin-bottom: 15px;" > < button type = "submit" >Submit</ button > </ div > </ form > </ body > </ html > |
Here, the numeric field defaults to 10 ( value=”10″), the minimum allowed value that we can enter is 1, and the maximum allowed value is 100. And the attribute step=”1″sets the value to increment by one.
The rendering of this field may differ depending on the browser:
But as a rule, most modern browsers, except IE 11 and Microsoft Edge, have arrows on the right in the input field to increase / decrease the value by the amount specified in the step attribute.
As with the textbox, we can attach a datalist here with a range of possible values:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <! DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Numeric field in HTML5</ title > </ head > < body > < form > < p > < label for = "price" >Price: </ label > < input type = "number" list = "priceList" step = "1000" min = "3000" max = "100000" value = "10000" id = "price" name = "price" /> </ p > < p > < button type = "submit" >Submit</ button > </ p > </ form > < datalist id = "priceList" > < option value = "15000" /> < option value = "20000" /> < option value = "25000" /> </ datalist > </ body > </ html > |
Slider
The slider represents a scale on which we can select one of the values. An element input with the type = “range” attribute is used to create a slider . In many ways, a slider is like a simple field for entering numbers. It also has attributes min, max, step and value:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <! DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Number slider in HTML5</ title > </ head > < body > < form > < p > < label for = "price" >Price Range:</ label > 1< input type = "range" step = "1" min = "0" max = "100" value = "10" id = "price" name = "price" />100 </ p > < p > < button type = "submit" >Submit</ button > </ p > </ form > </ body > </ html > |