Form标签属性

测试同事提了个bug，说表单提交不了了，并报了下面的错误。

代码中有隐藏的i输入框设置了required 属性，Chrome浏览器没法focus这个控件，所以会报上面错误

习惯性拿着错误信息Google一下，看到答案是，在form标签中增加novalidate 属性。加上novalidate 属性后，果然错误没有了。于是直接提交代码测试。

没多久，测试同事跑过来说，现在表单没法验证，必填项没有输入，提交表单不会有提示，于是试着把novalidate 属性去掉，结果验证就出来了。

浏览器自动表单验证

一番折腾后明白了表单提交不了，是其他问题导致的，跟novalidate 属性没有关系。那novalidate 属性到底是干啥呢？Google研究一下，整理form属性如下：

---

novalidate：指定浏览器不去验证form表单。（HTML5新增属性）

autocomplete：指定浏览器是否自动完成表单，默认：on，也可以设置autocomplete=off。（HTMl5新增属性）

enctype：指定发送服务器前应该如何对表单数据进行编码。

action：指定表单提交的地址，默认当前页。

method：提交表单使用的HTTP方法，默认：GET。

name：指定识别表单的名称，例如在DOM中使用：document.forms.name。

target：action属性的目标地址，指定在何处打开表单中的action-URL，默认：_seft。

accept-charset：提交表单所使用的字符集，HTML5默认字符集为UTF-8。

---

具体使用方法：

novalidate：

novalidate属性是一个boolean 值属性，novalidate=true，如果form表单数据是不符合要求的，用户想要保存表单数据，可以使用novalidate属性。

下面的例子，设置novalidate，如果input输入text文本类型的值，浏览器不会报错。

E-mail:

  

注意：novalidate 属性也适用于以下类型的 标签：text, search, url, telephone, email, password, date pickers, range 以及 color。

autocomplete：

默认情况下，浏览器能够记住用户通过input框提交的信息，这使得浏览器可以完成自动填充功能。瞬间想到，应该类似于可以看到浏览器的历史记录功能。默认autocomplete=on，如果不想要浏览器记录这些信息，可以设置autocomplete=off。

  First name:

 

注意：autocomplete属性也适用于input标签。

enctype：

默认：application/x-www-form-urlencoded

当method=‘post’时，enctype有以下几种取值：   

application/x-www-form-urlencoded：在发送HTTP请求钱编码所有字符（空格被编码为‘+’，特殊字符被编码为ASCII十六进制字符）

multipart/form-data：不对字符编码，当 input type 是 "file" 时，必须使用该值。

text/plain：空格转换为‘+’，不对特殊字符编码。

  name:

  upload:

 

method：

浏览器通过method属性设置的方法将表单中的数据传送给服务器进行处理，共有两种方法：GET和POST。

method 方法规定如何发送表单数据（form-data）（表单数据会被发送到在 action 属性中规定的页面中）。

可以通过以下方式发送 form-data ：

以 URL 变量 (使用 method="get") 的形式来发送

以 HTTP post (使用 method="post") 的形式来发送

关于 "get" 方法的注释：

该方法将表单数据以名称/值对的形式附加到 URL 中

该方法对于用户希望加入书签的表单提交很有用

在 URL 中放置的数据量是有限制的（不同的浏览器有差别），所以无法确保所有表单数据得到正确地传输

绝不要使用 "get" 方法来传输敏感信息！（密码或其他敏感信息在浏览器地址栏中是可见的）

关于 "post" 方法的注释：

该方法以 HTTP post 事务的方式来传递表单数据

无法将通过 "post" 方法提交的表单加入书签

与 "get" 相比，"post" 方法更健壮更安全，而且 "post" 没有容量限制

target：

target有以下取值：

_blank：在新窗口打开。

_self：默认，在相同的窗口载入action请求。

_parent：在父窗口打开。

_top：在整个窗口中打开。

framename：在指定的框架中打开。

执行下面的代码，切换不同的值，查看效果

  First name:

  Last name:

 

参考：

w3c教程