HTML學習筆記（五）_HTML5表單相關元素和屬性

1. HTML表單元素：      <form../>元素用於生成輸入表單，該元素不會生成可視化部分，在HTML5之前，其他表單控件，如單行文本框、多行文本域、單選按鈕、複選框等必須放在form元素內部。可指定如下屬性：
   (1).action:指定當前單擊表單內的”確認“按鈕時，該表單被提交到哪個地址，可以是絕對地址，也可以是相對地址。該屬性必填。

   (2).method:指定提交表單是發送何種類型的請求，值可以是get或者post，通常建議用post，默認爲get。
        get請求和post請求的區別：
        get方式的請求：直接在瀏覽器地址欄中輸入訪問地址所發送的請求，或提交表單發送請求時，該表單對應的form元素沒有設置method屬性，或設置爲get，這幾種請求都是get方式的請求，get方式的請求會將請求參數的名和值轉換成字符串，並附加在原URL之後，因此可以在地址欄中看到請求參數名和值，且get請求傳送的數據量較小，一般不能大於2kb。
       post方式的請求：這種方式通常使用提交表單的方式來發送，且需要設置form元素的mehtod屬性爲post，post方式傳送的數據量較大，通常認爲post請求參數的大小不受限制，但往往取決於服務器的限制，post請求傳輸的數據量總比get傳輸的數據量大，而且post方式的發送的請求參數以及相應的值放在html header中傳輸，用戶不能再地址欄中看到請求參數名和值，安全性相對較高。
   (3).enctype:指定表單內容進行編碼所使用的字符集。
   (4).name:指定表單的唯一名臣，建議該屬性值與id屬性值保持一致。
   (5).target:指定以哪種方式打開目標URL，與超鏈接的target完全以弘揚，可以是_blank,_parent,_self,_top.
    當在form元素裏邊定義一個或多個表單控件時，一旦提交該表單，該表單裏的表單控件將會轉換成請求參數，關於表單控件轉換爲請求參數的規則如下：
            每個有name屬性的表單控件對應一個請求參數，沒有name屬性的表單控件不會生成請求參數。
            如果多個表單控件有相同的name屬性，則多個表單控件只生成一個請求參數，只是該參數有多個值。
            表單控件的name屬性指定請求參數名，value指定請求參數值。
            如果某個表單控件設置了disabled或disabled=“disabled”屬性，則該表單控件不會產生請求參數。
     大部分表單控件，包括input元素所生成的絕大部分表單控件（除了指定type=“hidden”），如button生成的按鈕，select生成的列表框和下拉菜單，textarea生成的多行文本域，他們都可以獲得鼠標焦點，相應鼠標事件，因爲他們都可以指定onfocus、onblur屬性，分別用於設置得到焦點，失去焦點的事件響應。而且這些表單控件可指定tabIndex屬性，例如a控件設置tabIndex爲1，b控件設置爲2，則在a控件擁有輸入焦點的情況下，按tab鍵，焦點將會轉移到b控件上。


2.Input元素：
    (1).單行文本框，指定input元素的type屬性爲text即可。
    (2).密碼輸入框，指定input元素的type屬性爲password即可。
    (3).隱藏框，指定input元素的type屬性爲hidden即可。不能接受用戶輸入，用於提交額外的請求參數，請求參數的值爲隱藏域的value值，因此定義隱藏域的同時應指定value屬性值。
    (4).單選框，指定input元素的type屬性爲radio即可。不能接受用戶輸入，所以定義是同時也會指定value值，用於設置它們所對應的請求參數值。瀏覽器吧具有相name屬性的單選框當成一組，多個具有相同name屬性的單選框只能轉中其中一個，不同name屬性的單選框之間互不干擾。
    (5).複選框，指定input元素的type屬性爲checkbox即可。
    (6).圖像域，指定input元素的type屬性爲image即可。
    (7).文件上傳域，指定input元素的type屬性爲file即可。會生成一個單行文本框和一個“瀏覽”按鈕。
    (8).提交，重設，無動作按鈕：分別指定input元素的type屬性爲submit、reset、button即可。
    input元素還可以指定如下屬性：
    (1).checked:設置單選框、複選框初始轉檯是否處於選中狀態，該屬性值只能是checked，表示初始即選中，只有當type是radio和checkbox時纔可以指定該屬性值。
    (2).disabled:設置首次加載時金庸此元素，該屬性值只能是disabled，表示被金庸，則該元素無法獲得輸入焦點，無法選中，無法在其中輸入文本，無法響應焦點事件，當type=“hidden”是不能指定該屬性。
   (3).maxlength:允許輸入的最大字符數。
   (4).readonly:不允許用戶輸入，只能使用js腳本修改。
   (5).size:指定該元素的寬度，當type=“hidden”時不能指定該屬性。
   (6).src:指定圖片域所顯示圖片的URL，只有當type=“image”時纔可以指定該屬性。


