网页中的表单元素

网页中的表单元素用于向服务器提交数据。例如：

<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” />