全方位整理與form表單相關的元素！
HTML原有的表單以及表單控制元件
form元素
<form…/>元素不會生成視覺化部分。可以置頂id、class、style等核心內容，還可以指定onclick等事件屬性。
除此之外還包括action（指定當單機表內確定按鈕時，該表單跳轉到那個地址）、method（指定提交表單時傳送何種型別請求，值可以為get或者post）、enctype（指定對錶達內容進行編碼所使用的字元集）、name（指定表單的唯一名稱）、target（指定個適用哪種方式開啟目標URL）。【推薦：】
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屬性，當使用者通過該提交按鈕提交表單時，該表單將關閉校驗功能。
以上就是全方位整理與form表單相關的元素！的詳細內容，更多請關注TW511.COM其它相關文章！
