常見HTML5表單元素

1、主講：沙繼東 知識(shí)要點(diǎn)知識(shí)要點(diǎn)掌握掌握HTML5的表單新特性的表單新特性知識(shí)重、難點(diǎn)知識(shí)重、難點(diǎn)重點(diǎn)、難點(diǎn)：重點(diǎn)、難點(diǎn)：HTML5的表單屬性的表單屬性 表單是頁(yè)面中不可缺少的元素，沒有表單，就沒有現(xiàn)在如此生動(dòng)，趣味的頁(yè)面。 不過(guò)雖然表單很重要，但在 HTML 5 之前，表單的元素不多，屬性和方法也不多，很多屬性和方法都是用 JavaScript 模擬的，用 JavaScript 模擬這些功能要花費(fèi)不少的時(shí)間和精力。如果用戶能使用到這些模擬的功能，那么花費(fèi)是值得的；如果用戶客戶端禁用 JavaScript，那么這些功能將全部掛掉，時(shí)間和精力都白白浪費(fèi)了。 HTML 5 出現(xiàn)之后，這一切都不同了。

2、HTML 5 增加的表單、表單類型以及表單屬性，不但節(jié)省了開發(fā)者的時(shí)間，而且讓更多應(yīng)用成文可能。下面來(lái)看看 HMTL 5 新增表單類型的簡(jiǎn)單說(shuō)明。類型類型名稱功能描述color顏色選擇器輸入顏色值的文本框date日期選擇器輸入日期的文本框datetime日期時(shí)間選擇器輸入 UTC 日期和時(shí)間的文本框datetime-local日期時(shí)間選擇器（本地）輸入本地日期和時(shí)間的文本框month月份選擇器輸入月份的文本框time時(shí)間文本框輸入時(shí)間的文本框week周選擇框輸入周的文本框email郵件輸入框輸入 E-mail 地址的文本框number數(shù)字輸入框輸入數(shù)字的文本框，可以設(shè)置輸入值的范圍range數(shù)

3、字滑動(dòng)條通過(guò)拖動(dòng)滑動(dòng)條改變一定范圍內(nèi)的數(shù)字search搜索輸入框輸入搜索關(guān)鍵字操作的文本框tel電話號(hào)碼輸入框輸入電話號(hào)碼urlWeb 地址輸入框輸入 URL 地址的文本框新增的新增的 input 元素類型元素類型新增的新增的 input 元素類型元素類型1.colorcolor 類型用來(lái)選取顏色，它提供了一個(gè)顏色選取器，值為 16 進(jìn)制符號(hào)，如：#ff0000。目前只在 Opera 和 Blackberry 瀏覽器中支持。新增的新增的 input 元素類型元素類型2.datedate 類型是一個(gè)日期選擇器，有了這個(gè)就不需要用 JavaScript 編寫日歷控件了，非常方便。新增的新增的 in

4、put 元素類型元素類型3. datetime 和和 datetime-localdatetime 類型是用來(lái)輸入 UTC 日期和時(shí)間的文本框，而 datetime-local 類型是用來(lái)輸入本地日期和時(shí)間的。它們與 date 類型的區(qū)別是后面多了一個(gè)時(shí)間框和“UTC”。新增的新增的 input 元素類型元素類型4. month 和和 weekmonth 類型是月份選擇器，它的值為：年年-月月，如：2012-01；week 類型是周選擇器，它的值為：年年-W周數(shù)周數(shù)，如：2011-W02。新增的新增的 input 元素類型元素類型5. timetime 類型是時(shí)間文本框，可以手動(dòng)輸入或用右邊上

5、線箭頭控制。顯示效果可以查看 datetime-local 效果的右邊。 新增的新增的 input 元素類型元素類型6. email 和和 urlemail 類型用來(lái)輸入 E-mail 地址，它會(huì)驗(yàn)證文本框內(nèi)的內(nèi)容是否為合法的 E-mail 地址。 url 類型是用來(lái)輸入 url 地址的，它會(huì)驗(yàn)證 url 地址是否合法。新增的新增的 input 元素類型元素類型7. number 和和 rangenumber 類型是專門用來(lái)輸入數(shù)字的，并且在提交時(shí)會(huì)檢驗(yàn)是否為數(shù)字。number 類型有 max、min 和 step 屬性。max 是允許的最大值，min 是允許的最小值，step 是間隔。設(shè)置了

