网页中的表单元素用于向服务器提交数据。例如：
<form action="http://example.com/signin.php" method="post">
<label for="username">Username: </label>
<input type="text" name="user" id="username"><br>
<label for="password">Password: </label>
<input type="password" name="pass" id="password"><br>
<input type="submit" value="Sign In">
</form>
这样点击提交按钮后将会把用户名和密码提交并转到 http://example.com/signin.php。
表单元素中包含的各种控件有如下这些：
| 表单控件 | 实际例子 | 控件描述 |
| 提交按钮 | <button type="submit">提交</button> | 提交表单中的各控件数据到服务器 |
| <input type="submit" value="提交"> | ||
| 重置按钮 | <button type="reset">重置</button> | 清除表单中的各控件数据并重置为默认值 |
| <input type="reset" value="重置"> | ||
| 推送按钮 | <button type="button">推送</button> | 无默认操作，在按钮的事件处理函数中提交数据 |
| <input type="button" value="推送"> | ||
| 图片按钮 | <input type="image" src="submit.png" alt="Submit"> | 提交所点击位置的 X 和 Y 坐标到服务器 |
| 单选控件 | <input type="radio" name="gender" value="Male" checked>男 <input type="radio" name="gender" value="Female">女 |
从若干选项中选择一个值 |
| 多选控件 | <input type="checkbox" name="Apple" checked>苹果 <input type="checkbox" name="Banana">香蕉 |
从若干选项中选择多个值 |
| 下拉列表 | <select name="fruit"> <option value="apple">Apple</option> <option value="banana">Banana</option> <option value="pear" selected="selected">Pear</option> </select> |
从下拉列表中选择一个值 |
| 单行文本 | <label for="username">Username: </label> <input type="text" name="user" id="username"> |
输入单行文本 |
| 单行密码 | <label for="password">Password: </label> <input type="password" name="pass" id="password"> |
输入单行密码 |
| 多行文本 |
<textarea name="content" rows="10" cols="80"> 第一行文本。 第二行文本。 </textarea> |
输入多行文本 |
| 文件选取 | 请选择需要上传的文件: <input type="file" name="content"> | 选择本地文件以供上传 |
| 隐藏控件 | <input type="hidden" name="country" value="China"> | 隐藏的表单域，用户不能直接修改，但在 JavaScript 中可以修改 |
对于前面三种按钮控件，可以看到使用 <button> 或者 <input> 元素都可以，但两者是有一些区别的：
- <input>中不能包含其它元素，而 <button> 中可以包含更多的行内元素，因此很容易加上按钮图标。
- 在标准浏览器中点击 <button> 按钮提交的是 value 值，而在 IE6 和 IE7 中，提交的是 <button> 的 innerText。
- 在 IE6 和 IE7 中，当表单中有多个 <button> 按钮时，点击任何一个按钮将提交所有按钮。
- 在 Firefox 中，<input> 元素无法设置 line-height 属性。
参考资料：
[1] W3C - HTML 4.01 Specification - Forms
[2] W3Schools - HTML input type Attribute
[3] MDN - HTML element reference - <button>
[4] MDN - HTML element reference - <input>
[5] HTML/Elements/form - W3C Wiki
[6] Bootstrap - CSS - Button tags
[7] Stack Overflow - input type=“submit” Vs button tag
[8] Stack Overflow - <button> vs. <input type=“button” />
