文章内容大部分都引用于W3C,仅供笔者自己使用参考。
1.input标签新增type值以及浏览器支持情况
2.新增type值中常用的
2.1 Input 类型 - email
email 类型用于应该包含 e-mail 地址的输入域。
在提交表单时,会自动验证 email 域的值。
备注:默认email只做了@匹配,对于长度,com,cn, [ . ]等都没做处理
如下图所示
实例
E-mail: <input type="email" name="user_email" />
2.2 Input 类型 - Date Pickers(日期选择器)
HTML5 拥有多个可供选取日期和时间的新输入类型:
date - 选取日、月、年month - 选取月、年week - 选取周和年time - 选取时间(小时和分钟)datetime - 选取时间、日、月、年(UTC 时间)datetime-local - 选取时间、日、月、年(本地时间)下面的例子允许您从日历中选取一个日期:
使用场景:生日、入职日期、看病日期记录、日记等等
type为date时视图
实例
Date: <input type="date" name="user_date" />
2.3 Input 类型 - search
search 类型用于搜索域,比如站点搜索或 Google 搜索。
search 域显示为常规的文本域。
实例
Date: <input type="search" name="user_date" />