HTML:form表單總結，input，select，option，textarea，label

<form>標簽是塊級元素。

form標簽的標准屬性有id,class,style,title,lang,xml:lang.

表單能夠包含input元素（包含button,checkbox,file,hidden,image,password,radio,reset,submit,text）、menu、textarea、fieldset、legend和label元素。

1. action屬性表示提交表單時向何處發送表單數據（表單數據發送到 action 屬性所規定的頁面）。（必須）
2. method屬性表示表單提交的方式。有get和post兩種方式。get與post的區別見www.w3school.com.cn（必須）
3. name屬性規定表單的名稱。同時name屬性提供了一種在腳本中引用表單的方法。一般不用js的時候可以不寫該屬性。
4. target屬性，目標
5. enctype屬性規定在發送到服務器之前應該如何對表單進行編碼。默認值：application/x-www-form-urlencoded發送前編碼所有字符（空格轉換成加號，特殊符號轉為為ASCII HEX值）；還有另外兩個值，multipart/form-data不對字符編碼（在使用包含文件上傳控件的表單時，必須使用。）；text/plain空格轉換為"+"加號，但不對特殊字符編碼。

..............................................................................................................................

<input>標簽用於搜集用戶信息。根據不同的type類型，輸入字段擁有多種形式。行內元素。

1. type屬性button,checkbox,file,hidden,image,password,radio,reset,submit,text。
2. value屬性規定input元素的值。
   　　  對於不同的類型，value屬性的用法不同：
   　　  type="button","reset","submit"-定義按鈕上顯示的文本。
   　　  type="text","password","hidden"-定義輸入字段的默認值。
   　　  type="checxbox","radio","image"-定義與輸入相關聯的值,提交到處理頁面的值。
   　　  注釋：type="checkbox","radio"中必須設置value的值。
   　　  注釋：value屬性無法與type="file"一同使用。
3. name屬性定義input元素的名稱；name屬性用於對提交到服務器后的表單數據進行標識，或者在客戶端通過JavaScript引用表單數據。注釋：只有設置了name屬性的表單元素才能在提交表單時傳遞他們的值。
4. maxlength屬性規定輸入字段的最大長度，以字符個數計數。maxlength屬性與type="text"和type="password"配合使用。（默認255）
5. src屬性只能，必須與type="image"配合使用。 規定提交按鈕顯示的圖像的URL。
6. size屬性規定輸入框（有的說輸入字段）的寬度。對於type="text"和type="password"，size定義的是能顯示在框內的西文字符數，對於其它類型，size屬性定義的是以像素為單位的輸入框寬度。size屬性推薦使用css來代替。<input style="width:100px" />（默認20）
7. readonly屬性規定字段為只讀。只讀字段是不能修改的。不過，用戶仍然可以使用 tab 鍵切換到該字段，還可以選中或拷貝其文本。readonly 屬性可以防止用戶對值進行修改，直到滿足某些條件為止（比如選中了一個復選框）。然后，需要使用 JavaScript 消除 readonly 值，將輸入字段切換到可編輯狀態。readonly 屬性可與 <input type="text"> 或 <input type="password"> 配合使用。用法：<input type="text" readonly="readonly">
8. disabled屬性規定應該禁用input元素。被禁用的 input 元素既不可用，也不可點擊。可以設置 disabled 屬性，直到滿足某些其他的條件為止（比如選擇了一個復選框等等）。然后，就需要通過 JavaScript 來刪除 disabled 值，將 input 元素的值切換為可用。注釋：disabled屬性無法與type="hidden"一起使用。用法：<input type="text" diasbled="disabled">
9. checked屬性規定在頁面加載時應該被預先選定的input元素。checked屬性與type="checkbox"和type="radio"配合使用，設定加載后顯示時的首選input元素。checked屬性也可以在頁面加在后通過JavaScript代碼進行設置。用法：<input type="checkbox" checked="checked">
10. alt屬性定義圖像的替代文本。如果圖像無法顯示，會顯示替代文本。只能與type="image"配合使用。雖然alt屬性不是必需屬性，但是在image時，仍然應該設置該屬性。如果不使用，可能對文本瀏覽器或非可視瀏覽器照成障礙。
11. accept屬性規定文件上傳來提交的文件的類型。只能與type="file"配合使用，規定上傳文件的類型。提示：請避免使用該屬性。應該在服務器端驗證文件上傳。
12. align屬性規定圖像輸入的對其方式。與type="image"配合使用。只用left和right得到所有瀏覽器的支持。默認left，還有right,top,middle,bottom。推薦使用css替代<input type="image" style="float:left"  /> 

