目录
Input类型
相比传统的H4中的<input type/>,新增了几种类型:
表单元素
datalist效果,类似于在下拉列表中,通过用户输入来自动补齐的效果;
keygen 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。
output 元素用于不同类型的输出;
表单属性<input/>新属性
autocomplete属性
autocomplete属性规定form或input域应该拥有自动完成功能。
注释:autocomplete适用于<form>标签,以及以下类型的 <input>标签:text, search, url, telephone, email, password, datepickers, range 以及 color。
效果:就是你在表单输入的信息,再次按F5刷新页面后,直接双击表单输入项,你之前输入的所有信息会以下拉列表形式展示在你面前;
autofocus属性
autofocus属性规定在页面加载时,域自动地获得焦点。
注释:autofocus 属性适用于所有<input>标签的类型。
效果:当页面加载完毕之后,双标光点自动落在对应的输入框中;
form属性
form属性规定输入域所属的一个或多个表单。
注释:form属性适用于所有<input>标签的类型。
form属性必须引用所属表单的id,如需引用一个以上的表单,请使用空格分隔的列表。
效果:按照HTML4语法规定,<form/>提交时只包含<form/>标签包裹的内容,而到了HTML5这里,通过form属性,可以把标签定义在<form/>外面,也能达到HTML4的提交效果;
表单重写属性
表单重写属性(form override attributes)允许重写form元素的某些属性设定,这些属性对于创建不同的提交按钮很有帮助,表单重写属性有:
①formaction - 重写表单的 action 属性
②formenctype - 重写表单的 enctype 属性
③formmethod - 重写表单的 method 属性
④formnovalidate - 重写表单的 novalidate 属性
⑤formtarget - 重写表单的 target 属性
注意:表单重写属性适用于以下类型的<input>标签:submit和 image;
效果:假如有2个按钮:“保存为草稿”、“发布博客”,这2个按钮对应的URL不同,那么,按照HTML4的方法,你需要编写对应的onsubmit函数来修改form对象的action属性,到了HTML5这里,借助formaction重写属性,直接省略了之前的onsubmit函数;
height和width属性
height和width属性规定用于<input type="image"/>标签的图像高度和宽度,且height和width属性只适用于<input type="image"/>标签;
list属性
list属性规定输入域的datalist;list属性适用于以下类型的 <input> 标签:text, search, url, telephone, email, date pickers, number, range 以及 color。
效果:传统<select/>只能通过下拉去挨个寻找,而<datalist/>既可以提供下拉挨个去找的功能,还能自己还能提供模糊匹配的功能,只不过<datalist/>需要<input/>来输入条件,然后通过list属性来实现<datalist/>与<input/>绑定;
min、max和step属性
min、max和step属性用于为包含数字或日期的input类型规定限定;
max属性规定输入域所允许的最大值;
min属性规定输入域所允许的最小值;
step属性为输入域规定合法的数字间隔(通俗理解就是输入的数字必须能整除step)。
min、max和step属性适用于以下类型的<input>标签:date pickers、number以及range;
效果:感觉暂时没什么用,特别是step,每次输入的数字必须整除step,个人觉得应用场景比较少,但这个date pickers可能用的多;
multiple属性
multiple属性规定输入域中可选择多个值,multiple属性适用于以下类型的<input>标签:email和file。
效果:在HTML4时代,<input type=”file”/>的时候,一个<input/>一次性只能选择一个文件,这里到了HTML5,则可以一个<input/>选择多个文件;
novalidate属性
novalidate属性规定在提交表单时不应该验证form或input域。
novalidate属性适用于<form>以及以下类型的<input>标签:text, search, url, telephone, email, password, date pickers, range 以及 color.
效果:<input type="email" />,当你输入不符合E-mail规范时,则HTML5则会提示你输入邮件地址,而通过这个属性,则把这个校验规则直接取消掉;
pattern属性
pattern属性规定用于验证input域的模式(pattern)。
模式(pattern)是正则表达式,就是把JS中正则表达式放到了这个属性中,pattern 属性适用于以下类型的<input>标签:text, search, url, telephone, email以及password。
效果:就是把JS中的正则表达式搬运到这个属性上了;
placeholder属性
placeholder属性提供一种提示(hint),描述输入域所期待的值,placeholder属性适用于以下类型的<input>标签:text, search, url, telephone, email 以及 password;
提示(hint)会在输入域为空时显示出现,会在输入域获得焦点时消失;
效果:就是提示;
required属性
required 属性规定必须在提交之前填写输入域(不能为空)。
required 属性适用于以下类型的<input>标签:text, search, url, telephone, email, password, date pickers, number, checkbox, radio以及file。
效果:必填项;