html5:扒一扒input标签的新特性

1，html 4 中的input-type回顾

• button                 按钮
• checkbox             复选框
• file                      上传文件
• hidden                 隐藏表单域
• image                  图片
• password             密码
• radio                   单选框
• reset                   重置表单内容
• submit                 提交表单内容
• text                     文本
• textarea               文本域

以上的这些标签，包含了在现有html4规范中所有的input标签类型，恕不一一演示；

2，html5 中的input标签新type

 

• date                      一个手动选择日期的类型；移动端不支持此类型，做为text类型处理                           
• datetime                一个手动选择日期的类型；移动端同上
• datetime-local         一个手动选择日期的类型；移动端同上
• email                      在移动端，会在输入键盘出现“@”、“.”等email常用符号
• month                     一个手动选择日期的类型；移动端不支持此类型，做为text类型处理   
• number                   有上下箭头指示；移动端只能输入数字和小数点
• range                      可拖动的条状，值为0到100
• time                       一个手动选择时间的类型；移动端不支持此类型，做为text类型处理   
• url                          在移动端，会在输入键盘出现“.com”等url常用符号
• week                       一个手动选择日期的类型；移动端不支持此类型，做为text类型处理 

 网页端表现形式如下图：

手机端表现形式因为手机无法截图，所以不能上传图片，请见谅；

3，html5中的input标签新属性

相对于html4，在html5中，input标签具有的新属性有：

autocomplete 是否使用输入字段的自动完成功能

autofocus 输入字段在页面加载时是否获得焦点

form 输入字段所属的一个或多个表单

formaction 覆盖表单的 action 属性

formenctype 覆盖表单的 enctype 属性

formmethod 覆盖表单的 method 属性

formnovalidate 使用该属性，则提交表单时不进行验证

max/min 规定输入字段的取值范围，仅number与date类型有效

pattern 正则！pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字

placeholder 显示的默认值，如"请输入姓名"

required 指示输入字段的值是必需的