Form元素總結(jié)

1、Form元素：作用：表單主要用于收集用戶的信息 凡是用于收集用戶信息的控件都必需要有name屬性，有些控件(例如checkbox、radio)必需 明確指明value屬性，大部分控件可以指定默認(rèn)的value值，也可以不指定直接獵取用戶輸入的就可以了Form元素的屬性：action、method：get&post enctype、name、accept-charset、accept、target、autocomplete、novalidate<Input>:類型 <input type="">Text、password、submit、reset

2、、image、hidden、email、url、tel、number、range(date)datetime/datetime-local/date/month/week/time、color、search、file、multiple、checkbox、radio：checked<INPUT>元素的屬性：Type、name、value、maxlength、readonly、disabled、required、placeholder、autofocus、accesskey、tabindex、autocomplete、size<lable>的屬性：for、accesskey

3、<select>的屬性：option（optgroup可以分組）、autofocus、disabled、<datalist>的屬性：option<textarea>的屬性：name、disabled、readonly、form、reauired、autofocus、placeholder、Cols、rows<button>button元素的屬性Submit、reset、buttonname、vlue、disableautofocus、form、formmethodFormnovalidate、Fomaction、Formenctype、formt

4、arget、<output>的屬性name、form、for、oninput表單大事：當(dāng)用戶對(duì)元素?cái)?shù)據(jù)的輸入時(shí)觸發(fā)parseInt() 是一個(gè)javascript函數(shù)，它可以解析一個(gè)字符串，并返回一個(gè)整數(shù)。<progress>元素用來(lái)建立一個(gè)進(jìn)度條；通常與JavaScript 一同使用，來(lái)顯示任務(wù)的進(jìn)度。progress元素的屬性：max屬性：規(guī)定當(dāng)前進(jìn)度的最大值。value屬性設(shè)定進(jìn)度條當(dāng)前默認(rèn)顯示值form屬性：規(guī)定進(jìn)度條所屬的一個(gè)或多個(gè)表單。<meter>元素是HTML5中新增的元素，用來(lái)建立一個(gè)度量條,用來(lái)表示度量衡的評(píng)定meter元素的屬性：val

5、ue屬性設(shè)定進(jìn)度條當(dāng)前默認(rèn)顯示值max屬性：規(guī)定范圍的最大值，默認(rèn)值為1.min屬性：規(guī)定范圍的最小值，默認(rèn)值為0.low屬性：規(guī)定被視作低的標(biāo)準(zhǔn)。high屬性：規(guī)定被視作高標(biāo)準(zhǔn)。form屬性：規(guī)定所屬的一個(gè)或多個(gè)表單。<fieldset><legend>元素的用法fieldset元素：可將表單內(nèi)的相關(guān)元素分組。當(dāng)一組表單元素放到fieldset標(biāo)簽內(nèi)時(shí)，掃瞄器會(huì)以特殊方式來(lái)顯示它們，通常會(huì)有一個(gè)邊框。沒(méi)有必需的或唯一的屬性。form/disabled屬性可用。legend元素：為 fieldset 元素定義標(biāo)題<keygen>元素是HTML5中新增的元素，

6、用來(lái)建立一個(gè)密鑰生成器當(dāng)提交表單時(shí)，私鑰存儲(chǔ)在本地，公鑰發(fā)送到服務(wù)器。主要作用是供應(yīng)一種用戶驗(yàn)證身份的方法使用時(shí)留意不同掃瞄器支持程度不同；目前Internet Explorer 和 Safari暫不支持keygen元素元素的屬性：name/form/autofocus/disabledchallenge屬性:將 keygen 的值設(shè)置為在提交時(shí)詢問(wèn)。keytype屬性：定義密鑰類型，如設(shè)置為rsa（一種密碼的算法），則生成 RSA 密鑰。了解內(nèi)容，非本課程內(nèi)容，有愛好的同學(xué)課下課自己查閱相關(guān)資料：RSA是目前最有影響力的公鑰加密算法，它能夠抵制到目前為止已知的絕大多數(shù)密碼攻擊，已被ISO推舉

7、為公鑰數(shù)據(jù)加密標(biāo)準(zhǔn)。details元素：用于描述文檔或文檔某個(gè)部分的細(xì)節(jié)。通常與summary元素協(xié)作使用，可以為 details 定義標(biāo)題。標(biāo)題是可見的，用戶點(diǎn)擊標(biāo)題時(shí)，會(huì)顯示出 details中的內(nèi)容。details元素的屬性：open屬性：規(guī)定在 HTML 頁(yè)面上 details 是可見的。目前還不是所以掃瞄器都支持，但是信任以后都會(huì)支持的 FORM屬性具體講解：accept屬性：指定服務(wù)器處理表單時(shí)所能接受的數(shù)據(jù)形態(tài)，一般默認(rèn)即可accept-charset: （僅作了解）指定表單處理數(shù)據(jù)時(shí)所能接受的字符編碼target屬性:指定在何處打開action屬性所指定的URL目標(biāo)enctyp

