與form表單相關(guān)的元素有哪些

本篇內(nèi)容介紹了“與form表單相關(guān)的元素有哪些”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

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

form元素

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

除此之外還包括action（指定當(dāng)單機(jī)表內(nèi)確定按鈕時(shí)，該表單跳轉(zhuǎn)到那個(gè)地址）、method（指定提交表單時(shí)發(fā)送何種類型請(qǐng)求，值可以為get或者post）、enctype（指定對(duì)表達(dá)內(nèi)容進(jìn)行編碼所使用的字符集）、name（指定表單的唯一名稱）、target（指定個(gè)適用哪種方式打開目標(biāo)URL）。

input元素

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

密碼輸入框：

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

隱藏域：

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

單選框

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

復(fù)選框

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

重設(shè)按鈕

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

無動(dòng)作按鈕

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

<input …/>的一些焦點(diǎn)屬性

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

label元素

label元素可以指定id、class、style等核心屬性，也可以指定onclick等事件屬性。除此之外，還可以指定一個(gè)for屬性，該屬性指定該標(biāo)簽與那個(gè)表單控件關(guān)聯(lián)。用法為for=""，引號(hào)內(nèi)為相關(guān)控件的id。

button元素

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

disabled：指定是否禁用此按鈕。
name：制定該按鈕的唯一名稱，該屬性名稱應(yīng)該與id保持一致。
type：指定該按鈕屬于那種按鈕，該屬性值只能是button、reset或submit其中之一。
value：指定該按鈕的初始值?？梢酝ㄟ^js腳本進(jìn)行更改。

select與option元素

<select…/>元素用于創(chuàng)建列表框或下拉菜單，鈣元素必須和<option…/>元素結(jié)合適用，每個(gè)<option…/>元素代表一個(gè)列表項(xiàng)或菜單項(xiàng)。
<select…/>元素可以指定id、class、style等核心屬性，該元素盡可以指定onchange事件屬性——當(dāng)該列表框或者下拉列表項(xiàng)內(nèi)的選中選項(xiàng)發(fā)生改變時(shí)，出發(fā)onchange事件。

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

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

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

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

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

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

disabled：指定禁用該選項(xiàng)，該屬性的值只能為disabled。
selected：指定該流標(biāo)箱初始狀態(tài)是否處于被選中狀態(tài)。該屬性的值只能是selected。
value：指定該選項(xiàng)對(duì)應(yīng)的請(qǐng)求參數(shù)值。

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

label：指定該選項(xiàng)組的標(biāo)簽。這個(gè)屬性必填。
disabled：設(shè)置禁用該選項(xiàng)組里的所有選項(xiàng)。該屬性值只能是disabled或者省略該屬性值。

HTML5增強(qiáng)的textarea

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

cols：指定文本域的寬度，屬于必填項(xiàng)。
rows：指定文本的高度，屬于必填項(xiàng)。
disabled：指定禁用該文本域。該屬性值只能為disabled。
readonly：指定文本域只讀。該屬性值只能為readonly。
maxlength：設(shè)置該多行文本域最多可以輸入的字符數(shù)。
wrap：指定多行文本域是否添加換行符。該屬性支持soft和hard兩個(gè)屬性值。如果將屬性值設(shè)置為hard，則必須指定cols屬性，如果輸入的字符超過了cols指定寬度導(dǎo)致文本換行，那么提交該表單時(shí)該多行文本域?qū)?huì)自動(dòng)在換行處添加換行符。

fieldset與legend元素

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

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

HTML新增的表單屬性

form的表單屬性

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

formaction屬性

html5為處理同一表單中同時(shí)包含注冊(cè)、登錄兩個(gè)按鈕的問題，對(duì)于sumit、reset、image都可以指定formaction，該屬性即可動(dòng)態(tài)的讓表單提交到不同的URL。

formxxxx屬性

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

formenctype：該屬性可以讓按鈕動(dòng)態(tài)的變成enctype屬性。
formmethod：該屬性可以讓按鈕動(dòng)態(tài)的變成method屬性。
formtarget：該屬性可以讓按鈕動(dòng)態(tài)的變成target屬性。

