要想更好運用表單就要了解表單的的更多元素與屬性，首先看看對表單基本了解。

表單的基本了解

元素用于用戶輸入數據的收集

元素是最重要的表單元素，有許多type其中是用于向表單處理程序提交表單的按鈕。

元素?元素定義待選擇的下拉列表選項，

元素定義文本區域。

元素定義可點擊的按鈕。

表單屬性

1：Action 屬性

action 屬性的作用是當提交表單時，聲明要向何處發送表單數據。將表單數據發往何處。如果省去該屬性則表單數據會發往當前網頁。

2：Method 屬性

method 屬性規定在提交表單時所用的 HTTP 方法(GET 或 POST)：

要想表單數據提交時更加安全使用post。因為get是將表單數據放在URL后提交的。所以不要使用get傳敏感信息比如密碼。我認為提交數據使用post，獲得數據使用get。

3：Name 屬性

如果要正確地被提交，每個輸入字段必須設置一個 name 屬性。因為只有設置了 name 屬性的表單元素才能在提交表單時傳遞它們的值。

4：target 屬性

target 屬性規定在何處打開 action URL。

表單新增元素屬性能讓我們更加高效便捷的書寫代碼。

表單的新增元素與屬性

1：表單內元素的form屬性

在HTML5中可以把表單內的從屬元素寫在頁面的任何地方，然后為該元素指定一個form屬性，屬性值為該表單的id，這樣就可以把該元素指定到相應的表單中。

這樣便于書寫樣式。

2：表單內元素的formaction屬性

在HTML5中formaction 屬性覆蓋 form 元素的 action 屬性。為不同的提交按鈕增加formaction屬性，使得在單擊時可以將表單可以提交給不同的頁面。該屬性適用于 type="submit" 以及 type="image"。

3：表單內元素的formmethod屬性

在HTML5中可以使用formmethod屬性為每個不同的表單元素分別指定不同的提交方法。

4：表單內元素的formenctype屬性

在HTML5中可以使用formenctype屬性為每個不同的表單元素分別指定不同的編碼方式。

5：表單內元素的formtarget屬性

在HTML5中可以使用formtarget屬性用于指定在何處打開表單提交后所需要的加載的頁面。

6：表單內元素的autofocus屬性

畫面打開時自動獲得光標焦點，一個頁面上只能有一個控件具有該屬性。

7：表單元素的required屬性

HTML5中新增的required屬性可以應用在大多數輸入元素上，在提交表單時，如果表單為空則不允許提交。

8:表單內元素的labels屬性

在HTML5中，為所以可使用標簽的表單元素定義一個labels屬性，屬性值為NodeList對象，代表該元素所綁定的標簽元素所構成的集合。

functionfun(){vartxt=document.getElementById("txt_name");varbutton=document.getElementById("btn");varform=document.getElementById("id1");if(txt.value.trim()=="")

{if(txt.labels.length==1)

{varlabel=document.createElement("label");

label.setAttribute("for","txt_name");

form.insertBefore(label,button);

txt.labels[1].innerHTML="請輸入姓名";

txtName,labels[1].setAttribute("style","font-size:9px;color:#fff");

}else if(txt.labels.length>1)

form.removeChild(txt.labels[1]);

}

}

姓名：

9:標簽的control屬性

在HTML5中，可以在標簽(label元素)內部放置一個表單元素，并且通過該標簽的control屬性訪問該表單元素。

functionset(){varlbl=document.getElementById("lbl");vartxt=lbl.control;

txt.value="0556";

}

10:文本框的placeholder屬性

placeholder是指當文本框處于未輸入狀態時顯示的輸入提示。當文本框處于未輸入狀態且未獲取光標焦點時，模糊顯示輸入提示文字。也可以使用css來控制其中文字的樣式。

input::-webkit-input-placeholder{ color:#0F0;}

11:文本框的list屬性

在HTML5中 為需要的input標簽設置一個list屬性，然后在任意位置放一對 datalist 標簽，并給 datalist 標簽一個 id，和 list 屬性值i一致。

在 datalist 標簽下放列表項，每個列表項用 option 元標簽來表示，這樣就可以做一個下拉框，當用戶需要的值不在下拉列表中時，可以自行輸入。datalist 標簽的內容不顯示，只有在文本框獲取焦點時才會以下拉列表的形式表現出來。

練習

練習1

練習2

12:文本框的autocomplete屬性

輔助輸入的的屬性，autocomplete有三種值"on"、"off"、"default"(不指定)。不進行指定時，使用游覽器的默認值。

使用方法如下當你在文本框內輸入如“某一段話”點擊提交后，要是再次在文本框中輸入“某”，點擊就會提示“某一段話”。

13：文本框的patten屬性

等于直接在html部分用正則表達式判斷值輸入是否符合要求。

14：文本框的selectionDirection屬性

針對input元素與textarea元素，可以獲取用戶選取元素時是正向選取還是反向選取。正向選取值或沒選為forward，反向為backward。

15：復選框的indeterminate屬性

在H5中，可以在js中對該元素使用indeterminate屬性，以說明復選框“尚未明確選取”狀態。 在js中使用布爾類型的值對該屬性賦值。在js代碼中對復選框選中的狀態進行判斷時需要先判斷indeterminate屬性，在判斷checked屬性值。

16. image提交按鈕的height屬性與width屬性

表單提交的圖片按鈕

17. textarea元素的maxlength屬性與wrap屬性

maxlength :，用于限定textarea元素設置最大輸入值。

wrap:其屬性值為soft與hard。當屬性為hard時，在沒有用回車鍵而是文字超出一排規定范圍而自動換行時，提交表單時會加換行符。soft則在提交時不會加換行符。

18：在HTML5中增加了input許多的type種類

比如URL類型，email類型，在輸入時會要求一定的格式，自動判斷輸入是否符合格式

date類型，time類型，是專門用來輸入時間的。

datetime-local類型是專門用來檢查本地日期和時間的，提交時對輸入日期進行有效性檢查。

month類型專門輸入月份的文本框。

week類型專門輸入周的文本框。

number類型專門輸入數字。

range類型是一種只允許輸入一段范圍內的數值的文本框。

search類型是一種專門用來輸入搜索的關鍵詞的文本框。

Tel類型用于輸入電話的專業文本框。

color類型用于選取顏色，會自動出來顏色選擇器。

19：日期時間類型的新增元素的屬性step屬性，valueAsDate屬性

step屬性： ?是對指定屬性值的選擇值得限定。? 控制元素的值增加或減少的步幅。

valueAsDate屬性：是用于設置或獲取UTC日期和時間。

——參考自《HTML5與css3的權威指南》

希望能遇到一起進步的

。