html5 表單元素
阿新 • • 發佈：2019-01-05
| 1.概念 表單是蒐集使用者資訊的各種表單元素的集合區域; |
| 2.表單的作用 a.實現網頁上的資料互動; b.蒐集客戶端輸入的資料資訊，提交到網站伺服器端進行處理; |
| 3.常見的應用 a.註冊/登入 b.搜素 c.留言/評論 d.檔案上傳/文章編輯 |
| 4.表單標籤<form> a.雙標籤，塊狀元素 b.用來定義網頁中的互動輸入的區域（表單區） c.所有的表單控制元件中必須包含再<form>元素中; |
| 5.<form>基本屬性 a.action url路徑 ;必須屬性！規定當提交表單時向何處傳送表單資料 b.method get/post; 必須屬性；規定用於傳送form-data的http方法; c.name 自定義名稱;規定表單的名稱（針對伺服器端或指令碼處理） |
| 6.name和id的區別 a.id在頁面中具有唯一性，name可以重複 b.name主要對應伺服器端，用於對提交到服務端的表單資料進行標識，要實現資料互動功能，表單和表單控制元件都需要使用name屬性; c.name的另一個功能是對應指令碼（JavaScript）,來處理表單中的各種資料值.而id主要對應css樣式的應用; |
| 7.表單元素的型別 1.輸入型：（使用者在控制元件中可以直接輸入資料資訊） a.文字框(單行文字); <input>通過type指定型別 <input type="text" /> 普通文字框 <input type="password" />密碼框 <input type="hidden 隱藏域是使用者看不見的表單控制元件，一般用來傳遞不需要顯示在客戶端的資料; b.文字域(多行文字); <textarea></textarea> 2.選擇性：（使用者根據提供的控制元件選擇資料內容） a.下拉框;（select標籤建立下拉列表，option標籤常見列表中的子級選項） 1.行間元素 2.給option標籤新增select屬性，可以設定在首次顯示的下拉列表是為預設的選中狀態; 3.給select標籤新增multiple 屬性可以選擇多個選項;（h5新增） 4.select的size屬性可以規定下拉列表中的可選項的數目;（h5新增） 5.使用optgroup 給列表中的選項進行分組，形成型別樹形的分級選擇控制元件;（h5新增） optgroup標籤的label屬性可以用於定義選項組的文字描述; 請選擇你的所在省份： <select id="" name=""> <option value="">請選擇省份</option> <option value="1">湖南</option> <option value="2">湖北</option> <option value="3">上海市</option> </select> b.單選按鈕;（input標籤建立選擇框，type指定其具體型別） 1.單選按鈕具有互斥性，必須成組出現，沒有單個應用的場景; 2.name 屬性:實現按鈕的編組，當若干個按鈕name相同的時候，就形成了一個按鈕組; 3.checked:設定按鈕的已選中的狀態; <input type="radio" name="sex" checked="true" value="man" />男 <input type="radio" name="sex" value="female" />女 c.複選框;（input標籤建立選擇框，type指定其具體型別） 1.複選框可以單個使用，也可以成組使用； 2.單個使用時，用來接收使用者回答“是”，“否”。 3.成組使用，提供使用者在一組可選項中農做多項選擇; 4.name屬性：實現按鈕的編組,當若干個按鈕的name屬性相同時，就形成了按鈕組; 5.checked屬性：設定按鈕的已選中狀態; 愛好：<input type="checkbox" name="hobby" value="volleyball" />打排球 <input type="checkbox" name="hobby" value="soccer"/>踢足球 <input type="checkbox" name="hobby" value="basketball"/>打籃球 是否同意相關協議：<input type="checkbox" name="ischecked" value="0"/> 3.事件型：按鈕;（使用者點選控制元件發生的事件） 可以點選的按鈕（一般通過js/jquery啟動指令碼） <input type="button" value="普通按鈕"/> 傳送資料到伺服器 <input type="submit" value="提交按鈕" /> 點選按鈕會重置表單中的所有資料（恢復成初始預設） <input type="reset" value="重置按鈕" /> 自定義影象來呈現提交按鈕 <input type="image" src="" alt="" value="影象按鈕" /> 上傳檔案 multiple 多檔案上傳; <input type="file" value="上傳按鈕" /> <button></button> a.在 <button>元素內部，可以放置內容，比如文字，影象，這個是和input元素建立按鈕之間的區別; 它提供了更強大的功能和更豐富的內容; b.使用button按鈕時，需要規定type屬性來定義其功能,在實際應用中並不多見; type:button 單純按鈕,無功能； reset 重置 submit 提交 |
| 8.HTML5中新增的輸入控制元件 a.html增加了新的表單輸入input的型別。其目的是賦予input更具體的“語義”， 同時提供更好的輸入控制和瀏覽器原生驗證(不需要附加指令碼驗證); b.各個瀏覽器對這些input控制元件支援度不一樣； c.不管瀏覽器是否支援都可以使用它們，因為就算不支援，也可以顯示為常規的普通文字框; 建立包含url地址的輸入框，提交時驗證; <input type="url" /> 建立包含email地址的輸入框，提交時驗證; <input type="email" /> 建立僅允許包含數值的輸入框，可具體設定; <input type="number" /> 建立滑動條，呈現數值範圍區域，可具體設定; <input type="range" /> 建立時間選擇器，type型別有date/month/week/time等 <input type="date" /> 建立色彩拾取器，用於點選選顏色； <input type="color" /> 建立有清除內容功能的輸入框; <input type="search" /> 建立包含電話號碼規則的輸入框; <input type="tel" /> |
| 9.5.HTML5中新增的選擇型控制元件; a.datalist控制元件 1.用來預先定義一個輸入框的潛在選項，為輸入框提供一個可選擇的提示列表; 2.使用者輸入資料時,可以直接選擇提示列表，免去輸入的麻煩; 常用的瀏覽器 3.datalist目前的缺陷 a.無法使用css對其進行UI設計和樣式設計 b.部分瀏覽器不支援或支援的不好，且不同的瀏覽器對datalist中的屬性和值判斷不同; c.即是使用datalist，通常也需要配合指令碼來實現和完善其功能; d.在實際開發中，還是使用傳統的方法; <input list="browsers"> <datalist id="browsers"> <option value="chrom">chrom</option> <option value="firefox">firefox</option> <option value="IE">IE</option> <option value="Opera">Opera</option> <datalist> |
| HTML表單/表單控制元件常用屬性總結 1.value屬性的用法 a.定義各種表單控制元件的值； b.不同控制元件型別，value的用法也不同； value：屬性 a.輸入框控制元件：定義初始化值 b.選擇性控制元件：定義相關聯的值（必須設定） c.事件類控制元件：定義按鈕呈現的文字; 2.readonly:只讀屬性 a.規定輸入欄位為只讀，不能修改; b.應用物件主要針對輸入框型別的控制元件; 3.disabled 禁用屬性 a.規定欄位為禁用，無法使用，無法點選的; b.應用物件包括所有的表單控制元件，除了<input type="hidden"> c.提交表單資料時，被禁用的控制元件不會被提交; 4.placeholder 佔位符屬性 a.規定可描述輸入欄位預期值的簡短提示資訊,來提示使用者輸入; b.輸入框顯示placeholder的文字的內容，在使用者輸入時自動消失,不會形成干擾; c.應用物件針對輸入型表單控制元件，如<input>的text型別或<textarea> d.placeholder 內容不是value的值，也不會被表單提交; e.HTML5新增屬性,IE9及以前的瀏覽器不支援; 5.required 必填屬性 a.規定必須在提交表單之前填寫輸入欄位; b.應用物件適用於input型別：text，serach,url,tel,email,password,date, picker,number,checkbox,radio,file; c.應用物件適用於<textarea>文字域; d.html5新增屬性,safari,IE9及以前的瀏覽器不支援; 6.autofocus 自動獲得焦點屬性 a.規定當前頁面載入時input元素應該自動獲得焦點; b.應用物件針對大多數表單控制元件，都可以用； c.html5新增屬性,IE9及以前的瀏覽器不支援; 7.autocomplete自動完成屬性 a.規定表單是否應該給啟動完成功能，即是否自動讓瀏覽器自動記錄之前輸入的值； b.值為on,表示開啟功能；值為off表示關閉功能; c.可以應用整體的form物件，也可以用於輸入型的input控制元件; d.通常autocomplete="on"適用於表單（預設），"off"適用於特定的輸入欄位; f.HTML5新增屬性; |
| 表單應用技巧 1.使用<label>提高使用者操作互動體驗 a.雙標籤，行間元素，預設無任何特殊樣式； b.為表單控制元件提供輔助標記,點選label中的標記內容， 瀏覽器會自動將焦點轉到和label標籤相關的表單控制元件上; c.使用label標籤將標記內容和表單控制元件括在一起，增加控制元件的可操作性; <label>標記內容+表單控制元件</label> d.使用<label>標籤的for屬性將其他和相關控制元件關聯在一起,for 屬性的值為控制元件的id名;<label for="對應元素的id名">標記內容</label> 2.使用<fieldset>標籤協助表單控制元件或資料歸類分組; a.表單控制元件分組標籤<fieldset> 1.雙標籤，塊狀元素,建立一個分組區域; 2.主要用於將表單內的相關控制元件進行分組,便於識別和區分，預設呈現區域邊框的效果; b.表單控制元件分組標題標籤<legend> 1.雙標籤，塊狀元素; 2.用來為<fieldset>分組定義一個標題,作為表單內容的說明或描述; |
| css:表單樣式 a.表單樣式預設存在的問題和缺陷; 1.在不同的瀏覽器或作業系統中，表單呈現的效果會有差異; 2.這些差異主要表現在選擇類的表單元素上（單選/多選/下拉列表） b.編寫表單樣式的基本原則 1.著重於整體的排版整體美觀，針對表單元素的樣式儘可能簡單； 2.針對具有表現有差異的表單元素（單選/多選/下拉列表），儘可能採用預設樣式效果，不要太大改動; c.表單樣式的應用技巧 1.針對整個表單區域的內容，結合佈局類標籤進行排版; 2.將單個表單元素，都看成盒子模型容器來進行樣式的美化; 3.針對控制元件的樣式美化，重點放到輸入框類控制元件和按鈕類控制元件; |