3.使用label定義標籤：
   label元素不需要生成請求參數，因此不要指定value屬性值。此標籤可以指定for屬性，指定該標籤與哪個表單控件關聯。此元素除了用於輸出普通文本之外，還有一個額外作用：當用戶單擊label元素所生成的標籤時，該標籤關聯的表單控件就會獲得焦點。
   讓標籤和表單控件關聯的兩種方式：
   (1).隱式使用for屬性：指定label屬性的for屬性值爲所關聯表單控件的id屬性值。
   (2).顯式關聯：將普通文本、表單控件一起放在label元素內部使用。
        （儘量不要用顯式關聯，有的IE瀏覽器不支持）


4.使用button定義按鈕：
   button元素和<inout type="button"/>的區別：button元素提供了更爲強大的功能和更豐富的內容。<button>與</button>標籤之間的所有內容都是該按鈕的內容，其中包括普通文本、文本格式化標籤、圖像等內容。
   button元素可以指定如下屬性：
   (1).disabled:指定是否禁用此按鈕，該屬性值只能是disabled，或者省略屬性值。
   (2).name:指定該按鈕的唯一名稱。該屬性值應該與id屬性值保持一致。
   (3).type:指定該按鈕屬於哪種類型。button，reset，submit。
   (4).value:指定按鈕的初始值。


5.列表框和下拉菜單：
   select元素用於創建列表框或下拉菜單，該元素必須和option元素結合使用，每個option元素代表一個列表項或菜單項。不能指定value值，參數值由option來指定，可指定以下屬性：
   (1).disabled:禁用列表框和下拉菜單，屬性值只能是disabled或省略值。
   (2).multiple:是否允許多選，屬性值只能是multiple，一點設置允許多選，select元素會自動生成列表框。
   (3).size:同時顯示多少個列表項，一旦指定該屬性，select元素就會自動生成列表框。
   （一個select元素是生成下拉框還是列表框，完全是由指定了size或multiple屬性來決定的，只要指定了這兩個屬性之一，瀏覽器就會生成列表框，否則就是下拉框）。
   select元素裏，只能包含如下兩種子元素：
   (1).<option>:只能包含文本內容。
   (2).<optgroup>:用戶定義組，只能包含option子元素，處於optgroup裏的option就屬於該組。
   option可以指定如下屬性：
   (1):disabled:禁用該選項。值只能是disabled。
   (2).selected:初始狀態是否選中。值只能是selected。
   (3).value:指定對應的請求參數值。
   optgroup可以指定如下屬性：
   (1).label:指定該選項組的標籤，必填。
   (2).disabled:禁用該選項組裏的所有選項，屬性值只能是disabled。


6.使用textarea定義文本域：
   該元素可指定如下幾個屬性：
   (1).cols:指定文本域的寬度，必填。
   (2).ros:指定文本域的高度，必填。
   (3).disabled:指定禁用該文本框。屬性值只能爲disabled。
   (4).redonly:指定該文本域只讀。
   此元素不能指定value屬性，<textarea>和</textarea>標籤之間的內容作爲textarea對應請求參數的參數值。