8、e屬性：規(guī)定在發(fā)送到服務(wù)器之前應(yīng)當(dāng)如何對(duì)表單數(shù)據(jù)進(jìn)行編碼。當(dāng)method設(shè)定發(fā)送方式為get時(shí)，不必設(shè)置該屬性；當(dāng)method設(shè)定發(fā)送方式為post時(shí)該屬性才有效；默認(rèn)地，表單數(shù)據(jù)會(huì)編碼為 "application/x-www-form-urlencoded"。就是說(shuō)，在發(fā)送到服務(wù)器之前，全部字符都會(huì)進(jìn)行編碼（空格轉(zhuǎn)換為 "+" 加號(hào)，特殊符號(hào)轉(zhuǎn)換為 ASCII HEX 值）。當(dāng)值設(shè)為"multipart/form-data"時(shí)表示：不對(duì)字符編碼。在使用包含文件上傳控件的表單時(shí)（比如當(dāng)input的type值為file時(shí)），必需使用該值

9、。text/plain:空格轉(zhuǎn)換為 "+" 加號(hào)，但不對(duì)特殊字符編碼。reset：重寫 form 元素的某些屬性設(shè)定。表單重寫屬性適用于提交按鈕formaction - 重寫表單的 action 屬性formenctype - 重寫表單的 enctype 屬性formmethod - 重寫表單的 method 屬性formnovalidate - 重寫表單的 novalidate 屬性formtarget - 重寫表單的 target 屬性button元素用來(lái)建立一個(gè)按鈕從功能上來(lái)說(shuō)，與input元素建立的按鈕相同button元素是雙標(biāo)簽，其內(nèi)部可以配置圖片與文字，進(jìn)行更簡(jiǎn)

10、單的樣式設(shè)計(jì)不僅可以在表單中使用，還可以在其他塊元素和內(nèi)聯(lián)元素中使用button元素的屬性type屬性：可以設(shè)置三個(gè)值 submit/reset/button與input元素設(shè)置的按鈕含義相同name/vlue/disable屬性：與input的用法相同autofocus屬性：設(shè)置按鈕自動(dòng)獲得焦點(diǎn)。form屬性：設(shè)定按鈕隸屬于哪一個(gè)或多個(gè)表單formmethod屬性：設(shè)定表單的提交方式，將掩蓋原本的提交方式formnovalidate屬性：設(shè)定表單將會(huì)掩蓋原本的novalidate屬性fomaction屬性：指定表單數(shù)據(jù)發(fā)送對(duì)象，將掩蓋原來(lái)的action屬性設(shè)定formenctype屬性;指定

11、表單的數(shù)據(jù)發(fā)送類型，將掩蓋原本的enctype屬性設(shè)定formtarget屬性：將掩蓋原本的target屬性設(shè)定重要事項(xiàng)：假如在表單中使用 button 元素，不同的掃瞄器會(huì)提交不同的值。Internet Explorer 將提交 button元素開頭標(biāo)簽與結(jié)束標(biāo)簽之間的文本，而其他掃瞄器將提交 value 屬性的內(nèi)容。最好就是在表單中使用 input 元素來(lái)創(chuàng)建按鈕。其他地方使用button創(chuàng)建按鈕Form元素的子元素：<Input>:類型 <input type="">Text、password、submit、reset、image、hidden

12、、email、url、tel、number、range(date)datetime/datetime-local/date/month/week/time、color、search、file、multiple、checkbox、radio<INPUT>元素的屬性：Type、name、value、maxlength、readonly、disabled、required、placeholder、autofocus、accesskey、tabindex、autocompletetype屬性：指定輸入內(nèi)容的類型，默認(rèn)為text:單行文本框name屬性:輸入內(nèi)容的識(shí)別名稱，傳遞參數(shù)時(shí)候的參數(shù)