autofocus屬性

這是一個(gè)非常常用的屬性，作用就是在打開網(wǎng)頁的時(shí)候自動(dòng)聚焦到對(duì)應(yīng)的位置。用法為添加到對(duì)對(duì)應(yīng)的代碼中，如：<input type="password" name="name" autofocus />該代碼中autofocus的作用就是在打開網(wǎng)頁時(shí)自動(dòng)聚焦到該密碼框。

placeholder屬性

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

list屬性

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

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

autocomplete屬性

該輸贏用于控制在點(diǎn)擊文本框時(shí)是否自動(dòng)顯示之前的填寫歷史，瀏覽器默認(rèn)啟動(dòng)該功能，該屬性支持兩個(gè)屬性值：

on：打開autocomplete，文本框下方會(huì)顯示下拉菜單。
off：關(guān)閉autocomplete，文本框下方不會(huì)顯示下拉菜單。

label的control屬性

html5為<label…/>元素提供了一個(gè)control屬性，該屬性用于在javascropt腳本中訪問該<label…/>元素所關(guān)聯(lián)的表單元素。

表單中的labels屬性

表單元素與<label…/>元素之間具有一對(duì)多的相關(guān)聯(lián)關(guān)系，<label…/>元素獲取他關(guān)聯(lián)的表單元素適用control屬性，而表單元素獲取與他相關(guān)聯(lián)的<label…/>元素適用labels屬性。

文本框中的selectionDirection屬性

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

• 用戶正向選取文字時(shí)，返回值為forward

• 用戶反向選取文字時(shí)，返回值為backward

• 用戶沒有選取文字時(shí)，返回值為上一次用戶做的選擇

HTML5新增的表單元素

功能豐富的input元素

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

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

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

tel：生成一個(gè)輸入電話號(hào)碼的文本框。
ur：生成一個(gè)輸入U(xiǎn)RL的文本框，瀏覽器會(huì)自動(dòng)檢查輸入的URL是否符合格式。
number：生成一個(gè)只能輸入數(shù)字的文本框。

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

range：生成一個(gè)拖動(dòng)條，還會(huì)有如下的屬性：

min：該拖動(dòng)條的最小值。
max：該拖動(dòng)條的最大值。
step：指定拖動(dòng)條的步長。

search：生成一個(gè)專門用于輸入搜索關(guān)鍵字的文本框。

output元素

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

for：該屬性制動(dòng)該元素將會(huì)顯示那個(gè)或者那些元素的值。

meter元素

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

value：指定計(jì)數(shù)儀表的當(dāng)前值。默認(rèn)為0.
min：指定計(jì)數(shù)儀表的最小值，默認(rèn)為0.
max：指定計(jì)數(shù)儀表的最大值。默認(rèn)為1.
low:指定計(jì)數(shù)儀表指定范圍的最小值，必須大于等于min的值。
high：指定計(jì)數(shù)儀表指定范圍的最大值，必須小于等于max的值。
optimum：指定個(gè)計(jì)數(shù)儀表有效范圍的最佳值。

progress

<progress…/>元素用于表示一個(gè)進(jìn)度條。該元素除了可以指定id、class、style等核心屬性外還可以指定如下的屬性。
max：指定進(jìn)度條完成時(shí)的值。
value：指定當(dāng)前完成的進(jìn)度值。

HTML5新增的客戶端校驗(yàn)

使用校驗(yàn)屬性執(zhí)行校驗(yàn)

HTML5為表單控件添加了如下幾種校驗(yàn)屬性。

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

調(diào)用checkValidity方法進(jìn)行校驗(yàn)

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

• 如果表單對(duì)象調(diào)用checkValidity()方法返回true，則表明該表達(dá)誒的所有表單元素通過輸入檢驗(yàn)。

關(guān)閉校驗(yàn)

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

• 為submit、button元素設(shè)置formnovalidate屬性，當(dāng)用戶通過該提交按鈕提交表單時(shí)，該表單將關(guān)閉校驗(yàn)功能。

“與form表單相關(guān)的元素有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！