HTML原有的表單以及表單控件

form元素

<form…/>元素不會生成可視化部分。可以置頂id、class、style等核心內容，還可以指定onclick等事件屬性。

除此之外還包括action（指定當單機表內確定按鈕時，該表單跳轉到那個地址）、method（指定提交表單時發送何種類型請求，值可以為get或者post）、enctype（指定對表達內容進行編碼所使用的字符集）、name（指定表單的唯一名稱）、target（指定個適用哪種方式打開目標URL）。【推薦：HTML視頻教程】

input元素

<input…/>元素是表單控件元素中功能最豐富的，下面是幾種input元素生產的：

密碼輸入框：

<input id="password" name="password" style="password" />

隱藏域：

<input id="hidden" name="hidden" style="hidden" />

單選框

<input id="radio" name="radio" style="radio" />

復選框

<input id="checkbox" name="checkbox" style="checkbox" />

圖像域

<input id="image" name="image" style="image" />

文件上傳域

<input id="file" name="file" style="file" />

提交按鈕

<input id="submit" name="submit" style="submit" />

重設按鈕

<input id="reset" name="reset" style="reset	" />

無動作按鈕

<input id="button" name="buton" style="button" />

<input …/>的一些焦點屬性

checked：設置單選框、復選框初始是否處于被選中狀態。
disabled：設置首次加載時用此元素。
maxlength：該屬性是一個數字，指定文本框中所允許輸入的最大數字。
readonly：指定文本框內的值不允許用戶修改（可使用js腳本修改）。該屬性是支持boolean值的屬性，表示該元素的值是只讀的。
size：該屬性值是一個數字，指定鈣元素的寬度。
src：指定圖像域所顯示圖像的URL.
width:指定圖像域所顯示圖像的寬度。
heigeht:指定圖像域所顯示圖像的高度。

label元素

label元素可以指定id、class、style等核心屬性，也可以指定onclick等事件屬性。除此之外，還可以指定一個for屬性，該屬性指定該標簽與那個表單控件關聯。用法為for=""，引號內為相關控件的id。

button元素

<button…/>元素用于定義一個按鈕，可以指定id、class、style等核心熟悉，還可以定義onclick等事件屬性。除此之外，還可以指定如下幾種元素。

disabled：指定是否禁用此按鈕。
name：制定該按鈕的唯一名稱，該屬性名稱應該與id保持一致。
type：指定該按鈕屬于那種按鈕，該屬性值只能是button、reset或submit其中之一。
value：指定該按鈕的初始值。可以通過js腳本進行更改。

select與option元素

<select…/>元素用于創建列表框或下拉菜單，鈣元素必須和<option…/>元素結合適用，每個<option…/>元素代表一個列表項或菜單項。
<select…/>元素可以指定id、class、style等核心屬性，該元素盡可以指定onchange事件屬性——當該列表框或者下拉列表項內的選中選項發生改變時，出發onchange事件。

除此之外，<select…/>元素還可以指定如下幾個屬性。

disabled：設置禁用該列表框和下拉菜單。該屬性的值只能是disabled或者省略屬性值。
multiple：設置該列表框和下拉菜單是否允許多選。一旦設置允許多選<select…/>元素就會自動生成列表框。
size：指定該列表框和下拉菜單可同時實現多少個列表項。一旦設置允許多選<select…/>元素就會自動生成列表框。

在<select…/>元素里，只能包含如下兩種子元素。

<option…/> ：用于定義列表項或者菜單項。該元素里只能包含文本內容作為該選項的文本。
<optgroup…/>：用于定義列表項或者菜單線組。該元素只能包含<option…/>子元素。

<option…/>元素可以指定id、class、style等核心元素還可以指定onclick等事件屬性。

除此之外還可以定義如下幾種元素。

disabled：指定禁用該選項，該屬性的值只能為disabled。
selected：指定該流標箱初始狀態是否處于被選中狀態。該屬性的值只能是selected。
value：指定該選項對應的請求參數值。

