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()提交表单

  
  


function A () {
  if(){
    return false;
  }else {
    document.forms[0].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会继续