form 表单提交的几种写法

首先，一个 form 的结构如下：

<form name="myForm" id="formId">
    <input type="text" id="inputId" name="inputName">
</form>

1. document.getElementById('formId') 可以得到这个 form 元素。
2. document.myForm 得到的是 HTMLCollection，如果只有一个 form 的话，得到的就是这个 form 元素，否则是一个集合。
3. document.forms 得到的是 HTMLCollection，通过 document.forms[0] 可以得到第一个 form 元素。
4. document.getElementById('formId').elements 得到一个 HTMLFormControlsCollection。

简易写法

假设页面只有一个 form 元素，且 form 结构如文章开头所示，获得这个 input 最简单的写法是：

document.myForm.inputId
或者
document.myForm.inputName
------- 等同于 ----------
document.getElementById('formId').inputName
document.getElementById('formId').inputId
document.myForm.elements.inputName
document.getElementById('formId').elements.inputId
.....
但是如果有多个 name 相同的元素，直接通过 name 取到的是一个集合，这点要注意。

jsfiddle在线演示地址

---

参考资料：

• Best Practice: Access form elements by HTML id or name attribute?