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對應請求參數的參數值。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章