<optgroup…/>元素可以指定元素可以指定id、class、style等核心屬性，還可以指定onclick等事件響應屬性。除此之外還有如下幾個屬性。

label：指定該選項組的標簽。這個屬性必填。
disabled：設置禁用該選項組里的所有選項。該屬性值只能是disabled或者省略該屬性值。

HTML5增強的textarea

<textarea…/>元素用于生成多行文本域。<textarea…/>可以指定id、class、style等核心元素，還可以指定onclick等事件屬性。由于textarea的特殊性，它可以接收用戶輸入，用戶可以選中文本域內的文本，所以還可以指定onslect、onchange兩個屬性，分別應用于文本域中被選中、文本被修改時間。除此之外，該元素還可以指定如下元素。

cols：指定文本域的寬度，屬于必填項。
rows：指定文本的高度，屬于必填項。
disabled：指定禁用該文本域。該屬性值只能為disabled。
readonly：指定文本域只讀。該屬性值只能為readonly。
maxlength：設置該多行文本域最多可以輸入的字符數。
wrap：指定多行文本域是否添加換行符。該屬性支持soft和hard兩個屬性值。如果將屬性值設置為hard，則必須指定cols屬性，如果輸入的字符超過了cols指定寬度導致文本換行，那么提交該表單時該多行文本域將會自動在換行處添加換行符。

fieldset與legend元素

<fieldset…/>元素可用于對表單內表單元素進行分組。，該元素可以指定id、class、style等核心元素，還可以指定如下三個屬性。

name：指定該<fieldset…/>元素的名稱。
form：該屬性的屬性值必須是一個有有效的<form…/>元素的id，用于指定該<fieldset…/>元素屬于該表單。
disabled：該屬性用于禁用該表單元素。該屬性是一個支持boolean值的屬性。

HTML新增的表單屬性

form的表單屬性

html5為所有表單控件都新增了form屬性，因此在頁面上定義表單控件時更加靈活，可以隨意的防止、排列表單控件，這位頁面布局提供了更大的靈活性。

formaction屬性

html5為處理同一表單中同時包含注冊、登錄兩個按鈕的問題，對于sumit、reset、image都可以指定formaction，該屬性即可動態的讓表單提交到不同的URL。

formxxxx屬性

formxxxx屬性類似于formaction屬性，對于sumit、reset、image都可以指定formenctype、formmethod、formtarget等屬性，其中：

formenctype：該屬性可以讓按鈕動態的變成enctype屬性。
formmethod：該屬性可以讓按鈕動態的變成method屬性。
formtarget：該屬性可以讓按鈕動態的變成target屬性。

autofocus屬性

這是一個非常常用的屬性，作用就是在打開網頁的時候自動聚焦到對應的位置。用法為添加到對對應的代碼中，如：<input type="password" name="name" autofocus />該代碼中autofocus的作用就是在打開網頁時自動聚焦到該密碼框。

placeholder屬性

這個屬性也非常的常用，作用就是在用戶為輸入數據的文本框中給出對應的提示，如：<input type="text" name="username" palceholder="請輸入用戶名" />；該代碼中palceholder的作用就是在用戶未在文本框中輸入數據是顯示請輸入用戶名，使頁面更加的人性化。

list屬性

該屬性也非常的實用，在html5規范之前html表單屬性是沒有有類似于ComboBox的組件的。html5的list屬性剛好彌補了這個不足，list屬性的值應該是一個<datalist…/>組件的id，也就是說list必須與<datalist…/>元素結合使用。

<datalist…/>元素相當于一個看不見的<select…/>元素，用于生成一個隱藏的下拉菜單。<datalist…/>所能包含的子元素與<select…/>元素相同。該元素用于與指定的了list屬性的<input…/>元素結合使用。當雙擊list屬性的文本框時，顯示<datalist…/>生成的下拉菜單。

autocomplete屬性

該輸贏用于控制在點擊文本框時是否自動顯示之前的填寫歷史，瀏覽器默認啟動該功能，該屬性支持兩個屬性值：

on：打開autocomplete，文本框下方會顯示下拉菜單。
off：關閉autocomplete，文本框下方不會顯示下拉菜單。