13、名稱value屬性:默認(rèn)值maxlength:輸入的最大字?jǐn)?shù)readonly屬性：只讀屬性，設(shè)置內(nèi)容不行變更，提交時(shí)會(huì)以前發(fā)送至服務(wù)器disabled屬性：設(shè)置為不行用（不行操作）required屬性：設(shè)置該內(nèi)容為必需填寫項(xiàng)，否則無(wú)法提交placeholder屬性：設(shè)置默認(rèn)值，當(dāng)文本框獲得焦點(diǎn)時(shí)被清空，對(duì)text/url/tel/email/password/search有效autofocus屬性：自動(dòng)獲得焦點(diǎn)accesskey屬性：指定快捷鍵windows中，指定快捷鍵后，按Alt+“快捷鍵”,便會(huì)獲得焦點(diǎn)tabindex屬性：指定按Tab鍵時(shí)，項(xiàng)目間的移動(dòng)挨次autocomplet屬性：

14、HTML5新增屬性屬性值為on/off,定義是否開啟掃瞄器自動(dòng)記憶功能<INPUT>的類型詳解默認(rèn)為textpassword：密碼狀態(tài)輸入submit:提交按鈕，點(diǎn)擊將數(shù)據(jù)發(fā)送至服務(wù)器reset:重置按鈕button:一般按鈕imge：圖片式提交按鈕hidden；隱蔽字段該內(nèi)容不會(huì)顯示頁(yè)面上一般為網(wǎng)頁(yè)設(shè)計(jì)者設(shè)置的變量數(shù)據(jù)，提交時(shí)，隱蔽內(nèi)容會(huì)提交到服務(wù)器email:表示要輸入一個(gè)電子郵箱這是HTML5新增的元素他會(huì)對(duì)輸入內(nèi)容進(jìn)行驗(yàn)證，在之前需要編寫大段的JS代碼來(lái)進(jìn)行這項(xiàng)工作掃瞄器版本比較低的話有可能不支持，不同的掃瞄器提示的效果可能有差異url:表示要輸入一個(gè)網(wǎng)址這是HTML5新增

15、的他會(huì)對(duì)輸入內(nèi)容進(jìn)行驗(yàn)證，在之前需要編寫大段的JS代碼來(lái)進(jìn)行這項(xiàng)工作掃瞄器版本比較低的話有可能不支持，不同的掃瞄器提示的效果可能有差異tel:表示輸入的內(nèi)容是一個(gè)電話號(hào)碼這是HTML5新增的他不會(huì)對(duì)輸入內(nèi)容進(jìn)行驗(yàn)證掃瞄器版本比較低的話有可能不支持，不同的掃瞄器提示的效果可能有差異number:這是HTML5新增的可以協(xié)作input的max/min/step/value規(guī)定允許輸入的最大值/最小值/步長(zhǎng)/默認(rèn)值掃瞄器版本比較低的話有可能不支持，不同的掃瞄器提示的效果可能有差異range(活動(dòng)條)這是HTML5新增的；與number類型類似，也是表示肯定范圍的數(shù)值輸入，但是以一個(gè)活動(dòng)條的狀態(tài)顯示可

16、以協(xié)作input的max/min/step/value規(guī)定的最大值/最小值/步長(zhǎng)/默認(rèn)值掃瞄器版本比較低的話有可能不支持，不同的掃瞄器提示的效果可能有差異時(shí)間類這是HTML5新增的；包括datetime/datetime-local/date/month/week/time掃瞄器版本比較低的話有可能不支持，不同的掃瞄器支持程度不同color這是HTML5新增的；可以建立一個(gè)顏色的選擇輸入框掃瞄器版本比較低的話有可能不支持，不同的掃瞄器支持程度不同seacrch這是HTML5新增的；用于建立一個(gè)搜尋框，用來(lái)供用戶輸入搜素的關(guān)鍵詞掃瞄器版本比較低的話有可能不支持，不同的掃瞄器支持程度不同file用

17、來(lái)創(chuàng)建一個(gè)文件選取的輸入框可通過(guò)accept屬性規(guī)定選取文件的類型，比如圖片/視頻multipe屬性可以設(shè)定一次允許選擇多個(gè)文件checkbox/復(fù)選框用來(lái)創(chuàng)建一個(gè)復(fù)選框（可以多項(xiàng)選擇）通過(guò)checked屬性可講某個(gè)選項(xiàng)設(shè)為默認(rèn)的選取狀態(tài)，再次單擊取消選取radio/單選框用來(lái)創(chuàng)建一個(gè)單選框（可以多項(xiàng)選擇）通過(guò)checked屬性可講某個(gè)選項(xiàng)設(shè)為默認(rèn)的選取狀態(tài)，再次單擊取消選取必需將同一組單選項(xiàng)設(shè)置一個(gè)相同的name屬性值其他子元素：<lable>的屬性：for、accesskey用來(lái)為 input 元素定義標(biāo)注（標(biāo)記）,建立一個(gè)與之相關(guān)聯(lián)的標(biāo)簽for屬性，讓標(biāo)簽與指定的input元