..............................................................................................................................

<input type="text" />定義單行輸入字段，默認寬度20個字符（size屬性）

1. maxlength屬性表示文本輸入框中輸入內容的最大數量，以字符個數為度量單位（默認255）。（需要限制時必須）
2. value屬性用於設置文本框的默認值。（需要限制時必須）
3. size屬性表示文本框的寬度,對於type="text"和type="password"，size定義的是能顯示在框內的西文字符數，對於其它類型，size屬性定義的是以像素為單位的輸入框寬度。size屬性推薦使用css來代替。<input style="width:100px" />。（需要限制時必須）
4. onclick="this.value=''"事件表示單擊文本框，文本框中默認內容清空（一般用於設置默認值時使用）。（需要限制時必須）
5. name屬性定義input元素的名稱。name的作用是作為與服務器交互數據的HTML元素的服務器端的標識，比如input,select,textarea和button等。我們在服務器端根據其name通過Request.Params取得元素提交的值。如果用id，服務器是無法獲得數據的。如果數據不提交到服務器，可以不用name屬性。name的另外一個作用是客戶端通過JavaScript引用表單數據。注釋：只有設置了name屬性的表單元素才能在提交表單時傳遞他們的值。（提交數據到服務器時必須）
6. readonly屬性規定字段為只讀。只讀字段是不能修改的。不過，用戶仍然可以使用 tab 鍵切換到該字段，還可以選中或拷貝其文本。readonly 屬性可以防止用戶對值進行修改，直到滿足某些條件為止（比如選中了一個復選框）。然后，需要使用 JavaScript 消除 readonly 值，將輸入字段切換到可編輯狀態。用法：<input type="text" readonly="readonly">或直接readonly。可以使用onclick時間來清空默認值。（一般不用）
7. disabled屬性規定應該禁用input元素。被禁用的 input 元素既不可用，也不可點擊。可以設置 disabled 屬性，直到滿足某些其他的條件為止（比如選擇了一個復選框等等）。然后，就需要通過 JavaScript 來刪除 disabled 值，將 input 元素的值切換為可用。用法：<input type="text" diasbled="disabled">或直接disabled（一般不用）.

<form>
your name:
<input type="text" name="yourname" size="30" maxlength="20" value="輸入框的長度為30，允許最大字符數為20" /><br>
<input type="text" name="yourname" size="30" maxlength="20" readonly value="你只能讀不能修改" />
</form>

..............................................................................................................................

<input type="password" />定義密碼字段。密碼字段中的字符會被掩碼

 參數與type="text"相類似，有type,name,value,maxlength,size,disabled,readonly屬性。

<form>
your password:
<input type="password" name="yourpwd" size="20" maxlength="15" value="123456" />密碼長度小於15
</form>

 特殊屬性disabled與readonly與text的一樣。

..............................................................................................................................

<input type="submit" />定義提交按鈕。提交按鈕用來向服務器發送表單數據。數據會發送到表單的action屬性中指定的頁面。 

<input type="reset" />定義重置按鈕。重置所有內容

屬性有type,value,name,size，一般值需要使用type與value屬性

value屬性表示按鈕上顯示的文本。

<form>
your name
<input type="text" value="your name" maxlength="30" size="50" onclick="this.value=''" /><br />
<input type="submit" value="提交" />
&nbsp
<input type="reset" value="重置" />
</form>

 ..............................................................................................................................

 <input type="button" />定義可點擊的按鈕，但沒有任何的行為。常用於在用戶點擊按鈕時啟動JavaScript程序。

 標准的window風格按鈕，要實現跳轉需要寫入JavaScript代碼。

value屬性為按鈕上顯示的文本

name屬性用於客戶端JavaScript對數據操作。

<form>
your button:
<input type="button" value="Yes" name="youinfo" onclick="window.open('http://www.baidu.com')" />
</form>

..............................................................................................................................

<input type="hidden" />定義隱藏字段，隱藏字段對用戶是不可見的。隱藏字段通常會儲存一個默認值，他們的值可以通過JavaScript進行修改

 非常需要注意的一個，使用范圍很廣。通常成為隱藏域：如果有一個非常重要的信息需要提交到下一頁，但有無法明示的時候使用。

hidden中value的值最有用。name用來引於JavaScript引用。

<form name="form1">
your hidden info here:
<input type="hidden" name="yourhiddeninfo" value="baidu.com" />
</form>
<script>
alert("隱藏域的值是 "+document.form1.yourhiddeninfo.value)
</script>

alert出：隱藏域的值是baidu.com

..............................................................................................................................

 <input type="checkbox" />定義復選框。允許用戶在一定數目中選擇一個或多個

