Form元素總結(jié)

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

2、tetime/datetime-local/date/month/week/time、color、search、file、multiple、checkbox、radio：checked元素的屬性：Type、name、value、maxlength、readonly、disabled、required、placeholder、autofocus、accesskey、tabindex、autocomplete、size的屬性：for、accesskey的屬性：option（optgroup可以分組）、autofocus、disabled、的屬性：option的屬性：name、disabled、re

3、adonly、form、reauired、autofocus、placeholder、Cols、rowsbutton元素的屬性Submit、reset、buttonname、vlue、disableautofocus、form、formmethodFormnovalidate、Fomaction、Formenctype、formtarget、的屬性name、form、for、oninput表單事件：當(dāng)用戶對元素?cái)?shù)據(jù)的輸入時(shí)觸發(fā)parseInt() 是一個(gè)javascript函數(shù)，它可以解析一個(gè)字符串，并返回一個(gè)整數(shù)。元素用來建立一個(gè)進(jìn)度條；通常與JavaScript 一同使用，來顯示任務(wù)的進(jìn)度

4、。progress元素的屬性：max屬性：規(guī)定當(dāng)前進(jìn)度的最大值。value屬性設(shè)定進(jìn)度條當(dāng)前默認(rèn)顯示值form屬性：規(guī)定進(jìn)度條所屬的一個(gè)或多個(gè)表單。元素是HTML5中新增的元素，用來建立一個(gè)度量條,用來表示度量衡的評定meter元素的屬性：value屬性設(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元素：可將表單內(nèi)的相關(guān)元素分組。當(dāng)一組表單元素放到fieldset標(biāo)簽內(nèi)時(shí)，瀏覽器會(huì)以特殊方式來顯示它們，通

5、常會(huì)有一個(gè)邊框。沒有必需的或唯一的屬性。form/disabled屬性可用。legend元素：為 fieldset 元素定義標(biāo)題元素是HTML5中新增的元素，用來建立一個(gè)密鑰生成器當(dāng)提交表單時(shí)，私鑰存儲在本地，公鑰發(fā)送到服務(wù)器。主要作用是提供一種用戶驗(yàn)證身份的方法使用時(shí)注意不同瀏覽器支持程度不同；目前Internet Explorer 和 Safari暫不支持keygen元素元素的屬性：name/form/autofocus/disabledchallenge屬性:將 keygen 的值設(shè)置為在提交時(shí)詢問。keytype屬性：定義密鑰類型，如設(shè)置為rsa（一種密碼的算法），則生成 RSA 密鑰

6、。了解內(nèi)容，非本課程內(nèi)容，有興趣的同學(xué)課下課自己查閱相關(guān)資料：RSA是目前最有影響力的公鑰加密算法，它能夠抵抗到目前為止已知的絕大多數(shù)密碼攻擊，已被ISO推薦為公鑰數(shù)據(jù)加密標(biāo)準(zhǔn)。details元素：用于描述文檔或文檔某個(gè)部分的細(xì)節(jié)。通常與summary元素配合使用，可以為 details 定義標(biāo)題。標(biāo)題是可見的，用戶點(diǎn)擊標(biāo)題時(shí)，會(huì)顯示出 details中的內(nèi)容。details元素的屬性：open屬性：規(guī)定在 HTML 頁面上 details 是可見的。目前還不是所以瀏覽器都支持，但是相信以后都會(huì)支持的 FORM屬性詳細(xì)講解：accept屬性：指定服務(wù)器處理表單時(shí)所能接受的數(shù)據(jù)形態(tài)，一般默認(rèn)即可

7、accept-charset: （僅作了解）指定表單處理數(shù)據(jù)時(shí)所能接受的字符編碼target屬性:指定在何處打開action屬性所指定的URL目標(biāo)enctype屬性：規(guī)定在發(fā)送到服務(wù)器之前應(yīng)該如何對表單數(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。就是說，在發(fā)送到服務(wù)器之前，所有字符都會(huì)進(jìn)行編碼（空格轉(zhuǎn)換為 + 加號，特殊符號轉(zhuǎn)換為 ASCII HEX 值）。當(dāng)值設(shè)為multipart/form-data時(shí)表示：不對字符編碼。在

8、使用包含文件上傳控件的表單時(shí)（比如當(dāng)input的type值為file時(shí)），必須使用該值。text/plain:空格轉(zhuǎn)換為 + 加號，但不對特殊字符編碼。reset：重寫 form 元素的某些屬性設(shè)定。表單重寫屬性適用于提交按鈕formaction - 重寫表單的 action 屬性formenctype - 重寫表單的 enctype 屬性formmethod - 重寫表單的 method 屬性formnovalidate - 重寫表單的 novalidate 屬性formtarget - 重寫表單的 target 屬性button元素用來建立一個(gè)按鈕從功能上來說，與input元素建立的按鈕相

9、同button元素是雙標(biāo)簽，其內(nèi)部可以配置圖片與文字，進(jìn)行更復(fù)雜的樣式設(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ā)送對象，將

10、覆蓋原來的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 元素來創(chuàng)建按鈕。其他地方使用button創(chuàng)建按鈕Form元素的子元素：:類型 Text、password、submit、reset、image、hidden、email、url、te

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

12、最大字?jǐn)?shù)readonly屬性：只讀屬性，設(shè)置內(nèi)容不可變更，提交時(shí)會(huì)以前發(fā)送至服務(wù)器disabled屬性：設(shè)置為不可用（不可操作）required屬性：設(shè)置該內(nèi)容為必須填寫項(xiàng)，否則無法提交placeholder屬性：設(shè)置默認(rèn)值，當(dāng)文本框獲得焦點(diǎn)時(shí)被清空，對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屬性： HTML5新增屬性屬性值為on/off,定義是否開啟

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

