全方位整理與form表單相關的元素！

HTML原有的表單以及表單控制項

form元素

#元素不會產生視覺化部分。可以置頂id、class、style等核心內容，還可以指定onclick等事件屬性。

除此之外還包括action（指定當單機表內確定按鈕時，該表單跳到該位址）、method（指定提交表單時發送何種類型請求，值可以為get或post )、enctype（指定對錶達內容進行編碼所使用的字元集）、name（指定表單的唯一名稱）、target（指定個適用哪種方式開啟目標URL）。 【建議：HTML影片教學】

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" />

的一些焦點屬性

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

label元素

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

button元素

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

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

select與option元素

元素用於建立列錶框或下拉選單，鈣元素必須和元素結合適用，每個元素代表一個清單項目或選單項目。
元素可以指定id、class、style等核心屬性，該元素盡可以指定onchange事件屬性－當該列錶框或下拉清單項目內的選取選項發生變更時，出發onchange事件。

除此之外，元素還可以指定以下幾個屬性。

disabled：設定停用該列錶框和下拉式選單。該屬性的值只能是disabled或省略屬性值。
multiple：設定該列錶框和下拉式選單是否允許多重選擇。一旦設定允許多選元素就會自動產生列錶框。
size：指定該列錶框和下拉式選單可同時實作多少個清單項目。一旦設定允許多選元素就會自動產生列錶框。

在元素裡，只能包含以下兩種子元素。

：用於定義清單項目或選單項目。該元素裡只能包含文字內容作為該選項的文字。
：用於定義清單項目或選單線組。該元素只能包含子元素。

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

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

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

元素可以指定元素可以指定id、class、style等核心屬性，還可以指定onclick等事件回應屬性。除此之外還有以下幾個屬性。

label：指定該選項組的標籤。這個屬性必填。
disabled：設定停用該選項群組裡的所有選項。該屬性值只能是disabled或省略該屬性值。

HTML5增強的textarea

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

cols：指定文字域的寬度，屬於必填項。
rows：指定文字的高度，屬於必填項。
disabled：指定停用該文字域。該屬性值只能為disabled。
readonly：指定文字域只讀。該屬性值只能為readonly。
maxlength：設定該多行文字域最多可以輸入的字元數。
wrap：指定多行文字域是否要新增換行符號。此屬性支援soft和hard兩個屬性值。如果將屬性值設為hard，則必須指定cols屬性，如果輸入的字元超過了cols指定寬度導致文字換行，那麼提交該表單時該多行文字域將會自動在換行處新增換行符。

fieldset與legend元素

元素可用來將表單內表單元素分組。 ，此元素可以指定id、class、style等核心元素，還可以指定以下三個屬性。

name：指定該元素的名稱。
form：該屬性的屬性值必須是一個有有效的元素的id，用於指定該元素屬於該表單。
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屬性的值應該是一個元件的id，也就是說list必須與元素結合使用。

元素相當於一個看不見的元素，用來產生一個隱藏的下拉式選單。 所能包含的子元素與元素相同。此元素用於與指定的了list屬性的元素結合使用。當雙擊list屬性的文字方塊時，顯示產生的下拉式選單。

autocomplete屬性

此輸贏用於控制在點擊文字方塊時是否自動顯示先前的填寫歷史記錄，瀏覽器預設啟動該功能，該屬性支援兩個屬性值：

on：開啟autocomplete，文字方塊下方會顯示下拉式選單。
off：關閉autocomplete，文字方塊下方不會顯示下拉式選單。

label的control屬性

html5為元素提供了一個control屬性，該屬性用於在javascropt腳本中存取該元素所關聯的表單元素。

表單中的labels屬性

表單元素與元素之間具有一對多的相關聯關係，元素取得他關聯的表單元素適用control屬性，而表單元素取得與他相關聯的元素適用labels屬性。

文字方塊中的selectionDirection屬性

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

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

HTML5新增的表單元素

功能豐富的input元素

HTML5為元素新增瞭以下幾種可能的類型。

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新增了表單控件，該元素用於顯示輸出。該元素除了可以指定id、class、style等核心屬性外還可以指定如下屬性。

for：該屬性煞車該元素將會顯示那個或那些元素的值。

meter元素

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

value：指定計數儀表的目前值。預設為0.
min：指定計數儀表的最小值，預設為0.
max：指定計數儀表的最大值。預設為1.
low:指定計數儀表指定範圍的最小值，必須大於等於min的值。
high：指定計數儀表指定範圍的最大值，必須小於等於max的值。
optimum：指定個計數儀表有效範圍的最佳值。

progress

元素用來表示一個進度列。該元素除了可以指定id、class、style等核心屬性外還可以指定如下的屬性。
max：指定進度列完成時的值。
value：指定目前完成的進度值。

HTML5新增的用戶端校驗

使用校驗屬性執行校驗

HTML5為表單控制項新增瞭以下幾種校驗屬性。

required：此屬性指定該表單控制項必須填入。
pattern：此屬性指定該表單控制項的值必須符合指定的正規表示式。
min、max、step：這三個屬性只對數值類型、日期類型的元素有效，這個元素必須在min~max之間，並且符合step步長。

呼叫checkValidity方法進行校驗

• 如果表單對i昂呼叫checkValidity()方法傳回true，則表示該表單內的所有表單元素的輸入有效

• 如果表單物件呼叫checkValidity()方法傳回true，則表示該表達詶的所有表單元素都通過輸入檢定。

關閉校驗

• 為元素增加novalidate屬性，該屬性是一個支援boolean值的屬性。

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

#

以上是全方位整理與form表單相關的元素！的詳細內容。更多資訊請關注PHP中文網其他相關文章！