首页理论教育HTML5实战宝典：新增type属性

HTML5实战宝典：新增type属性

2023-10-28 理论教育版权反馈

【摘要】：接下来，我们来认识一些新增type属性：1.email输入类型说明：此类型要求键入格式正确的Email地址，否则浏览器是不允许提交的，并会有一个错误信息提示。格式：效果展示如图3-12所示：图3-127.tel输入类型说明：此类型要求输入一个电话号码，换行符会从输入值中去掉。因为不同国家不同地区的电话号码差别明显，所以想要添加更多限制可以使用下一节会讲到的pattern等属性。

接下来，我们来认识一些新增type属性：

1.email输入类型

说明：此类型要求键入格式正确的Email地址，否则浏览器是不允许提交的，并会有一个错误信息提示。此类型必须指定name值，否则无效果。

格式：<input type=email name=email>

错误效果展示（Firefox）如图3-1所示：

图3-1

正确格式展示（Firefox）如图3-2所示。

图3-2

2.URL输入类型

说明：此类型要求输入格式正确的URL地址，否则浏览器是不允许提交的，并会有一个错误信息提示。此类型必须指定name值，否则无效果。

格式：<input type=url name=url>

错误格式展示（Firefox）如图3-3所示：

图3-3

正确格式展示（Firefox）如图3-4所示：

图3-4

3.时间日期相关输入类型

说明：时间日期相关输入类型这一系列表单控件提供了丰富的用于日期选择的表单样式，包括年、月、周、日等。只需要一行代码就可以实现交互性非常强的效果，但遗憾的是目前在Windows系统下仅有Chrome和Opera支持这个类型。

格式：<input type=date name=my_date>

效果展示（Chrome）如图3-5所示：

图3-5

格式：<input type=time name=my_time>

效果展示（Chrome）如图3-6所示：

图3-6

格式：<input type=month name=my_month>

效果展示（Chrome）如图3-7所示：

图3-7

格式：<input type=week name=my_week>

效果展示（Chrome）如图3-8所示：

图3-8

格式：<input type=datetime name=my_datetime>

经测试，datetime类型在任何浏览器中都无效果。

格式：<input type=datetime-local name=my_localtime>(www.chuimin.cn)

选取本地时间，效果展示（Chrome）如图3-9所示：

图3-9

4.number输入类型

说明：用于输入一个数值，可以通过属性设置最小值、最大值、数字间隔、默认值（IE不支持）。

格式：<input type=number max=10 min=0 step=1 value=5 name=number>

max：规定允许的最大值；

min：规定允许的最小值；

step：规定合法的数字间隔；

value：规定默认值；

效果展示（Firefox）如图3-10所示：

图3-10

5.range滑块类型

说明：和前面的number类似，只不过这里是用滑块展示，如果是在移动端展示的话给用户的体验会比较好。

格式：<input type=range max=10 min=0 step=1 value=5 name=val>

max：规定允许的最大值；

min：规定允许的最小值；

step：规定合法的数字间隔；

value：规定默认值；

效果展示（Firefox）如图3-11所示：

图3-11

6.search输入类型

说明：此类型表示输入的将是一个搜索关键字，通过设置results=s可显示一个搜索小图标。

格式：<input type=search result=s>

效果展示（Chrome）如图3-12所示：

图3-12

7.tel输入类型

说明：此类型要求输入一个电话号码，换行符会从输入值中去掉。因为不同国家不同地区的电话号码差别明显，所以想要添加更多限制可以使用下一节会讲到的pattern等属性。

格式：<input type=tel>

8.color输入类型

说明：一个非常炫酷的效果，并且在最新的Firefox、Chrome、Opera浏览器中都支持，可让用户通过颜色选择器选择一个颜色值，以十六进制保存，可以通过value访问到，并且可以自定义颜色组。

格式：<input type=color>

效果展示（Chrome）如图3-13所示：

图3-13