14、比較低的話有可能不支持，不同的瀏覽器提示的效果可能有差異tel:表示輸入的內(nèi)容是一個(gè)電話號碼這是HTML5新增的他不會(huì)對輸入內(nèi)容進(jìn)行驗(yàn)證瀏覽器版本比較低的話有可能不支持，不同的瀏覽器提示的效果可能有差異number:這是HTML5新增的可以配合input的max/min/step/value規(guī)定允許輸入的最大值/最小值/步長/默認(rèn)值瀏覽器版本比較低的話有可能不支持，不同的瀏覽器提示的效果可能有差異range(活動(dòng)條)這是HTML5新增的；與number類型類似，也是表示一定范圍的數(shù)值輸入，但是以一個(gè)活動(dòng)條的狀態(tài)顯示可以配合input的max/min/step/value規(guī)定的最大值/最小值/步

15、長/默認(rèn)值瀏覽器版本比較低的話有可能不支持，不同的瀏覽器提示的效果可能有差異時(shí)間類這是HTML5新增的；包括datetime/datetime-local/date/month/week/time瀏覽器版本比較低的話有可能不支持，不同的瀏覽器支持程度不同color這是HTML5新增的；可以建立一個(gè)顏色的選擇輸入框?yàn)g覽器版本比較低的話有可能不支持，不同的瀏覽器支持程度不同seacrch這是HTML5新增的；用于建立一個(gè)搜索框，用來供用戶輸入搜素的關(guān)鍵詞瀏覽器版本比較低的話有可能不支持，不同的瀏覽器支持程度不同file用來創(chuàng)建一個(gè)文件選取的輸入框可通過accept屬性規(guī)定選取文件的類型，比如圖片/

16、視頻multipe屬性可以設(shè)定一次允許選擇多個(gè)文件checkbox/復(fù)選框用來創(chuàng)建一個(gè)復(fù)選框（可以多項(xiàng)選擇）通過checked屬性可講某個(gè)選項(xiàng)設(shè)為默認(rèn)的選取狀態(tài)，再次單擊取消選取radio/單選框用來創(chuàng)建一個(gè)單選框（可以多項(xiàng)選擇）通過checked屬性可講某個(gè)選項(xiàng)設(shè)為默認(rèn)的選取狀態(tài)，再次單擊取消選取必須將同一組單選項(xiàng)設(shè)置一個(gè)相同的name屬性值其他子元素：的屬性：for、accesskey用來為 input 元素定義標(biāo)注（標(biāo)記）,建立一個(gè)與之相關(guān)聯(lián)的標(biāo)簽for屬性，讓標(biāo)簽與指定的input元素建立關(guān)聯(lián)將input元素包含在label標(biāo)簽中可以通過accesskey建立快捷鍵（已經(jīng)講過內(nèi)容，不再

