测试同事提了个bug,说表单提交不了了,并报了下面的错误。
习惯性拿着错误信息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文本类型的值,浏览器不会报错。
注意:novalidate 属性也适用于以下类型的 标签:text, search, url, telephone, email, password, date pickers, range 以及 color。
autocomplete:
默认情况下,浏览器能够记住用户通过input框提交的信息,这使得浏览器可以完成自动填充功能。瞬间想到,应该类似于可以看到浏览器的历史记录功能。默认autocomplete=on,如果不想要浏览器记录这些信息,可以设置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:空格转换为‘+’,不对特殊字符编码。
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:在指定的框架中打开。
执行下面的代码,切换不同的值,查看效果
参考:
w3c教程