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（通常不用）.

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

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

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

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

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

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

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

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

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

屬性有type,value,name,size，通常值須要使用type與value屬性

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

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

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

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

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

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

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

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

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

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

 很是須要注意的一個，使用範圍很廣。一般成爲隱藏域：若是有一個很是重要的信息須要提交到下一頁，但有沒法明示的時候使用。

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

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

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

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

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

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

最重要的是value值，提交到頁面的是value值。name值能夠不同，但推薦使用同樣的。

多條input語句組成多選框。

1 <form name="form1">
2 a:<input type="checkbox" name="checkit" value="a" checked /><br>
3 b:<input type="checkbox" name="checkit" value="b" /><br>
4 c:<input type="checkbox" name="checkit" value="c" /><br>
5 </form>

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

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

屬性有name,value,checked.

name屬性必須同樣，不然不能多選一。提交處處理頁的仍是value的值。

1 <form name="form1">
2 a:<input type="radio" name="checkit" value="a" checked /><br>
3 b:<input type="radio" name="checkit" value="b" /><br>
4 c:<input type="radio" name="checkit" value="c" /><br>
5 </form> 

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

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

屬性有，src,alt,align.

src屬性圖像地址

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

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

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

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

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

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

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

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

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

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

1 <form action="re.php" mathod="post" enctype="multpart/form-data">
2 your file:
3 <input type="file" name="yourfile" size="30" />
4 </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屬性，定義默認顯示的選項。

1 <select >
2     <option value="河南省">河南省</option>
3     <option value="河北省">河北省</option>
4     <option value="河北省" checked>廣東省</option>
5     <option value="河北省" disabled>廣西省</option>
6 </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 屬性相同。

1 <form>
2   <label for="male">Male</label>
3   <input type="radio" name="sex" id="male" value="1" />
4   <br />
5   <label for="female">Female</label>
6   <input type="radio" name="sex" id="female" value="0" />
7 </form>

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

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