Form元素總結

1、Form元素：作用：表單主要用于收集用戶的信息 凡是用于收集用戶信息的控件都必須要有name屬性，有些控件(例如checkbox、radio)必須 明確指明value屬性，大部分控件可以指定默認的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表單事件：當用戶對元素數(shù)據的輸入時觸發(fā)parseInt() 是一個javascript函數(shù)，它可以解析一個字符串，并返回一個整數(shù)。元素用來建立一個進度條；通常與JavaScript 一同使用，來顯示任務的進度

4、。progress元素的屬性：max屬性：規(guī)定當前進度的最大值。value屬性設定進度條當前默認顯示值form屬性：規(guī)定進度條所屬的一個或多個表單。元素是HTML5中新增的元素，用來建立一個度量條,用來表示度量衡的評定meter元素的屬性：value屬性設定進度條當前默認顯示值max屬性：規(guī)定范圍的最大值，默認值為1.min屬性：規(guī)定范圍的最小值，默認值為0.low屬性：規(guī)定被視作低的標準。high屬性：規(guī)定被視作高標準。form屬性：規(guī)定所屬的一個或多個表單。元素的用法fieldset元素：可將表單內的相關元素分組。當一組表單元素放到fieldset標簽內時，瀏覽器會以特殊方式來顯示它們，通

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

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

7、accept-charset: （僅作了解）指定表單處理數(shù)據時所能接受的字符編碼target屬性:指定在何處打開action屬性所指定的URL目標enctype屬性：規(guī)定在發(fā)送到服務器之前應該如何對表單數(shù)據進行編碼。當method設定發(fā)送方式為get時，不必設置該屬性；當method設定發(fā)送方式為post時該屬性才有效；默認地，表單數(shù)據會編碼為 application/x-www-form-urlencoded。就是說，在發(fā)送到服務器之前，所有字符都會進行編碼（空格轉換為 + 加號，特殊符號轉換為 ASCII HEX 值）。當值設為multipart/form-data時表示：不對字符編碼。在

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

9、同button元素是雙標簽，其內部可以配置圖片與文字，進行更復雜的樣式設計不僅可以在表單中使用，還可以在其他塊元素和內聯(lián)元素中使用button元素的屬性type屬性：可以設置三個值 submit/reset/button與input元素設置的按鈕含義相同name/vlue/disable屬性：與input的用法相同autofocus屬性：設置按鈕自動獲得焦點。form屬性：設定按鈕隸屬于哪一個或多個表單formmethod屬性：設定表單的提交方式，將覆蓋原本的提交方式formnovalidate屬性：設定表單將會覆蓋原本的novalidate屬性fomaction屬性：指定表單數(shù)據發(fā)送對象，將

10、覆蓋原來的action屬性設定formenctype屬性;指定表單的數(shù)據發(fā)送類型，將覆蓋原本的enctype屬性設定formtarget屬性：將覆蓋原本的target屬性設定重要事項：如果在表單中使用 button 元素，不同的瀏覽器會提交不同的值。Internet Explorer 將提交 button元素開始標簽與結束標簽之間的文本，而其他瀏覽器將提交 value 屬性的內容。最好就是在表單中使用 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屬性：指定輸入內容的類型，默認為text:單行文本框name屬性:輸入內容的識別名稱，傳遞參數(shù)時候的參數(shù)名稱value屬性:默認值maxlength:輸入的

12、最大字數(shù)readonly屬性：只讀屬性，設置內容不可變更，提交時會以前發(fā)送至服務器disabled屬性：設置為不可用（不可操作）required屬性：設置該內容為必須填寫項，否則無法提交placeholder屬性：設置默認值，當文本框獲得焦點時被清空，對text/url/tel/email/password/search有效autofocus屬性：自動獲得焦點accesskey屬性：指定快捷鍵windows中，指定快捷鍵后，按Alt+“快捷鍵”,便會獲得焦點tabindex屬性：指定按Tab鍵時，項目間的移動順序autocomplet屬性： HTML5新增屬性屬性值為on/off,定義是否開啟

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

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

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

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

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

18、會直接顯示在網頁上，只是會在用戶輸入時作為候選項通常與input元素配合使用textarea元素用來建立多行輸入文本框元素標簽中的內容將一文本框默認值的形式呈現(xiàn)不僅可以用在表單中，也可以在其他塊元素或內聯(lián)元素中textarea元素的屬性：name/disabled/readonly/form/reauired/autofocus/placeholder屬性，這些屬性的用法之前課程中已經有講解，就不再一一演示rows屬性：設置多行文本的行數(shù)（高度）cols屬性：設置多行文本的每行顯示的字數(shù)（寬度）補充內容，input元素的size屬性button元素用來建立一個按鈕從功能上來說，與input元素