屬性有name,value,及特定屬性checked(必須的)

最重要的是value值，提交到頁面的是value值。name值可以不一樣，但推薦使用一樣的。

多條input語句組成多選框。

<form name="form1">
a:<input type="checkbox" name="checkit" value="a" checked /><br>
b:<input type="checkbox" name="checkit" value="b" /><br>
c:<input type="checkbox" name="checkit" value="c" /><br>
</form>

 ..............................................................................................................................

<input type="radio" />定義單選按鈕

屬性有name,value,checked.

name屬性必須一樣，否則不能多選一。提交到處理頁的還是value的值。

<form name="form1">
a:<input type="radio" name="checkit" value="a" checked /><br>
b:<input type="radio" name="checkit" value="b" /><br>
c:<input type="radio" name="checkit" value="c" /><br>
</form> 

..............................................................................................................................

<input type="image" />定義圖像形式的提交按鈕。點擊圖像就會提交表單數據。

屬性有，src,alt,align.

src屬性圖像地址

align屬性圖像位置，建議使用css控制。

alt，圖像替代文本.圖像不顯示時，依然可以提交。

<form name="form1" action="xxx.asp">
your Imgsubmit:
<input type="image" src="../blog/images/face4.gif" />
</form>

..............................................................................................................................

 <input type="file" />定義用於上傳文件

 當你在BBS上傳圖片時，在Email中上傳附件時要用的東西。

屬性有：name,size,accept(不建議使用)

它用於上傳文件。它會在一個文本輸入框右邊出現一個瀏覽按鈕。

如果<form>標簽中只設置method設置值為get或者post，則瀏覽器僅僅向http服務器提交該文件的名字，而不傳遞任何關於該文件實體內容。

若 要實現上傳文件內容的功能就必須在<form>標簽中設置另一個屬性enctype值為multpart/form-data

<form action="re.php" mathod="post" enctype="multpart/form-data">
your file:
<input type="file" name="yourfile" size="30" />
</form>

..............................................................................................................................

<select></select> <option></option>

<select>標簽用於創建下拉菜單。有disabled,multiple,size,name屬性。select標簽可以不使用任何屬性。

name屬性規定select元素的名稱。name屬性用於對提交到服務器后的表單數據進行標識，或者用於JavaScript對表單引用。

disabled屬性表示禁用該下拉菜單。

multiple屬性表示可以選擇下拉菜單的多個選項。windows系統通過ctrl，mac通過command來實現。此時默認默認瀏覽器會顯示4個選項。

size屬性表示顯示的下拉菜單可見選項的個數，默認為1。（設為2的時候，谷歌瀏覽器會顯示4，why??）

<option>標簽定義下拉菜單中的一個選項。瀏覽器將<option>作為<select>標簽的菜單或是滾動列表中的一個元素顯示。option元素位於select元素內部，與select元素配合使用，否則該標簽沒有意義。

option標簽可以不使用任何屬性，但是一般會使用value屬性，此屬性的值為提交到處理頁的內容。如果不設置value的值，提交<option></option>之間的內容，之間的內容為顯示在瀏覽器上的內容

disabled屬性表示禁用的option選項。其余的option選項還是可以正常使用。

selected屬性，定義默認顯示的選項。

<select >
    <option value="河南省">河南省</option>
    <option value="河北省">河北省</option>
    <option value="河北省" checked>廣東省</option>
    <option value="河北省" disabled>廣西省</option>
</select>

..............................................................................................................................

<textarea></textarea>

<textarea> 標簽定義多行的文本輸入控件。

文本區中可容納無限數量的文本，其中的文本的默認字體是等寬字體（通常是 Courier）。

可以通過 cols 和 rows 屬性來規定 textarea 的尺寸，不過更好的辦法是使用 CSS 的 height 和 width 屬性。

注釋：在文本輸入區內的文本行間，用 "%OD%OA" （回車/換行）進行分隔。

屬性有cols,rows,disabled,name,readonly

cols規定文本的可見寬度。

rows規定文本的可見高度。

diabled禁用該文本。

name用於表單時提交到服務器的標識，也可以用於客戶端JavaScript的引用標識。

readonly表示只讀，不能被修改。

..............................................................................................................................

<label></label>

<label> 標簽為 input 元素定義標注（標記）。

label 元素不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。

<label> 標簽屬性只有一個for 屬性，該屬性必須要與相關元素的 id 屬性相同。

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

 單選按鈕顯示的是label中的Male，鼠標點擊Male時即可選中。input標簽中需要設置id屬性。

..............................................................................................................................