HTNL5智能表单(新的表单类型、属性、虚拟键盘适配)

3. 智能表单

3.1. 新的表单类型

• email - 限定输入内容为邮箱地址，表单提交时会校验格式
• url - 限定输入内容为URL，表单提交时会校验格式
• number - 限定输入内容为数字，表单提交时会校验格式
• range - 数值范围选择器
• Date Pickers - 日期时间选择器
  • 样式不能修改，移动端用的比较多，因为移动端显示的是系统的时间或日期选择器
  • date - 选取日、月、年
  • month - 选取月、年
  • week - 选取周和年
  • time - 选取时间（小时和分钟）
  • datetime - 选取时间、日、月、年，浏览器兼容性不好，效果等同于datetime-local
  • datetime-local - 选取本地时间、日、月、年
• search - 搜索域，语义化，表示定义搜索框

3.2. 新的表单属性

• form 上使用的新属性
  • autocomplete 设置整个表单是否开启自动完成 on|off
  • novalidate 设置H5的表单校验是否工作 true 不工作 不加该属性代表校验
• input 上使用的新属性
  • autocomplete 单独设置每个文本框的自动完成
  • autofocus 设置当前文本域页面加载完了过后自动得到焦点
  • form 属性是让表单外的表单元素也可以跟随表单一起提交
  • form overrides
    • formaction 在submit上重写表单的特定属性，当点击当前submit时会以当前值使用
    • formenctype,
    • formmethod,
    • formnovalidate,
    • formtarget
  • list 作用就是指定当前文本框的自动完成列表的数据 datalist 在界面上是看不见的，只是用于定义数据列表的
  • min / max / step
    • min max 限制值的范围，但是不会再输入时限制，提交时校验，
    • step设置的是每次加减的增量
    • 主要使用在number range datepicker上
  • multiple
    • 文本域的多选
  • pattern
    • 设置文本框的匹配格式（正则）
  • placeholder
    • 文本框占位符
  • required
    • 限制当前input为必须的

3.3. 虚拟键盘适配

• 在移动端中，我们可以通过不同的表单类型控制弹出的键盘类型

3.4. 关于什么时候使用H5的新特性，能不能使用新特性的问题

• 无伤大雅的地方直接用
  • 比如一个文本框，加上placeholder就具备占位文本提示功能，浏览器不支持也不会报错，那就可以直接使用
  • 再比如<input type="email">，如果浏览器不支持，默认会显示文本框，那也可以直接用。