17、演示）lable屬性在option元素中可以設(shè)定比標(biāo)簽內(nèi)容更優(yōu)先的選項(xiàng)optgroup的分組名稱select元素用來建立一個(gè)下拉菜單選項(xiàng)列表不僅可以在表單中使用，還可以在其他塊元素和內(nèi)聯(lián)元素中使用select只是定義一個(gè)下拉菜單列表，其具體列表項(xiàng)要通過option元素建立option元素可以用來建立一個(gè)選項(xiàng)，即下拉列表的一個(gè)菜單項(xiàng)optgroup元素用來對option元素進(jìn)行組合分組size用來定義列表中顯示的列表項(xiàng)multiple屬性用來定義是否可以多選可以添加disabled屬性和autofocus屬性datalist元素HTML5新增元素，用來建立一個(gè)選項(xiàng)列表datalist元素的內(nèi)容不

18、會(huì)直接顯示在網(wǎng)頁上，只是會(huì)在用戶輸入時(shí)作為候選項(xiàng)通常與input元素配合使用textarea元素用來建立多行輸入文本框元素標(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ù)（寬度）補(bǔ)充內(nèi)容，input元素的size屬性button元素用來建立一個(gè)按鈕從功能上來說，與input元素

19、建立的按鈕相同button元素是雙標(biāo)簽，其內(nèi)部可以配置圖片與文字，進(jìn)行更復(fù)雜的樣式設(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ù)

20、發(fā)送對象，將覆蓋原來的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 元素來創(chuàng)建按鈕。其他地方使用button創(chuàng)建按鈕form元素的屬性小結(jié)action/method/enctype/name/accept-charset/accept/t

21、arget/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)該如何對表單數(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。就是說，在發(fā)送到服務(wù)器之前，所有

22、字符都會(huì)進(jìn)行編碼（空格轉(zhuǎn)換為 + 加號，特殊符號轉(zhuǎn)換為 ASCII HEX 值）。當(dāng)值設(shè)為multipart/form-data時(shí)表示：不對字符編碼。在使用包含文件上傳控件的表單時(shí)（比如當(dāng)input的type值為file時(shí)），必須使用該值。text/plain:空格轉(zhuǎn)換為 + 加號，但不對特殊字符編碼。表單的重寫：重寫 form 元素的某些屬性設(shè)定。表單重寫屬性適用于提交按鈕formaction - 重寫表單的 action 屬性formenctype - 重寫表單的 enctype 屬性formmethod - 重寫表單的 method 屬性formnovalidate - 重寫表單的 no

23、validate 屬性formtarget - 重寫表單的 target 屬性button元素用來建立一個(gè)按鈕從功能上來說，與input元素建立的按鈕相同button元素是雙標(biāo)簽，其內(nèi)部可以配置圖片與文字，進(jìn)行更復(fù)雜的樣式設(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è)定表單的提交方

24、式，將覆蓋原本的提交方式formnovalidate屬性：設(shè)定表單將會(huì)覆蓋原本的novalidate屬性fomaction屬性：指定表單數(shù)據(jù)發(fā)送對象，將覆蓋原來的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 元素來創(chuàng)建按鈕。其他地方使用b

25、utton創(chuàng)建按鈕output元素：數(shù)據(jù)的輸出output元素是HTML5新增的元素，用來設(shè)置不同數(shù)據(jù)的輸出output元素的輸出內(nèi)容是由代碼控制的這節(jié)課的演示需要用到簡單的javascript知識,暫時(shí)不理解沒關(guān)系，主要是了解output元素的使用方法，后邊的課程中我們安排了專門的章節(jié)講解javascriptoutput元素的屬性：name屬性：定義對象的唯一名稱。（表單提交時(shí)使用）form屬性：定義所屬的一個(gè)或多個(gè)表單。for屬性：定義輸出域相關(guān)的一個(gè)或多個(gè)元素。案例演示需要用到兩個(gè)沒有學(xué)過的知識，表單事件oninput表單事件：當(dāng)用戶對元素?cái)?shù)據(jù)的輸入時(shí)觸發(fā)parseInt() 是一個(gè)javascript函數(shù)，它可以解析一個(gè)字符串，并返回一個(gè)整數(shù)。progress元素是HTML5中新增的元素，用來建立一個(gè)進(jìn)度條通常與JavaScript 一同使用，來顯示任務(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è)表單。meter元素是HTML5中新增的元素，用來建立一個(gè)度量條,用來表示度量