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.針對控制元件的樣式美化,重點放到輸入框類控制元件和按鈕類控制元件; |