测试同事提了个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文本类型的值，浏览器不会报错。
<form action="" novalidate >
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
注意：novalidate 属性也适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, range 以及 color。
autocomplete：
默认情况下，浏览器能够记住用户通过input框提交的信息，这使得浏览器可以完成自动填充功能。瞬间想到，应该类似于可以看到浏览器的历史记录功能。默认autocomplete=on，如果不想要浏览器记录这些信息，可以设置autocomplete=off。
<form action="/action_page.php" method="get" autocomplete="off">
First name:<input type="text" name="fname">
<input type="submit">
</form>
<input type="text" name="fname" autocomplete="off">
注意：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：空格转换为‘+’，不对特殊字符编码。
<form action="/action_page.php" method="post" enctype="multipart/form-data">
name: <input type="text" name="name"><br>
upload: <input type="file" name="file"><br>
<input type="submit" value="Submit">
</form>
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：在指定的框架中打开。
执行下面的代码，切换不同的值，查看效果
<form action="/action_page.php" method="get" target="_self">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
网友评论