- form
在过去,表单元素
和表单提交需要的一些控件元素(如
- <form>
,
- <input>
)在 DOM 结构上必须是父子关系,但是在 HTML5 背景下,表单元素和控件元素可以是在页面文档的任何位置,这种特性的实现就是通过使用
- <select>
属性。
- form
关于 HTML5 新增的
属性,我在六年前就介绍过,不过那篇文章是使用
- form
元素示意的。
- <textarea>
您可以狠狠地点击这里: textarea 示意 form 属性 demo
这个 demo 页面的关键 HTML 代码如下示意:
- <form id="contact_form" >...</form>
- 评论:<textarea id="comments" name="comment" form="contact_form"></textarea>
元素在
- <textarea>
元素的外面,而不是祖先和后代的关系,但是,当我们在表单里面填写数据并提交的时候,会发现
- <form>
控件中的数据一起提交了。
- <textarea>
如果
属性作用在按钮上,尤其是带有 submit 性质的表单提交按钮,则最终的行为表现是可能就是提交另外一个
- form
表单。
- <form>
实例说话,您可以狠狠地点击这里: button 按钮的 form 提交别的表单 demo
页面上有两个表单元素,提交按钮在第二个表单元素里面,相关 HTML 代码如下:
- <form id="form1">
- 表单序号:<input name="formIndex" value="1" readonly>
- </form>
- <form id="form2">
- 表单序号:<input name="formIndex" value="2" readonly>
- <input type="submit" value="提交" form="form1">
- </form>
结果,点击提交按钮,提交的是第一个表单,如下图:
此时提交按钮俨然变成了一个 "间谍"。
属性只能作用于具有提交性质的按钮(
- formaction
)上,作用和名称一样,如果通过当前按钮提交表单,在表单提交地址会使用
- type='submit'/'image'
属性值而不是
- formaction
元素的
- form
属性值。
- action
举个简单的例子,续用上面的案例:
- <form id="form1">
- 表单序号:<input name="formIndex" value="1" readonly>
- </form>
- <form id="form2">
- 表单序号:<input name="formIndex" value="2" readonly>
- <input type="submit" value="提交" form="form1" formaction="blank.html">
- </form>
结果,点击提交按钮后,去往的不是的当前页了,而是名为 blank.html 的页面,在本演示中是一个空白示意页面,效果如下图:
眼见为实,您可以狠狠的点击这里: button 按钮 formaction 属性重置表单 action demo
如果当前表单不是通过提交按钮提交?
表单提交,不一定总是通过点击提交按钮,还可以是输入框回车触发,亦或者是 JS
,如果是这类提交,那
- form.submit()
属性还有效吗?
- formaction
如下测试代码:
- <form>
- 表单序号:<input name="formIndex" value="1">(回车试试)
- input type="button" onClick="this.parentElement.parentElement.submit()" value="JS触发">
- input type="submit" value="提交" formaction="blank.html">
- </form>
测试结果如下:
生效。这个比较好理解,一个表单,要想支持回车事件,需要加入一个 submit 性质的提交按钮就可以,其作用本质上就是回车的时候点击了提交按钮(如果在按钮上设置
- formaction
,回车时候会有弹出,可以证明这一点)。
- onClick="alert(0)"
方法触发的提交,则
- submit()
没有对表单提交的
- formaction
进行重置,测试页面表现为提交到当前页面。
- action
眼见为实,您可以狠狠的点击这里: 有 formaction 但表单非按钮提交测试 demo
借助
属性可以实现一个表单内的两个按钮分别提交到不同地址的效果。
- formaction
属性只能作用于具有提交性质的按钮(
- formenctype
)上,作用和名称一样,如果通过当前按钮提交表单,在表单提交地址会使用
- type='submit'/'image'
属性值而不是
- formenctype
元素的
- form
属性值。
- enctype
元素的
- form
属性可以指定提交数据的编码方式。
- enctype
,可以理解为以 url 格式化规则格式化(
- application/x-www-form-urlencoded
开头那些)的字符串数据;
- %
,这是 HTML5 新增编码方式,可以理解为所有表单提交数据以二进制形式传输,于是我们可以 Ajax 直接上传图片等文件信息。通常当有
- multipart/form-data
类型的
- type="file"
文件选择框的时候才使用。
- <input>
,表示纯文本,这个我自己目前并未使用过,套路不详。
- text/plain
由于
属性值不太好测试,因此,就不 show demo 了。
- formenctype
类似的,
属性只能作用于具有提交性质的按钮(
- formmethod
)上,可以覆盖目标
- type='submit'/'image'
元素的
- <form>
属性值(默认为
- method
),例如:
- get
- <form id="form1">
- 表单序号:<input name="formIndex" value="1" readonly>
- </form>
- <form id="form2">
- 表单序号:<input name="formIndex" value="2" readonly>
- <input type="submit" value="提交" form="form1" formmethod="post">
- </form>
此时,点击提交按钮就是 POST 表单,URL 地址后面没有出现查询字符信息,如下截图:
若有兴趣,可以亲自点击感受下,您可以狠狠的点击这里: button 按钮 formmethod 属性重置 demo
是一个布尔属性值,只能作用于具有提交性质的按钮(
- formnovalidate
)上,可以通过此按钮提交的表单不进行原生的数据验证,重置的是
- type='submit'/'image'
元素的
- <form>
属性。
- novalidate
类似的,
属性只能作用于具有提交性质的按钮(
- formtarget
)上,可以覆盖目标
- type='submit'/'image'
元素的
- <form>
属性值(默认为
- target
),例如:
- _self
- <form>
- 表单序号:<input name="formIndex" value="1" readonly>
- <input type="submit" value="提交" formaction="blank.html" formtarget="_blank">
- </form>
此时,blank.html 就在浏览器的新窗口打开啦!
您可以狠狠地点击这里: button 按钮 formtarget 属性重置表单 target demo
点击这里的按钮感受下吧~
属性值
支持的属性值和表单元素的
- formtarget
属性一模一样:
- target
:提交于当前浏览器上下文。默认值(如果不设置)。
- _self
:提交于新的未命名的浏览器上下文,在浏览器中的表现就是新开标签页。
- _blank
:提交于父的浏览器上下文,常见于 iframe 中,如果没有父级浏览器上下文,则效果等同于
- _parent
。
- _self
:提交于顶级浏览器上下文(最祖先的浏览器上下文)。如果没有,则行为表现等同于
- _top
。
- _self
以上~
本文介绍的
,
- formaction
等属性实用价值在于,可以对 JS 触发的表单提交和点击回车触发的表单提交天然区分处理;以及实现同一个表单内控件元素的不同行为处理。
- formtarget
举个例子:
创建一条新数据域修改一条数据,用户需要输入的内容几乎都是一模一样的,这意味新建的表单和修改的表单其实可以共用的,但其中必然还是有一些差异的,举个例子,新增数据的表单
地址可能是
- action
,而修改的可能是
- add.php
。以前我们做法可能是根据场景不同使用 JS 去修改
- edit.php
元素的
- <form>
,同时改变提交按钮,而现在少了一步,只需要控制提交按钮的显隐就可以了:
- action
- <form action="add.php">
- <input type="submit" value="新建">
- <input type="submit" value="修改" formaction="edit.php">
- </form>
除了实现更精简,最大的好处是更加语义化了。
用得少见得少不代表没有用,挖掘其潜力,发挥其价值,省时省力效果好。在 CSS 和 HTML 领域有很多不显山露水,但特殊场景非常好用的特性。虽然这些特性通常都有替代方案(虽然稍微啰嗦了点),好像不掌握也没什么事,加上不是经常使用,学习了不能立即产能,因此很自然觉得有这个闲工夫,还不如去学学一些比较流行高大上的东西。
学习不一定有大用处的基础知识,和学习流行的上层收益迅速的事物实际上是两种不同的投资,一种是低风险长期高收益的长期投资,一种是高风险短期收益高的短期投资。比较建议的投资比例是前 8 后 2,但,但现实世界并不是这样子的,有太多太多人,在行情非常好的时候,不惜下杠杆去风险比较高的股市,正如现在前端形势比较好的时候,全部精力都用来学习各种工具和框架使用,站在未来的角度看,这其实是风险相当高的一件事情。
如果再进一步深入分析,或许就涉及到安全感的问题。例如本文的这些基础知识,由于不确定性,假设我花了 1 个时间去了解,结果之后 2 年做项目都没有遇到适合使用这些属性的场景,那我的时间和精力岂不是白白的浪费掉了,很容易安全感缺失。但是如果我去学习 vue 之类的框架,简历好看了,工作好找了,付出确定有收益,确定性效应让人总是乐于做这样的事情。
所以,虽然我多次在各个场合强调基础知识的重要性,但是人性本身的特点使得绝大多数人都无法在这块坚持下去,因为学习一两个基础知识真的是一点用都没有,你要学习很多,至少要一两百个,才有足够的覆盖率,才能有从量变到质变的变化。
不过,换个角度想,这样其实也好,大浪淘沙,随着时间的不断推移,随着基础的不断累积,以后能和自己竞争的人就越来越少了,厚积薄发,高屋建瓴,越老越吃香,根本不用担心所谓的中年危机,毕竟职业生涯 40 年,几乎所有的 IT 从业人员才刚开始开了个头。
本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。
本文地址: http://www.zhangxinxu.com/wordpress/?p=6335
(本篇完)
来源: http://www.tuicool.com/articles/vIvIFjm