HTML5新增的表单属性
from标记的新属性
- autocomplete属性
autocomplete:on|off
属性规定form标记或类型为text、search、url、tel、email、password、date pickers、range、color的input标记是否具有自动完成的功能
效果:当表单元素设置了自动完成功能后,会记录用户输入过的内容,双击表单元素会显示历史输入 - novalidate属性
novalidate:true|false
属性规定在提交表单时不进行验证form或类型为text、search、url、tel、email、password、date pickers、range、color的input标记
input标记的新属性
autocomplete、autofocus、form、form overrides (formaction、formenctype、formmethod、formnovalidate、formtarget)、height、width、list、min、max、step、multiple、pattern(regexp)、placeholder、required
- height 和 width属性
只适用于image类型的input标记的的图像高度和宽度 - form属性
规定输入域所属的一个或多个表单。form属性必须引用所属表单的id - list属性
规定输入域的datalist。
list属性适用于text、search、url、tel、email、password、date pickers、range、color的input标记
鼠标盘旋在输入域上时,并获得焦点后,单击该域会弹出下拉列表选项,简短的提示会显示在输入域上。 - placeholder属性
提供一种提示,描述输入域所期待的值 - autofocus属性
在页面加载时,该域会自动获得焦点。
适用于所有的input标记类型
设置方法:autofocus=“autofocus” 或 直接使用该属性autofocus - required属性
必须在提交之前填写输入域(不能为空)
适用于text、search、url、tel、email、password、date pickers、number、checkbox、radio、file的input标记
设置方法:required=“required” 或 直接使用该属性required - min、max和step属性
max:输入域内所允许的最大值
min:输入域内所允许的最小值
step:为输入域内规定合法的数字间隔(例如:step=“5”,则合法的数为-5、0、5、10等等)
适用于类型为date pickers、number、range的input标记 - multiple属性
输入域中课选择多个值
适用于类型为email、file的input标记 - form overrides 表单重写属性
- formaction:重写表单的action属性
- formenctype:重写表单的enctype属性
- formmethod:重写表单的method属性
- formnovalidate:重写表单的novalidate属性
- formtarget:重写表单的target属性
适用于submit和image的input标记
- pattern属性
用于验证input域的模式(pattern)
适用于text、search、url、tel、email、password的input标记
属性值为正则表达式
HTML5新增的表单元素
HTML5新增output、keygen、datalist等表单元素
标记名称 | 描述 |
| 定义不同类型的输出,如脚本的输出 |
| 用于表单的密钥对生成器字段 |
| 定义选项列表。与input配合使用,来定义input可能的值 |
- output标记
该标记有for、form、name属性
- for:用于描述计算中使用的元素与计算结果之间的关系,其值为每个元素的id值,多个id值用空格分开
- form:用于定义输入字段所属的一个或多个表单
- name:用于定义对象的唯一名称(表单提交时使用)
- keygen标记
用来提供一种验证用户的可靠方法。
当提交表单时,会生成两个键:一个是私钥,一个是公钥。
私钥存储于客户端,公钥则会被发送到服务端。
公钥可用于之后验证用户的客户端证书。 - datalist标记
用来规定input标记可能的选项列表。
一般使用input标记的list属性来绑定datalist元素
HTML5新增的input类型
input——Data Pickers(日期选择器)
- data——选取日、月、年
- month——选取月、年
- week——选取周和年
- time——选取时间(小时和分钟)
- datetime——选取时间、日、月、年(UTC时间)
- datetime-local——选取时间、日、月、年(本地时间)
示例:
<fieldset>
<legend align="center">新生报到须知</legend>
开学日期: <input type="date"><br>
开学周:<input type="week"><br>
开学月:<input type="month"><br>
交费时间:<input type="time"><br>
日期与时间:<input type="datetime"><br>
本地日期与时间:<input type="datetime-local">
</fieldset>
input类型:color
<input type="color">
从拾取器拾取颜色
input类型:tel
<input type="tel">
定义输入电话号码字段
input类型:email
用于包含e-mail地址的输入域。
在提交表单时,会自动验证email域的值是否合法有效
input类型:number
用于包含数值的输入域
属性 | 说明 |
disabled | 输入字段禁用 |
max | 最大值 |
maxlength | 字段的最大字符长度 |
min | 最小值 |
patten | 验证输入字段的模式 |
readonly | 只读 |
required | 输入字段的值是必需的 |
size | 字段可见字符数 |
step | 输入字段的合法数字间隔 |
value | 默认值 |
input类型:range
用于包含一定范围内数字值的输入域
range类型显示为滑动条
input类型:search
用于搜索域,例如站点搜索或Google搜索
input类型:url
用于包含URL地址的输入域
在提交表单时,会自动验证url域的值