6、這些屬性后，如果手動(dòng)填入的數(shù)字不符合這些屬性條件，將不能提交。 range 類型是一個(gè)數(shù)字滑動(dòng)條。它與 number 類型功能類似，也有 max、min 和 step 屬性，在 Opera 中，可以用左右方向鍵控制。range 類型自身沒有一個(gè)明顯的“數(shù)值”表示當(dāng)前值，但可以使用 output 輸出當(dāng)前值。效果如下：新增的新增的 input 元素類型元素類型number 和和 range效果如下：新增的新增的 input 元素類型元素類型8. searchsearch 類型的是用來(lái)輸入搜索關(guān)鍵詞的文本框，它與 text 類型在功能都沒有太大區(qū)別，只在外觀上有細(xì)微的區(qū)別。在 Chrome 10

7、和 Safari 5 中，當(dāng)用戶輸入內(nèi)容時(shí)，輸入框右側(cè)會(huì)有一個(gè)“”按鈕，單擊該按鈕，將清空輸入框內(nèi)的內(nèi)容，使用非常方便。新增的新增的 input 元素類型元素類型9. teltel 類型是用來(lái)輸入電話號(hào)碼的，它沒有特殊的驗(yàn)證規(guī)則，不強(qiáng)制輸入數(shù)字，因?yàn)楦鱾€(gè)國(guó)家、地區(qū)的電話號(hào)碼不一樣，但可以根據(jù)具體情況用 pattern 屬性來(lái)驗(yàn)證。在 HTML 5 中，除了新增 input 元素的類型外，還新增了一些表單元素，如：datalist、keygen、output 等。新增的新增的 input 元素類型元素類型10. datalistdatalist 元素是用來(lái)輔助表單中文本框輸入的，它本身是隱藏的，

8、與表單文本框的“l(fā)ist”屬性綁定，即將“l(fā)ist”屬性值設(shè)置為 datalist 元素的 id 值。綁定成功后，當(dāng)輸入內(nèi)容時(shí)，datalist 元素以列表的形式顯示在文本框的底部，提示輸入字符的內(nèi)容。效果如下：新增的新增的 input 元素類型元素類型datalist效果如下：新增的新增的 input 元素類型元素類型11. keygenkeygen 用于生成頁(yè)面的密鑰。一般情況下，如果表單中使用了該元素，在表單提交時(shí)，該元素將生成一對(duì)密鑰：一個(gè)保存在客戶端，稱為私密鑰私密鑰（Private Key）；另一個(gè)發(fā)送至服務(wù)器，由服務(wù)器進(jìn)行保存，稱為公密鑰公密鑰（Public Key），公密鑰可以

9、用于客戶端證書的驗(yàn)證。新增的新增的 input 元素類型元素類型12. outputoutput 元素用于顯示各種不同類型表單元素的內(nèi)容，如輸入的值、JavaScript 代碼執(zhí)行后的結(jié)果等。該元素必須從屬于某個(gè)表單，或通過(guò)屬性指定某個(gè)表單。為了獲取表單的值，需要設(shè)置 output 元素的“onFormInput”事件，以便在表單輸入框中輸入內(nèi)容是，監(jiān)測(cè)到其中的值。新增新增的表單屬性的表單屬性HTML 5 新增表單屬性新增表單屬性HTML 5 不但新增加了表單元素、表單類型，還增加了一些表單屬性，同時(shí)使用的話，能更好的提高率開發(fā)者的工作效率，同時(shí)也提高了用戶的操作體驗(yàn)。新增新增的表單屬性的表單

