Numbers As Spinboxes
Next up: numbers. Asking for a number is, in many ways, trickier than asking for an email or web address. First of all, numbers are more complicated than you might think. Quick: pick a number. â1? No, I meant a number between 1 and 10. 7½? No, no, not a fraction, silly. Ï? Now youâre just being irrational.
My point is, you donât often ask for âjust a number.â Itâs more likely that youâll ask for a number in a particular range, and you may only want certain kinds of numbers within that rangeâmaybe whole numbers but not fractions or decimals, or something more esoteric like numbers divisible by 10. HTML5 has you covered. Letâs look at an example:
<input type="number"
min="0"
max="10"
step="2"
value="6">
Letâs take that one attribute at a time (you can follow along with a live example if you like):
type="number"
means that this is a number field.min="0"
specifies the minimum acceptable value for this field.max="10"
is the maximum acceptable value.step="2"
, combined with themin
value, defines the acceptable numbers in the range:0
,2
,4
, and so on, up to themax
value.value="6"
is the default value. This should look familiar. Itâs the same attribute name youâve always used to specify values for form fields. (I mention it here to drive home the point that HTML5 builds on previous versions of HTML. You donât need to relearn how to do stuff youâre already doing.)
Thatâs the markup side of a number field. Keep in mind that all of those attributes ...
Get HTML5: Up and Running now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.