HTML4.01教程：表單

html表單允許用戶在網(wǎng)頁中輸入各種信息，是用戶與網(wǎng)頁進(jìn)行交互的最佳途徑。

一、html表單

html表單由<form>標(biāo)簽定義，它定義了一個(gè)輸入?yún)^(qū)域。包括文本字段、復(fù)選框、單選框和提交按鈕等。

一個(gè)簡單的html表單格式如下：

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

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

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

method屬性有兩個(gè)值：get和post。

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

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

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

在表單的輸入?yún)^(qū)域中最常用的控件如下：

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

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

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

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

相關(guān)閱讀：HTML4.01<input>標(biāo)簽type屬性

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

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

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

相關(guān)閱讀：HTML4.01<input>標(biāo)簽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"表示缺省已選的選項(xiàng)。

相關(guān)閱讀：HTML4.01<input>標(biāo)簽type屬性

4. 復(fù)選框（input type="checkbox"）

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

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

提示：checked="checked"表示缺省已選的選項(xiàng)。

相關(guān)閱讀：HTML4.01<input>標(biāo)簽type屬性

5. 下拉框（select）

（1）一次選擇一項(xiàng)：

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

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

相關(guān)閱讀：HTML4.01<select>（Selection List：選擇列表）標(biāo)簽

（2）可以同時(shí)選擇多項(xiàng)：

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

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

如果要使用復(fù)選，加muiltiple即可。按下Ctrl鍵即可實(shí)現(xiàn)多選。

相關(guān)閱讀：HTML4.01<select>標(biāo)簽multiple屬性

6. 多行輸入框（textarea）

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

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

相關(guān)閱讀：HTML4.01<textarea>（Multiline Text Input：多行文本輸入?yún)^(qū)）標(biāo)簽

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

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

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

相關(guān)閱讀：HTML4.01<input>標(biāo)簽type屬性

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

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

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

相關(guān)閱讀：HTML4.01<input>標(biāo)簽src屬性

三、相關(guān)閱讀

• HTML4.01<form>（Form：表單）標(biāo)簽
• HTML4.01<input>（Input Form Control：表單輸入控件）標(biāo)簽
• HTML4.01<textarea>（Multiline Text Input：多行文本輸入?yún)^(qū)）標(biāo)簽
• HTML4.01<select>（Selection List：選擇列表）標(biāo)簽
• HTML4.01<option>（Option in Selection List：下拉菜單選項(xiàng)）標(biāo)簽