html5 新增 input 的 form 属性, 用于指向特定 form 表单的 id, 实现 input 无需放在 form 标签之中, 即可通过表单进行提交.
- <FORM id=xinzeng>
- ...
- </FORM>
- <INPUT ... form="xinzeng">
type 新增属性:
email,URL,date,time,month,week,number,range,color
input 元素的新增属性:
Autocomplete: 自动完成功能. 记录用户之前输入的内容, 并在下次输入时自动提示完成输入.
属性值: on/off
可以在 form 表单上使用, 对整张表单的所有控件进行自动完成的开关
也可以在 input 上使用, 对特定输入框进行修改.
绝大部分浏览器, 默认开启.
Autofocus: 自动获得焦点. autofocus="autofocus", 只能设置 input 元素自动获得焦点.
Form: 所属表单. 通过 form 表单的 id, 确定此 input 输入哪张表单.
Required: 必填. required="required" 设置 input 必填, 否则阻止提交.
Pattern: 使用正则表达式验证 input 的模式.
数字类型
跟数字强相关的类型, 其中 number,range 在移动端开发时, 会弹出数字键盘, 而 range 是一个范围滑动块.
- <input type='number'>
- <!-- 用于比较精确的纯数字输入类型 -->
- <input type='range'>
- <!-- 用于不是很精确的数字范围 -->
- <input type='tel'>
- <!-- 用于电话号码 -->
日期和时间类型
web 表单常见的字段就是日期和时间, html5 以此来收集这类信息
- <input type='time'>
- <input type='date'>
- <input type='month'>
- <input type='week'>
- <input type='datetime'>
- <input type='datetime-local'>
其他类型 :email,url,color,search
其中一些类型在不同的设备上都会有不同的显示.
- <input type='email'>
- <input type='url'>
- <input type='color'>
- <input type='search'>
placeholder 占位符文本, 以前我们用 JS 来模拟, 获得焦点的时候, 文本消失, 失去焦点并且内容为空时, 文本重现, 现在 html5 自带了这一项功能.
HTML 结构:
<input id='search' type='text' placeholder='search your goods'>
如果想要修改 placeholder 中的文本样式, 那么我们只要给浏览器设置一些样式即可, CSS 结构:
- ::-webkit-input-placeholder{
- color:red;
- font-size:14px;
- }
- ::-moz-placeholder{
- color:red;
- font-size:14px;
- }
autofocus 自动聚焦 ,autofocus 属性可以让表单在加载完成时, 会有一个表单域被默认聚焦或者选中, 但是尽量不要在一个页面上在多个表单域上使用 autofocus, 在一些低版本浏览器上会默认聚焦最后一个含有 autofocus 的表单域, 在大多数浏览器中会聚焦第一个含有 autofocus 的表单域, 这会造成跨浏览器的混乱. 还有我们通常用空格键来滚动页面, 如果页面上有 autofocus 的表单域会阻止这一浏览器的默认行为.
autocomplete 自动完成, 很多浏览器默认提供自动完成功能, 帮助用户输入上次提交过的内容, autocomplete 有两个必备的条件才能够工作, 一是一定要有 form 元素, 二个是表单域上必须要有 name 属性和 name 属性值. 但是, 有些时候我们为了保护隐私, 需要避免自动完成这项功能, 我们开启和关闭这项功能, 只需给它赋值 on 或者 off , 如果不赋值, 默认就是 on, 表示功能开启.
来源: http://www.qdfuns.com/article/51308/57b7cbbf968ff7d6b74ba7b0f7ba38c6.html