1  表單的應用

網站的使用者名稱註冊和登入。主要用來接收使用者提交的資訊，並把資訊提交給伺服器，實現客戶端和伺服器的互動。

2  表單基本語法

使用form標籤。表單的所有元素，包括文字域、單選框、複選框、按鈕、列表等等，都要包含在form標籤內。具體的表單元素如下：

2.1  input標籤

單標籤，語法：<input type="型別屬性" name="名稱" ... />
其中，type的屬性值有很多種，每種對應一種表單元素。

input的單行文字域
基本語法：<input type="text" name="..." ... />
其他可選屬性：

input的檔案域
基本語法：<input type="file" name="..." ... />
功能是讓使用者可以上傳本地電腦的檔案。不同的瀏覽器的顯示效果不同。

input的單選框
基本語法：<input type="radio" name="..." value="..." checked />
例如，選擇性別的單選框：

<form>
        男<input type
 
="radio" name="sex" value="man">
        女<input type="radio" name="sex" value="woman">
</form>

注意：（1）男、女是要寫到input標籤外面的，input標籤的表現形式就僅僅是那個圓點。（2）value值的作用是提交到伺服器的值。（3）同一組的name屬性值一定要一樣，這樣才能保證是單選，否則就可以多選了。（4）checked屬性的作用是預設選中，哪個input標籤設定了checked，哪個單選框就是預設被選中的狀態。

input的複選框
基本語法：<input type="checkbox" name="..." value="..." checked />

<form>
        讀書<input type="checkbox" name="hobby" value="read" checked>
        唱歌<input type="checkbox" name="hobby" value="sing">
        跳舞<input type="checkbox" name="hobby" value="dance">
</form>

注意：（1）具體的愛好是要寫到input標籤外面的，input標籤的表現形式就僅僅是那個方點。（2）value值的作用是提交到伺服器的值。（3）同一組的name屬性值沒有要求一定要一樣，但是規範起見，最好保持一致。（4）checked屬性的作用是預設選中，哪個input標籤設定了checked，哪個單選框就是預設被選中的狀態。

input的按鈕

<form><!--value的值是顯示在按鈕上的文字內容-->
        <input type="button" name="..." value="點我"/><!--普通按鈕-->
        <input type="submit" name="..." value="提交"/><!--提交按鈕-->
        <input type="reset" name="..." value="重置"/><!--重置按鈕-->
        <input type="image" name="..." src="..." /><!--影象按鈕-->
</form>

影象按鈕是為了讓按鈕看起來更美觀，而插入的一張圖片形式的按鈕。功能和提交按鈕相同。

input隱藏域
假如我們需要提交一些資訊給伺服器，但是還想隱藏它們，可以使用隱藏域。當用戶點選提交按鈕後，資訊就會提交到伺服器。<input type="hidden" name="..." value="想要提交到伺服器的資訊"/>

2.2  下拉選單和列表標籤select和option

基本語法：

<select><!--下拉選單-->
            <option value="...">選項</option><!--選單裡的每一項-->
            <option value="...">選項</option>
            ...
</select>

這裡的value屬性值的作用和上面的都一樣，是提交到伺服器中的值。
select標籤的可選屬性：

如果設定了size屬性，則顯示方式由只顯示一項的下拉選單變為顯示多項的列表形式。
option標籤可選屬性：

例子：

<form><!--下拉選單5個選項，列表項5個選項，可以多選，可見選項數為3。-->
　    下拉選單：<br/>
　    <select>
　        <option value="panda">熊貓</option>
　        <option value="cat">貓</option>
　        <option value="dog">狗</option>
　        <option value="pig">豬</option>
　        <option value="monkey">猴子</option>
　    </select>
　    <br/><br/>
　    列表：<br/>
　    <select size="3" multiple>
　        <option value="apple">蘋果</option>
　        <option value="banana">香蕉</option>
　        <option value="orange">橙子</option>
　        <option value="peach">桃</option>
　        <option value="pear">梨</option>
　    </select>
　</form>

分組下拉選單和列表標籤optgroup
可以對選單裡的各個項進行分組劃分。
例子：

<form>
        <select>
            <option selected>請選擇：</option>
            <optgroup label="水果">
                <option value="apple">蘋果</option>
                <option value="kivi">獼猴桃</option>
                <option value="apricots">杏子</option>
            </optgroup>
            <optgroup label="蔬菜">
                <option value="tomato">西紅柿</option>
                <option value="cabbage">白菜</option>
                <option value="lettuce">油麥菜</option>
            </optgroup>
        </select>
</form>

2.3  多行文字域textarea

基本語法：

<textarea name="..." rows="..." cols="..." ...>
內容
</textarea>

textarea標籤的可選屬性：

3  表單form標籤屬性

表單的作用是把使用者輸入的資訊提交到伺服器上，那麼如何提交？提交到伺服器上哪裡？如何處理資料？這些是需要在form標籤的屬性中進行設定的。
基本語法：

<form action="..." method="..." name=''..." ...>
表單元素
</form>

action屬性定義的是把表單內容提交到伺服器上的一個處理程式的URL地址，即“給誰”。
method屬性定義提交的方式，即“怎麼給”。如果利用get方式提交，使用URL傳遞引數，使用者的提交資訊會被放到action指定的URL地址後面，會暴露在瀏覽器的位址列中。傳送的資訊有數量的限制，一般用於資訊的獲取。而使用post方式，表單資料會作為HTTP請求體的一部分，不會暴露出來；對傳送資訊的數量無限制，一般用於提交和修改伺服器上的資料。