HTML4.01教程：表單

html表單允許用戶在網頁中輸入各種信息，是用戶與網頁進行交互的最佳途徑。

一、html表單

html表單由<form>標簽定義，它定義了一個輸入區域。包括文本字段、復選框、單選框和提交按鈕等。

一個簡單的html表單格式如下：

<form action="../append/form_button.asp" method="get">   手機號碼:                            <!--輸入信息的說明-->   <input type="text" name="shouji" />  <!--表單控件（Form Controls）-->   <input type="submit" value="提交" /> <!--表單控件（Form Controls）--> </form>

查看代碼效果：HTML4.01教程：表單示例

上述代碼中，通過表單控件（Form Controls）輸入信息，用得最多的控件是input控件（<input>標簽）。用戶輸入的信息需要action屬性指定的文件名來處理，處理的方法由method屬性來決定。

method屬性有兩個值：get和post。

• get方法是將表單控件中的name和value信息經過編碼之后，通過URL發送的，在地址欄中可以看到發送的信息。
• post方法是將表單中的內容通過http方式來發送的，在地址欄內看不到表單的提交信息。

那么什么時候用get？什么時候用post呢？如果只是獲得或顯示數據，建議使用get方法；如果涉及數據的保存或更新，建議使用post方法。

二、html表單（Form）的常用控件（Controls）

在表單的輸入區域中最常用的控件如下：

1. 單行文本輸入框（input type="text"）

在單行文本輸入框中可以輸入一些簡短的信息，如：數字、字母和漢字等。

固定電話: <input type="text" name="dianhua" />

查看代碼效果：HTML4.01教程：表單示例

相關閱讀：HTML4.01<input>標簽type屬性

2. 提交（input type="submit"）

<input type="submit" value="提交" />

查看代碼效果：HTML4.01<input>標簽type屬性submit按鈕示例

相關閱讀：HTML4.01<input>標簽type屬性

3. 單選框（input type="radio"）

<input type="radio" name="vehicle" value="Bike" /> Bike <input type="radio" name="vehicle" value="Car" checked="checked" /> Car

查看代碼效果：HTML4.01教程：表單單選框（input type="radio"）示例

提示：checked="checked"表示缺省已選的選項。

相關閱讀：HTML4.01<input>標簽type屬性

4. 復選框（input type="checkbox"）

<input type="checkbox" name="vehicle" value="Bike" /> Bike <input type="checkbox" name="vehicle" value="Car" checked="checked" /> Car

查看代碼效果：HTML4.01<input>標簽type屬性checkbox按鈕示例

提示：checked="checked"表示缺省已選的選項。

相關閱讀：HTML4.01<input>標簽type屬性

5. 下拉框（select）

（1）一次選擇一項：

<select name="vehicle" >   <option value="Bike">Bike   <option value="Car">Car </select>

查看代碼效果：HTML4.01教程：表單下拉框（select）示例

相關閱讀：HTML4.01<select>（Selection List：選擇列表）標簽

（2）可以同時選擇多項：

<select multiple="multiple" name="cars">

查看代碼效果：HTML4.01教程：表單下拉框同時選擇多項（multiple）示例

如果要使用復選，加muiltiple即可。按下Ctrl鍵即可實現多選。

相關閱讀：HTML4.01<select>標簽multiple屬性

6. 多行輸入框（textarea）

<textarea cols="50" rows="5" name="cars"></textarea>

查看代碼效果：HTML4.01教程：表單多行輸入框（textarea）示例

相關閱讀：HTML4.01<textarea>（Multiline Text Input：多行文本輸入區）標簽

7. 密碼輸入框（input type="password"）

<input type="password" name="pwd" />

查看代碼效果：HTML4.01<input>標簽type屬性password按鈕示例

相關閱讀：HTML4.01<input>標簽type屬性

8. 圖片提交（input type="image"）

<input type="image" src="../append/20111004.jpg" alt="Submit" />

查看代碼效果：HTML4.01<input>標簽src屬性示例

相關閱讀：HTML4.01<input>標簽src屬性

三、相關閱讀

• HTML4.01<form>（Form：表單）標簽
• HTML4.01<input>（Input Form Control：表單輸入控件）標簽
• HTML4.01<textarea>（Multiline Text Input：多行文本輸入區）標簽
• HTML4.01<select>（Selection List：選擇列表）標簽
• HTML4.01<option>（Option in Selection List：下拉菜單選項）標簽