七、HTML5表单

@(HTML5)[HTML5表单]

[TOC]

七、HTML5表单

新的输入型控件

• email：电子邮件
• tel：电话号码
• url：网页的url（需要带上http(s)://）
• search：搜索引擎
• range：数值控件，特定范围内的数值选择器
  • min
  • max
  • step（步数）
  • value

新的输入控件

number : 只能包含数字的输入框 color : 颜色选择器 datetime : 显示完整日期（chrome） datetime-local : 显示完整日期，不含时区 time : 显示时间，不含时区 date : 显示日期 week : 显示周 month : 显示月

新的表单特性

placeholder : 输入框提示信息 autocomplete : 是否保存用户输入值。默认为on，关闭提示选择off autofocus : 指定表单获取输入焦点 true required : 此项必填，不能为空 Pattern : 正则验证 pattern="\d{1,5}“ Formaction 在submit里定义提交地址

表单验证

validity对象，通过下面的valid可以查看验证是否通过，如果八种验证都通过返回true，一种验证失败返回false oText.addEventListener("invalid",fn1,false); ev.preventDefault() valueMissing : 输入值为空时 返回的是true typeMismatch : 控件值与预期类型不匹配 返回的是true patternMismatch : 输入值不满足pattern正则 返回的是true tooLong : 超过maxLength最大限制 超出的返回的是true rangeUnderflow : 验证的range最小值 rangeOverflow：验证的range最大值 stepMismatch: 验证range 的当前值 是否符合min、max及step的规则 customError 不符合自定义验证 是不是匹配 true setCustomValidity(); 自定义验证 Invalid事件 : 验证反馈 input.addEventListener('invalid',fn,false) 阻止默认验证：ev.preventDefault() formnovalidate属性 : 关闭验证