19、建立的按鈕相同button元素是雙標簽，其內部可以配置圖片與文字，進行更復雜的樣式設計不僅可以在表單中使用，還可以在其他塊元素和內聯(lián)元素中使用button元素的屬性type屬性：可以設置三個值 submit/reset/button與input元素設置的按鈕含義相同name/vlue/disable屬性：與input的用法相同autofocus屬性：設置按鈕自動獲得焦點。form屬性：設定按鈕隸屬于哪一個或多個表單formmethod屬性：設定表單的提交方式，將覆蓋原本的提交方式formnovalidate屬性：設定表單將會覆蓋原本的novalidate屬性fomaction屬性：指定表單數(shù)據

20、發(fā)送對象，將覆蓋原來的action屬性設定formenctype屬性;指定表單的數(shù)據發(fā)送類型，將覆蓋原本的enctype屬性設定formtarget屬性：將覆蓋原本的target屬性設定重要事項：如果在表單中使用 button 元素，不同的瀏覽器會提交不同的值。Internet Explorer 將提交 button元素開始標簽與結束標簽之間的文本，而其他瀏覽器將提交 value 屬性的內容。最好就是在表單中使用 input 元素來創(chuàng)建按鈕。其他地方使用button創(chuàng)建按鈕form元素的屬性小結action/method/enctype/name/accept-charset/accept/t

21、arget/autocomplete/novalidateaccept屬性：（僅作了解）指定服務器處理表單時所能接受的數(shù)據形態(tài)，一般默認即可accept-charset: （僅作了解）指定表單處理數(shù)據時所能接受的字符編碼target屬性:指定在何處打開action屬性所指定的URL目標enctype屬性：(了解即可)規(guī)定在發(fā)送到服務器之前應該如何對表單數(shù)據進行編碼。當method設定發(fā)送方式為get時，不必設置該屬性；當method設定發(fā)送方式為post時該屬性才有效；默認地，表單數(shù)據會編碼為 application/x-www-form-urlencoded。就是說，在發(fā)送到服務器之前，所有

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

23、validate 屬性formtarget - 重寫表單的 target 屬性button元素用來建立一個按鈕從功能上來說，與input元素建立的按鈕相同button元素是雙標簽，其內部可以配置圖片與文字，進行更復雜的樣式設計不僅可以在表單中使用，還可以在其他塊元素和內聯(lián)元素中使用button元素的屬性type屬性：可以設置三個值 submit/reset/button與input元素設置的按鈕含義相同name/vlue/disable屬性：與input的用法相同autofocus屬性：設置按鈕自動獲得焦點。form屬性：設定按鈕隸屬于哪一個或多個表單formmethod屬性：設定表單的提交方

24、式，將覆蓋原本的提交方式formnovalidate屬性：設定表單將會覆蓋原本的novalidate屬性fomaction屬性：指定表單數(shù)據發(fā)送對象，將覆蓋原來的action屬性設定formenctype屬性;指定表單的數(shù)據發(fā)送類型，將覆蓋原本的enctype屬性設定formtarget屬性：將覆蓋原本的target屬性設定重要事項：如果在表單中使用 button 元素，不同的瀏覽器會提交不同的值。Internet Explorer 將提交 button元素開始標簽與結束標簽之間的文本，而其他瀏覽器將提交 value 屬性的內容。最好就是在表單中使用 input 元素來創(chuàng)建按鈕。其他地方使用b

25、utton創(chuàng)建按鈕output元素：數(shù)據的輸出output元素是HTML5新增的元素，用來設置不同數(shù)據的輸出output元素的輸出內容是由代碼控制的這節(jié)課的演示需要用到簡單的javascript知識,暫時不理解沒關系，主要是了解output元素的使用方法，后邊的課程中我們安排了專門的章節(jié)講解javascriptoutput元素的屬性：name屬性：定義對象的唯一名稱。（表單提交時使用）form屬性：定義所屬的一個或多個表單。for屬性：定義輸出域相關的一個或多個元素。案例演示需要用到兩個沒有學過的知識，表單事件oninput表單事件：當用戶對元素數(shù)據的輸入時觸發(fā)parseInt() 是一個javascript函數(shù)，它可以解析一個字符串，并返回一個整數(shù)。progress元素是HTML5中新增的元素，用來建立一個進度條通常與JavaScript 一同使用，來顯示任務的進度。使用時注意瀏覽器的支持情況：Internet Explorer 9 以及更早的版本不支持progress元素的屬性：max屬性：規(guī)定當前進度的最大值。value屬性設定進度條當前默認顯示值form屬性：規(guī)定進度條所屬的一個或多個表單。meter元素是HTML5中新增的元素，用來建立一個度量條,用來表示度量