18、素建立關(guān)聯(lián)將input元素包含在label標(biāo)簽中可以通過(guò)accesskey建立快捷鍵（已經(jīng)講過(guò)內(nèi)容，不再演示）lable屬性在option元素中可以設(shè)定比標(biāo)簽內(nèi)容更優(yōu)先的選項(xiàng)optgroup的分組名稱select元素用來(lái)建立一個(gè)下拉菜單選項(xiàng)列表不僅可以在表單中使用，還可以在其他塊元素和內(nèi)聯(lián)元素中使用select只是定義一個(gè)下拉菜單列表，其具體列表項(xiàng)要通過(guò)option元素建立option元素可以用來(lái)建立一個(gè)選項(xiàng)，即下拉列表的一個(gè)菜單項(xiàng)optgroup元素用來(lái)對(duì)option元素進(jìn)行組合分組size用來(lái)定義列表中顯示的列表項(xiàng)multiple屬性用來(lái)定義是否可以多選可以添加disabled屬性和aut

19、ofocus屬性datalist元素HTML5新增元素，用來(lái)建立一個(gè)選項(xiàng)列表datalist元素的內(nèi)容不會(huì)直接顯示在網(wǎng)頁(yè)上，只是會(huì)在用戶輸入時(shí)作為候選項(xiàng)通常與input元素協(xié)作使用textarea元素用來(lái)建立多行輸入文本框元素標(biāo)簽中的內(nèi)容將一文本框默認(rèn)值的形式呈現(xiàn)不僅可以用在表單中，也可以在其他塊元素或內(nèi)聯(lián)元素中textarea元素的屬性：name/disabled/readonly/form/reauired/autofocus/placeholder屬性，這些屬性的用法之前課程中已經(jīng)有講解，就不再一一演示rows屬性：設(shè)置多行文本的行數(shù)（高度）cols屬性：設(shè)置多行文本的每行顯示的字?jǐn)?shù)（寬

20、度）補(bǔ)充內(nèi)容，input元素的size屬性button元素用來(lái)建立一個(gè)按鈕從功能上來(lái)說(shuō)，與input元素建立的按鈕相同button元素是雙標(biāo)簽，其內(nèi)部可以配置圖片與文字，進(jìn)行更簡(jiǎn)單的樣式設(shè)計(jì)不僅可以在表單中使用，還可以在其他塊元素和內(nèi)聯(lián)元素中使用button元素的屬性type屬性：可以設(shè)置三個(gè)值 submit/reset/button與input元素設(shè)置的按鈕含義相同name/vlue/disable屬性：與input的用法相同autofocus屬性：設(shè)置按鈕自動(dòng)獲得焦點(diǎn)。form屬性：設(shè)定按鈕隸屬于哪一個(gè)或多個(gè)表單formmethod屬性：設(shè)定表單的提交方式，將掩蓋原本的提交方式formno

21、validate屬性：設(shè)定表單將會(huì)掩蓋原本的novalidate屬性fomaction屬性：指定表單數(shù)據(jù)發(fā)送對(duì)象，將掩蓋原來(lái)的action屬性設(shè)定formenctype屬性;指定表單的數(shù)據(jù)發(fā)送類型，將掩蓋原本的enctype屬性設(shè)定formtarget屬性：將掩蓋原本的target屬性設(shè)定重要事項(xiàng)：假如在表單中使用 button 元素，不同的掃瞄器會(huì)提交不同的值。Internet Explorer 將提交 button元素開頭標(biāo)簽與結(jié)束標(biāo)簽之間的文本，而其他掃瞄器將提交 value 屬性的內(nèi)容。最好就是在表單中使用 input 元素來(lái)創(chuàng)建按鈕。其他地方使用button創(chuàng)建按鈕form元素的屬性

22、小結(jié)action/method/enctype/name/accept-charset/accept/target/autocomplete/novalidateaccept屬性：（僅作了解）指定服務(wù)器處理表單時(shí)所能接受的數(shù)據(jù)形態(tài)，一般默認(rèn)即可accept-charset: （僅作了解）指定表單處理數(shù)據(jù)時(shí)所能接受的字符編碼target屬性:指定在何處打開action屬性所指定的URL目標(biāo)enctype屬性：(了解即可)規(guī)定在發(fā)送到服務(wù)器之前應(yīng)當(dāng)如何對(duì)表單數(shù)據(jù)進(jìn)行編碼。當(dāng)method設(shè)定發(fā)送方式為get時(shí)，不必設(shè)置該屬性；當(dāng)method設(shè)定發(fā)送方式為post時(shí)該屬性才有效；默認(rèn)地，表單數(shù)據(jù)會(huì)編碼

