Question

HTML4.01 form 表单复习

• input 表单 type 属性值
  • type="text" 单行文本输入框
  • type="password" 密码（ maxlength="" ）
  • type="radio" 单项选择（ checked="checked" ）
  • type="checkbox" 多项选择
  • type="button" 按钮
  • type="submit" 提交
  • type="file" 上传文件
  • type="reset" 重置

HTML5 智能表单

• input 表单 type 属性值：
  • type = "email" 限制用户输入必须为 Email 类型
  • type="url" 限制用户输入必须为 URL 类型
  • type="date" 限制用户输入必须为日期类型
  • type="datetime" 显示完整日期 含时区
  • type="datetime-local" 显示完整日期 不含时区
  • type="time" 限制用户输入必须为时间类型
  • type="month" 限制用户输入必须为月类型
  • type="week" 限制用户输入必须为周类型
  • type="number" 限制用户输入必须为数字类型
  • type="range" 生成一个滑动条
  • type="search" 具有搜索意义的表单 results="n" 属性
  • type="color" 生成一个颜色选择表单
  • type="tel" 显示电话号码

Input 类型 - Date Pickers（日期选择器）

• ** HTML5 拥有多个可供选取日期和时间的新输入类型：
• date 选取日、月、年
• month 选取月、年
• week 选取周和年
• time 选取时间（小时和分钟）
• 以下两个没有作用
  • datetime 选取时间、日、月、年（UTC 时间）
  • datetime-local 选取时间、日、月、年（本地时间）

HTML5 新增表单属性

• required: required 内容不能为空
• placeholder: 表单提示信息
• autofocus: 自动聚焦
• pattern: 正则表达式 输入的内容必须匹配到指定正则范围
• autocomplete: 是否保存用户输入值
  • 默认为 on ，关闭提示选择 off
• formaction: 在 submit 里定义提交地址
• datalist: 输入框选择列表配合 list 使用 list 值为 datalist 的 id 值
• output: 计算或脚本输出

表单验证

• validity 对象，通过下面的 valid 可以查看验证是否通过，如果八种验证都返回 true ,一种验证失败返回 false
  • oText.addEventListener("invalid",fn1,false)
  • ev.preventDefault() : 阻止默认事件
  • valueMissing : 当输入值为空的时候，返回 true
  • typeMismatch : 控件值与预期不吻合，返回 true
  • patternMismatch : 输入值不满足 pattern 正则，返回 true
  • cusomError
    • setCustomValidity()