H5表单

# 新增的表单控件的类型

回顾：

1
2

<input type="text|password|radio|checkbox|image|file|hidden|button|reset|submit">
H5在以上的基础上新增了以下一些新的属性：

input 新的属性:

​ email – 邮箱
​ url — 地址、网站
​ number -- 数字，年龄，价格等
​ tel — 电话 | 手机
​ range — 滑块，区间
​ Date pickers (date, month, week, time, datetime, datetime-local) 日期选择控件
​ search 搜索
​ color 颜色，拾色器

PC 端，在低版本浏览器下存在严重的兼容性问题

IE : 传统的 IE，都不支持

​ edge 大部分支持

# 新增的表单属性

1. autocomplete
   自动完成，自动填充内容

   不靠谱，结果不太能预料 - 用于 form 标签

2. novalidate
   不验证表单，不靠谱的属性 2 - 用于 form 标签

3. placeholder
   提示文字占位符。- 用于 input 标签

4. min,max,step
   最小值，最大值，增量，主要用于 number，range 还有日期控件上

5. autofocus - 用于 input 标签
   自动让表单控件获得焦点。增加用户体验的
   一般加在核心控件上，只会在一个控件上生效

6. required - 用于 input、textarea 标签等
   让我们少写 JS 代码。即非空作用
   哪里需要非空验证，就写哪里

7. pattern 规则 - 用于 input、textarea 标签等
   写正则表达式，可以直接在该属性上写

   1 2	<input type="tel" required pattern="正则表达式"> <input type="tel" required pattern="^1[3,4,5,6,7,8,9]\d{9}">

8. list
   作用：绑定 datalist

# 新增的表单标签

只学一个，datalist, 用来实现跟 select 一样的效果。

1
2
3
4
5
6
7

//点击输入框时，会自动出现下拉框
<input list="mylist">
<datalist id="mylist">
	<option>选择工作</option>
    <option>IT</option>
    <option>金融</option>
</datalist>

# 总结

​ 1、不同的控件在不同的浏览器下显示的外观可能会不一样，如果要统一外观，请使用 CSS
​ 2、本身是不具备表单验证的功能的，需要借助表单属性：pattern 和 required 属性
​ 3、老版本浏览器不支持新的 type 类型，不会报错，而是将其转为普通的控件看待（text）
​ 4、移动端无兼容性问题，大胆放心的使用。PC 端则做好使用 JS 实现的准备