Form表单的两个新属性


引子

今天在实习工作中看到了两个新属性,其实一直就在,但是一直眼瞎,没去MDN去搜搜,今天搜了一下。明白了这俩属性。
在这个表单里面的两个以前没见的属性

<form name="upFileForm" method="post" action="/cgi-bin/action" onsubmit="return isUploadLogo();" target="returnMsg" enctype="multipart/form-data">
    <input type="hidden" name="action" value="uploadfile" />
    <input type="file" id="uploadLogo" name="TAGET_FILENAME" value="logo.gif" />
    <input type="submit" id="immUpdate" class="newButtonStyle" name="uploadLogo" value="立即更新" />
</form>
  • enctype属性

method属性值为 post 时, enctype 是提交form给服务器的内容的 MIME 类型,可能的取值有:
application/x-www-form-urlencoded: 如果属性未指定时的默认值。
multipart/form-data: 这个值用于一个 type 属性设置为 “file” 的 <input> 元素。
text/plain (HTML5)这个值可以被 <button>或者 <input> 元素中的 formenctype属性重载(覆盖)。

MDN写的真是好啊
我这个例子中就是设置的是multipart/form-data ,对应的第二个input立即更新的界面.png

  • target 属性

target一个名字或者说关键字,用来指示在提交表单之后,在哪里显示收到的回复。在 HTML 4 里, 这是一个用于 frame 的名字/关键字. 在 HTML5 里, 这是一个用于 browsing context 浏览器上下文 的名字/关键字 (举例来说, 标签页tab, 窗口window, or 或者行内 frame). 如下的关键字含有特别的含义:
_self: 在当前HTML4或HTML5文档页面重新加载返回值。这个是默认值。译注:也就是说如果这个文档在一个frame中的话,self是在当前frame(document)中重新加载的,而不是整个页面(window)。
_blank: 以新的HTML4或HTML5文档窗口加载返回值。
_parent: 在父级的frame中以HTML4或HTML5文档形式加载返回值,如果没有父级的frame,行为和_self一致。
_top: 如果是HTML 4文档: 清空当前文档,加载返回内容;HTML5: 在当前文档的最高级内加载返回值,如果没有父级,和_self的行为一致。
iframename: 返回值在指定frame中加载。
HTML5: 这个值可以被 <button>或者 <input> 元素中的formtarget属性重载(覆盖)。

target和enctype属性.png
不过有疑问的是这里写的是returnMsg是啥意思呢?


文章作者: 吴少林
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 吴少林 !
 上一篇
深挖JS语法第一集 深挖JS语法第一集
从今天开始用重新认识JS,毕竟前端是靠JS吃饭的,开始深挖一下细节,在这个过程中也反思了一下,为啥java没学好。果然是基础不牢,地动山摇啊,古人诚不欺我也! 1. JS的数据类型有哪几种?以前一直说会JS,却连这个问题没好好搞过,给自
2017-12-23
下一篇 
Form表单不能嵌套的大坑 Form表单不能嵌套的大坑
07年就有很多人问的大坑,我今天遇到啦 StackOverflow上07年的这个问题就很火 Form表单不可以嵌套 sf 上都给出了w3c的form标准 国内的CSDN也给出了可行的解决方案1 解决方案2 documen
2017-12-20
  目录