form表单那些事

结论:
1 建议使用button[type=submit]来提交表单,而不是input;
2 只有单行文本控件时,回车会引发表单提交;
3 通过onsubmit事件可阻止表单提交

表单提交方式

input[type=submit] 或input[type=image]

点击提交按钮可以提交
但是有个问题,如果给,提交后的结果为:


Paste_Image.png

注意其中form的URL为./menut.html?key=123&btn=ok. 作为按钮的input控件同时被当做一个表单输入提交给了服务器。那么这个提交按钮到手是交互控件还是数据控件呢?定位是有些不清晰。再加上它的样式难以定制,不可作为其他标签的容器,所以建议不要用input作为表单提交按钮。

button[type=submit]
button的语义很明确,就是一个按钮,不包含数据,作用就是用户交互。但它也有type和value属性。type的默认值是submit(IE下是button),所以点击一个button会提交表单

//最好还是加上type="submit",因为在IE浏览器中button的type默认是button,这意味着它只是一个按钮而不会提交表单

不幸的是,button居然和input[type=submit]一样,可以设置name和value.提交表单时,value也会被作为表单数据提交给服务器。相比较而言,还是建议用button作为交互用的按钮,来提交表单。同时请注意设置type=submit来兼容IE

Enter键提交表单
Enter键是可以提交表单的!分为两种情况:
1 单行文本控件(指的是type为text 而非textarea)回车可以提交表单。
2 只要表单中存在以下列出的任何一种按钮,那么在相应表单控件拥有焦点的情况下,按回车键就可以提交表单(textarea 是个例外)。如果表单中没有提交按钮,按回车键就不会提交表单。






通过form.submit()提交表单

阻止表单提交

1 在表单中加上onsubmit = "return false;" 可以阻止表单提交。

  
//注意此处不能写成 onsubmit="submitFun();"否则将表单总是提交

form表单中陷阱

描述:最近遇到一次处理form数据的过滤,采用了button的onclick事件来检查,发现return false后表单仍然提交了
仔细研究了下onclick, onsubmit, submit集合函数之间的关系和区别

自己写了X(),Y()函数,我们会发现,这几个函数的执行顺序

1) onclick: Y();  
2) onsubmit: X();
3) submit();

也就是说:
只要onclick 未return false 那么就继续执行onsubmit
只要onsubmit未return false那么表单就被提交出去了
正确写法


//X()返回false后,form的submit会被终止

错误写法


//X()返回false后,form的submit会继续

你可能感兴趣的:(form表单那些事)