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教程

你可能感兴趣的:(Form标签属性)