10、屬性1. autocomplete是否自動(dòng)填充表單，默認(rèn)值是 no。有些搜索引擎，如百度、google 等，它們會(huì)自動(dòng)匹配當(dāng)前熱門搜素，所以禁止表單自動(dòng)填充。此屬性原本是 Microsoft 的專有屬性，現(xiàn)在 HTML 5 也支持了。新增新增的表單屬性的表單屬性2. autofocus自動(dòng)聚焦。加入這個(gè)屬性后，頁(yè)面加載時(shí)，光標(biāo)會(huì)自動(dòng)聚焦到加入了此屬性的輸入框。比如登錄頁(yè)面，加入此屬性后，頁(yè)面加載后就可以直接輸入，而不需要點(diǎn)擊鼠標(biāo)或使用 Tab 鍵聚焦后再輸入。新增新增的表單屬性的表單屬性3. formHTML 5 之前，表單元素必須在表單里面，如 input 必須在 form 里面，而 HTM

11、L 5 出現(xiàn)后，只要加上 form 屬性，表單元素可以放到頁(yè)面的任意位置。新增新增的表單屬性的表單屬性4. formnovalidate 和和 novalidate表單的驗(yàn)證很重要，但有的時(shí)候出于某種特殊情況，不需要對(duì)表單驗(yàn)證時(shí)，可以使用 formnavalidate 或 novalidate，它們都可以不驗(yàn)證提交表單，卻別在于：novalidate 用戶 form 標(biāo)簽；formnavalidate 用于 submit 或 image 類型的提交按鈕。新增新增的表單屬性的表單屬性5. formmethod、formenctype 、formnovalidate 和和 formtarget這幾

12、個(gè)屬性和 formnovalidate 類似，將這些屬性添加到 submit 按鈕將會(huì)覆蓋 fomr 元素對(duì)應(yīng)屬性的值或默認(rèn)值。例如，如果 form 元素中的 method 屬性被設(shè)置為 post ，則當(dāng)點(diǎn)擊一個(gè)特定的按鈕時(shí)，你可以使用 formmethod=”get” 覆蓋它。 帳號(hào)： 密碼： 新增新增的表單屬性的表單屬性6. listlist 屬性規(guī)定輸入域的 datalist。datalist 是輸入域的選項(xiàng)列表。效果可以查看 datalist新增新增的表單屬性的表單屬性7. min、max 和和 step 屬性屬性min、max 和 step 屬性用于為包含數(shù)字或日期的 input 類

13、型規(guī)定限定（約束）。 max 屬性規(guī)定輸入域所允許的最大值；min 屬性規(guī)定輸入域所允許的最小值；step 屬性為輸入域規(guī)定合法的數(shù)字間隔（如果 step=”3，則合法的數(shù)是 -3,0,3,6 等）。新增新增的表單屬性的表單屬性8. multiple當(dāng)設(shè)置為 true 是，表單可以有多個(gè)值，用英文逗號(hào)分隔。例如，file 類型的表單中加入此屬性后，選擇文件時(shí)，可以按住 Ctrl 進(jìn)行多選。新增新增的表單屬性的表單屬性9. pattern使用正則表達(dá)式驗(yàn)證 input 元素的內(nèi)容，和之前用 JavaScript 寫正則驗(yàn)證一樣，只是把正則表單寫在 pattern 的值里。新增新增的表單屬性的表單屬性9. placeholder輸入框占位符，常用作輸入提示，如搜索框。在光標(biāo)聚焦時(shí)，占位符自動(dòng)消失，不要擔(dān)心還需要手動(dòng)刪除。新增新增的表單屬性的表單屬性10. required是否允許為空，加入了這個(gè)屬性后，表單不允許為空。如果為空，在提交的時(shí)候會(huì)出現(xiàn)相應(yīng)的提示，并聚焦到該表單域。上面的那些新增表單類型默認(rèn)都不會(huì)驗(yàn)證是否為空，它們只會(huì)驗(yàn)證輸入的內(nèi)容是否合法。新增新增的表單屬性的表單屬性11. required是否允許為空，加入了這個(gè)屬性后，表單不允許為空。如果