label的control屬性

html5為<label…/>元素提供了一個control屬性，該屬性用于在javascropt腳本中訪問該<label…/>元素所關聯的表單元素。

表單中的labels屬性

表單元素與<label…/>元素之間具有一對多的相關聯關系，<label…/>元素獲取他關聯的表單元素適用control屬性，而表單元素獲取與他相關聯的<label…/>元素適用labels屬性。

文本框中的selectionDirection屬性

html5為單行文本框和多行文本域新增了一個selectionDirection只讀屬性，該屬性用于返回文本框內的文字方向。

• 用戶正向選取文字時，返回值為forward
• 用戶反向選取文字時，返回值為backward
• 用戶沒有選取文字時，返回值為上一次用戶做的選擇

HTML5新增的表單元素

功能豐富的input元素

HTML5為<input…/>元素新增了如下幾種可能的類型。

color：生成一個顏色選擇器，value的值為形如#xxxxxx的顏色值。
date：生成一個日期選擇器。
time：生成一個時間選擇器。
datetime-local：生成一個本地日期、時間選擇器。
week：生成一個供用戶選擇第幾周的文本框。
month：生活猜呢個一個月份選擇器。
max：指定日期時間的最大值。
step：指定日期、時間的步長。
email：生成一個E-mail輸入框，瀏覽器會自動檢查輸入的E-mai是否符合格式。

multiple：該屬性支持boolean類型，如果指定了該屬性值，則表示允許輸入多個E-mail地址，用英文逗號隔開。

tel：生成一個輸入電話號碼的文本框。
ur：生成一個輸入URL的文本框，瀏覽器會自動檢查輸入的URL是否符合格式。
number：生成一個只能輸入數字的文本框。

min：指定數值的最小值。
max：指定數值的最大值。
step：指定數字的步長。

range：生成一個拖動條，還會有如下的屬性：

min：該拖動條的最小值。
max：該拖動條的最大值。
step：指定拖動條的步長。

search：生成一個專門用于輸入搜索關鍵字的文本框。

output元素

HTML5新增了一個<output…/>表單控件，該元素用于顯示輸出。該元素除了可以指定id、class、style等核心屬性外還可以指定如下屬性。

for：該屬性制動該元素將會顯示那個或者那些元素的值。

meter元素

HTML5還新增了一個<meter…/>元素，該元素表示一個已知最大值和最小值的計數儀表。該元素出了可以定義id、class、style等核心熟悉外，還可以定義如下的屬性。

value：指定計數儀表的當前值。默認為0.
min：指定計數儀表的最小值，默認為0.
max：指定計數儀表的最大值。默認為1.
low:指定計數儀表指定范圍的最小值，必須大于等于min的值。
high：指定計數儀表指定范圍的最大值，必須小于等于max的值。
optimum：指定個計數儀表有效范圍的最佳值。

progress

<progress…/>元素用于表示一個進度條。該元素除了可以指定id、class、style等核心屬性外還可以指定如下的屬性。
max：指定進度條完成時的值。
value：指定當前完成的進度值。

HTML5新增的客戶端校驗

使用校驗屬性執行校驗

HTML5為表單控件添加了如下幾種校驗屬性。

required：該屬性指定該表單控件必須填寫。
pattern：該屬性指定該表單控件的值必須符合指定的正則表達式。
min、max、step：這三個屬性只對數值類型、日期類型的<input…/>元素有效，這個元素必須在min~max之間，并符合step步長。

調用checkValidity方法進行校驗

• 如果表單對i昂調用checkValidity()方法返回true，則表明該表單內的所有表單元素的輸入有效

• 如果表單對象調用checkValidity()方法返回true，則表明該表達誒的所有表單元素通過輸入檢驗。

關閉校驗

• 為<form…/>元素增加novalidate屬性，該屬性是一個支持boolean值的屬性。

• 為submit、button元素設置formnovalidate屬性，當用戶通過該提交按鈕提交表單時，該表單將關閉校驗功能。