3.4 数值类型的input标签
本节介绍HTML 5表单为input标签设计的下一个全新的type类型—数值（Number）类型。设置成Number类型的input标签可以在表单提交时自动验证其中的内容是否为合法的数值类型。
下面我们看一段在HTML 5表单中使用数值类型的代码，这段代码（参见源代码chapter03/ch02-HTML 5form-input-number.html文件）给出一种使用Number类型的input标签的方法。
【示例3-3】数值类型的input标签的使用
01 <!DOCTYPE html>
02 <html lang="zh-cn">
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <script type="text/css">
06 label {
07 margin: 4px;
08 width: 96px;
09 text-align: justify;
10 }
11 input {
12 margin: 4px;
13 }
14 </script>
15 <title>HTML 5表单之数值类型input标签</title>
16 </head>
17 <body>
18 <!-- 添加文档主体内容 -->
19 <h3>HTML 5表单之数值类型input标签</h3>
20 <!-- 添加文档主体内容 -->
21 <form action="#" method="get" autocomplete="on">
22 <label for="month">月份:</label><br>
23 <input type="number" id="month" min="1" max="12" step="1" value="1"
/><br/>
24 <label for="day">日期:</label><br>
25 <input type="number" id="day" min="1" max="31" step="1" value="1"
/><br/>
26 <label for="year">年份:</label><br>
27 <input type="number" id="year" min="2016" max="2024" step="4"
value="2020" />
28 </form>
29 </body>
30 </html>
在这段HTML代码中，定义了一个form表单及3个input标签。下面我们详细介绍。
第21～28行代码通过form标签定义了一个HTML 5表单，其中action属性定义为提交到当前页面，method属性定义为"get"方式。
第22～23行代码定义了第一个type="number"类型的input标签，用于输入月份。第23行代码定义Number类型的input标签时还增加了min、max、step和value属性的定义，其中min属性用于定义最小数值（月份最小值为1），max属性用于定义最大数值（月份最大值为12），step属性用于定义步长（步长值为1），value属性用于定义初始值。
第24～25行代码定义了第二个type="number"类型的input标签，用于输入日期。第25行代码定义Number类型的input标签时，min属性用于定义最小数值（日期最小值为1），max属性用于定义最大数值（日期最大值为31），step属性用于定义步长（步长值为1），value属性用于定义初始值。
第26～27行代码定义了第三个type="number"类型的input标签，用于输入年份。第27行代码定义Number类型的input标签时，min属性用于定义最小数值（年份最小值为2016），max属性用于定义最大数值（年份最大值为2024），step属性用于定义步长（步长值为4，表示只支持闰年），value属性用于定义初始值（为2020年）。
运行测试这个页面，效果如图3.6所示。
理论上，使用input标签右侧的上下箭头调整数值是不会超出我们定义的数值范围的，步长也会按照设定值调整。但是，如果我们手动输入了不合法的数值，HTML 5表单就会提醒出错了，页面效果如图3.7所示。从图中可以看到，当用户在数值类型的input标签中输入超出范围的不合法的数值时，该input标签的边框会自动加粗变成红色，提示用户输入的数值有误。
图3.6 数值类型的input标签的使用（1）
图3.7 数值类型的input标签的使用（2）