html5新增表单控件和表单属性

Forms

新的输入型控件

email : 电子邮箱文本框，跟普通的没什么区别 当输入不是邮箱的时候，验证通不过 移动端的键盘会有变化

输入的不是邮箱，点击提交后会有提示

tel : 电话号码 tel的功能主要在移动端，一个键盘的切换

url   :   网页的URL

search : 搜索引擎 —chrome下输入文字后，会多出一个关闭的X

range : 特定范围内的数值选择器 min、max、step( 步数 ) 例子 : 用JS来显示当前数值

<form>

　　<input type=“range" step="2" min="0" max="10" value="2"/> <input type="submit" />

</form>

number : 只能包含数字的输入框

<form>

　　<input type=“number" />

　　<input type="submit" />

</form>

color  :  颜色选择器

datetime  :  显示完整日期

Opera浏览器下作用，其他浏览器用date

datetime-local  :  显示完整日期 不含时区

time : 显示时间，不含时区

date  :    显示日期

week  :    显示周

month  :  显示月

placeholder : 输入框提示信息

<form>

　　<input type=“type" placeholder= "输入4~16个字符“ />

　　<input type="submit" />

</form>

autocomplete : 是否保存用户输入值 默认为on，关闭提示选择off

设置为off 后 再输入的话就不会有弹出之前 输入的提示

autofocus  :  指定表单获取输入焦点

<form>

　　<input type=“text" name= " uesr“ autofocus />

　　<input type=“password" name= " password“ />

　　<input type=“submit" />

</form>

required  :  此项必填，不能为空

<form>

　　<input type= "text" name= "user" required/>

　　<input type= "password" name= "password" required/>

　　<input type= "submit“ / >

</form>

pattern : 正则验证 pattern="\d{1,5}“

formaction 在submit里定义提交地址

<form>

　　<input type= "text" name= "user" pattern= " \d{1,5}" />

　　<input type= "submit" value= "提交“ />

　　<input type= "submit" value= "保存至草稿箱“ formaction="www.baidu.com" />

</form>

表单验证：

　　

validity对象，通过下面的valid可以查看验证是否通过，如果八种验证都通过返回true，一种验证失败返回false

oText.addEventListener("invalid",fn1,false); ev.preventDefault() ; 阻止默认事件

valueMissing : 输入值为空时

typeMismatch : 控件值与预期类型不匹配

patternMismatch : 输入值不满足

pattern正则

tooLong : 超过maxLength最大限制

rangeUnderflow : 验证的range最小值

rangeOverflow：验证的range最大值

stepMismatch: 验证range 的当前值 是否符合min、max及step的规则

customError 不符合自定义验证

setCustomValidity(); 自定义验证

 addEventListener()绑定事件象addEventListener()含三参数事件名称另事件执行函数事件捕获obj.addEventListener("click",function(){},true/false);