HTML之表單

一.表單的定義：<form action='' method=''></form>用於向服務器傳輸數據
1.action:表單處理服務器
2.method:表單的提交方式.一般瀏覽器通過上述任何一種方法都可以傳輸表單信息，而有些服務器只接受其中一種方法提供的數據。可以在 <form> 標籤的 method （方法）屬性中指明表單處理服務器要用方法來處理數據，使 POST 還是 GET

a. post:如果採用 POST 方法，瀏覽器將會按照下面兩步來發送數據。首先，瀏覽器將與 action 屬性中指定的表單處理服務器建立聯繫，一旦建立連接之後，瀏覽器就會按分段傳輸的方法將數據發送給服務器。
在服務器端，一旦 POST 樣式的應用程序開始執行時，就應該從一個標誌位置讀取參數，而一旦讀到參數，在應用程序能夠使用這些表單值以前，必須對這些參數進行解碼。用戶特定的服務器會明確指定應用程序應該如何接受這些參數。
b.get:另一種情況是採用 GET 方法，這時瀏覽器會與表單處理服務器建立連接，然後直接在一個傳輸步驟中發送所有的表單數據：瀏覽器會將數據直接附在表單的 action URL 之後。這兩者之間用問號進行分隔。

二.表單的用法：
1.表單中可以包含input元素(input元素可以脫離標籤獨立存在)，如：

<form action="form_action.asp" method="get">
  <input type="" value="" name="" />想顯示在頁面上的值
</form>

input元素的屬性：
A.type(表單的類型)，其值有：
a.輸入類：
text：文本輸入框
passsword：密碼輸入框
b.選擇類：
radio：單選框
checkbox：多選框

其中，在實現單選時一定要注意單選的特性（只能選擇其一，不得同時選擇多個。而往往直接用type=“radio”實現的單選框都沒有隻選其一的特性。此時解決方案如下：）
方法一：用<label>標籤對input進行標註，如：

<label for="male">Male</label>
        <input type="radio" name="sex" id="male" />
        <br />
        <label for="female">Female</label>
        <input type="radio" name="sex" id="female" />

或者寫爲：

<label><input name="sex" type="radio" id="male"  />男</label>
<label><input name="sex" type="radio" id="female" />女</label>
//其中，name和id不能省

方法二：（用統一的name值標明單選框之間屬於同一類型，此時就能實現單選）

<input name="sex" type="radio"/>男
<input name="sex" type="radio"/>女

c.按鈕類：
button：按鈕（按鈕也可以通過<button>標籤直接實現）
reset：重置
submit：提交
image：圖片
d.特殊類：
file：上傳
注：以前在整理這一條屬性的時候顯然都沒有親子試過！！所以當別人用出來的時候居然還懵逼了！！下面重新學習一下這個用法：

<input type="file">

效果：

hidden：隱藏
B.value：input的值（input標籤外的內容是顯示在頁面上的內容，而其真正的值是value的內容）
C.name：類似前端的id，同時前端可以用來js取值和分組
D.checked：多用於單選和多選，代表表單有無被選中的狀態，若被選中，則元素.checked=true，反之爲false。可以利用這一點作爲判斷條件來實現進一步的操作；或者直接操作該屬性也可以完成一些頁面刷新時的初始化默認操作，如：

<input type="checkbox" name="" checked/>//頁面在刷新時默認多選框被勾選
或寫爲：
<input type="checkbox" name="" checked="checked"/>

E.disabled/ readonly：屬性規定應該禁用 input 元素，如：

<input type="checkbox" name="" disabled/>//此時表示禁用多選框

F.placeholder屬性：在頁面刷新時，會自動顯示palceholder的值。用作輸入框內的提示

G.cursor屬性：設置鼠標移入時的樣式

2.表單中還可以包含select元素：<select value="" ...>元素配合<option>標籤實現下拉框的效果。
例如：

<select>
    <option>請選擇您所在的城市</option>
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
    <option>重慶</option>
    <option>西安</option>
</select>

注：顯示在頁面上的內容並不是select的value值，其標籤內value屬性中的值纔是；當頁面刷新時，下拉框內默認顯示多選框中的第一個內容

3.表單中還可以包含textarea元素：是一個可任意拖動改變大小的文本輸入框，例如：

<textarea></textarea>

注：可以通過設置屬性resize的值爲none的方法來禁止文本域拖拽改變大小