form元素与表单提交

这里我们介绍一下form元素与表单提交方面的知识。

form元素

form元素的DOM接口是HTMLFormElement，继承自HTMLElement，因而它与其他的HTML元素拥有相同的默认属性，不过它自身还有几个独有的属性和方法：

属性值	说明
accept-charset	服务器能够处理的字符集，多个字符集用空格分割
action	接受请求的URL，该值可以被form元素中的input或button元素的formaction属性覆盖
elements	表单中所有控件集合(HTMLCollection)
enctype	请求的编码类型，该值可以被form元素中的input或button元素的formenctype属性覆盖
length	表单中控件的数量
method	要发送的HTTP请求类型，通常是“get”或“post”，该值可以被form元素中的input或button元素的formmethod属性覆盖
name	表单的名称
reset()	将所有表单域重置为默认值
submit()	提交表单
target	用于发送请求和接收响应的窗口名称，该值可以被form元素中的input或button元素的formtarget属性覆盖
autocomplete	是否自动补全表单元素

提交按钮

在form中加入一个提交按钮，便可使用户得以提交表单。

下列三种按钮皆可在点击时触发表单的submit事件：

<input type="submit" />

<button type="submit"></button>

<input type="image" />

规范中button元素的type默认值是submit，但是在IE678下默认值是button，所以从兼容性考虑有必要为button元素手动加上type="submit"属性。

submit事件

初心者可能会认为表单提交是提交按钮的click事件触发，其实不然，按钮元素的click事件与表单的submit事件在不同的浏览器中执行顺序不一，所以为了能准确控制表单提交事件，我们会选择在表单的submit事件中执行验证等操作。

form.addEventListener('submit', function (e) {
  if (valid()) {
    ...
  } 
  e.preventDefault()
})

当form元素中没有上述的三个按钮中任何一个的时候，用户将无法提交表单（回车键也无效），此时可以利用form元素特有的submit()方法执行提交表单，需要注意的是调用submit()方法并不会触发form元素的submit事件，表单的验证等操作应该在调用submit()方法之前。

if (valid()) {
  form.submit()
}

表单提交与用户体验

基于现在流行的Ajax+跨域POST（CORS）技术，我们很可能不使用form元素直接向服务器提交数据。这虽然可行，但在大多数情况下存在着体验劣化现象。

快捷键提交

在没有form元素包裹的情况下，即使当前页面的焦点在表单元素上，按回车键也不会触发表单提交，对于用户而言，需要从键盘控制切换到鼠标/手势控制，破坏了原有的流畅度。解决方法最简单的就是在外层用一个form元素包裹，并且确定form元素中起码有一个提交按钮。此时当表单中的输入域得到焦点时，用户按回车键便会触发提交。

浏览器记住账号密码

在提交表单时，高级浏览器包括移动端浏览器，会询问用户是否需要记住用户账号密码，对于一般用户而言，这是一个十分有用的特性，特别是在移动端，可以为用户节省很多时间。在没有form元素的情况下，浏览器不会弹出该询问窗口。

浏览器记住账号密码

总结

我们在开发一个表单应用的时候，不应该尝试去除form元素直接进行提交，在form元素中应该包含一个提交按钮，如果是button元素，应该手动加上type="submit"属性。提交事件的处理在form元素的submit事件中，而非提交按钮的click事件。

YIXUNFE / blog