HTML5学习-1-form表单

最新推荐文章于 2024-10-04 22:08:48 发布

原创最新推荐文章于 2024-10-04 22:08:48 发布 · 551 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #HTML5

前端基础专栏收录该内容

39 篇文章

订阅专栏

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。

效果：必填项；