網頁中的表單元素

網頁中的表單元素用於向服務器提交數據。例如：

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