23、為 "application/x-www-form-urlencoded"。就是說(shuō)，在發(fā)送到服務(wù)器之前，全部字符都會(huì)進(jìn)行編碼（空格轉(zhuǎn)換為 "+" 加號(hào)，特殊符號(hào)轉(zhuǎn)換為 ASCII HEX 值）。當(dāng)值設(shè)為"multipart/form-data"時(shí)表示：不對(duì)字符編碼。在使用包含文件上傳控件的表單時(shí)（比如當(dāng)input的type值為file時(shí)），必需使用該值。text/plain:空格轉(zhuǎn)換為 "+" 加號(hào)，但不對(duì)特殊字符編碼。表單的重寫：重寫 form 元素的某些屬性設(shè)定。表單重寫屬性適用于提交按鈕formaction

24、- 重寫表單的 action 屬性formenctype - 重寫表單的 enctype 屬性formmethod - 重寫表單的 method 屬性formnovalidate - 重寫表單的 novalidate 屬性formtarget - 重寫表單的 target 屬性button元素用來(lái)建立一個(gè)按鈕從功能上來(lái)說(shuō)，與input元素建立的按鈕相同button元素是雙標(biāo)簽，其內(nèi)部可以配置圖片與文字，進(jìn)行更簡(jiǎn)單的樣式設(shè)計(jì)不僅可以在表單中使用，還可以在其他塊元素和內(nèi)聯(lián)元素中使用button元素的屬性type屬性：可以設(shè)置三個(gè)值 submit/reset/button與input元素設(shè)置的按鈕含

25、義相同name/vlue/disable屬性：與input的用法相同autofocus屬性：設(shè)置按鈕自動(dòng)獲得焦點(diǎn)。form屬性：設(shè)定按鈕隸屬于哪一個(gè)或多個(gè)表單formmethod屬性：設(shè)定表單的提交方式，將掩蓋原本的提交方式formnovalidate屬性：設(shè)定表單將會(huì)掩蓋原本的novalidate屬性fomaction屬性：指定表單數(shù)據(jù)發(fā)送對(duì)象，將掩蓋原來(lái)的action屬性設(shè)定formenctype屬性;指定表單的數(shù)據(jù)發(fā)送類型，將掩蓋原本的enctype屬性設(shè)定formtarget屬性：將掩蓋原本的target屬性設(shè)定重要事項(xiàng)：假如在表單中使用 button 元素，不同的掃瞄器會(huì)提交不同的值

26、。Internet Explorer 將提交 button元素開頭標(biāo)簽與結(jié)束標(biāo)簽之間的文本，而其他掃瞄器將提交 value 屬性的內(nèi)容。最好就是在表單中使用 input 元素來(lái)創(chuàng)建按鈕。其他地方使用button創(chuàng)建按鈕output元素：數(shù)據(jù)的輸出output元素是HTML5新增的元素，用來(lái)設(shè)置不同數(shù)據(jù)的輸出output元素的輸出內(nèi)容是由代碼把握的這節(jié)課的演示需要用到簡(jiǎn)潔的javascript學(xué)問(wèn),臨時(shí)不理解沒(méi)關(guān)系，主要是了解output元素的使用方法，后邊的課程中我們支配了特地的章節(jié)講解javascriptoutput元素的屬性：name屬性：定義對(duì)象的唯一名稱。（表單提交時(shí)使用）form屬性

27、：定義所屬的一個(gè)或多個(gè)表單。for屬性：定義輸出域相關(guān)的一個(gè)或多個(gè)元素。案例演示需要用到兩個(gè)沒(méi)有學(xué)過(guò)的學(xué)問(wèn)，表單大事oninput表單大事：當(dāng)用戶對(duì)元素?cái)?shù)據(jù)的輸入時(shí)觸發(fā)parseInt() 是一個(gè)javascript函數(shù)，它可以解析一個(gè)字符串，并返回一個(gè)整數(shù)。progress元素是HTML5中新增的元素，用來(lái)建立一個(gè)進(jìn)度條通常與JavaScript 一同使用，來(lái)顯示任務(wù)的進(jìn)度。使用時(shí)留意掃瞄器的支持狀況：Internet Explorer 9 以及更早的版本不支持progress元素的屬性：max屬性：規(guī)定當(dāng)前進(jìn)度的最大值。value屬性設(shè)定進(jìn)度條當(dāng)前默認(rèn)顯示值form屬性：規(guī)定進(jìn)度條所屬的一個(gè)或多個(gè)表單。me