第九講HTML五表單新增屬及新增input元素類型九.一HTML五表單概述九.二表單新增屬九.三表單新增input元素類型九.四提按鈕新增取消檢驗屬HTML五表單在HTML四表單地基礎上,新增了許多屬以及input元素類型,這些新增屬及元素類型實現了以前需要由JavaScript才能實現地一些功能,如非空校驗,數值類型校驗,聚焦,顯示提示信息等功能,極大地增強了HTML五表單地功能。九.一HTML五表單概述HTML五表單主要新增了以下一些屬:form屬formaction屬autofocus屬pattern屬placeholder屬required屬九.二表單新增屬作用form屬可以定義表單元素與某個表單之間地隸屬關系,使用了form屬后,表單地元素可以放在<form></form>標簽對之外地任何地方?；菊Z法<formid="form一">…</form><inputtype="text"form="form一"/>語法解釋在表單外地元素,通過設置元素地form屬值等于表單地id值,即可建立了表單元素與表單地隸屬關系。一.form屬form屬示例作用formaction屬可以實現在一個表單包含多個提按鈕,每個提按鈕都可以通過formaction屬將請求提給不同地服務端程序處理?；菊Z法<inputtype="submit"formaction="服務端處理程序"/>語法解釋所有提按鈕都可以使用formaction屬。屬于提按鈕地元素包括:<inputtype="submit">,<inputtype="image">與<buttontype="submit">。二.formaction屬formaction屬示例作用autofocus屬可以使textarea與input表單元素自動獲得焦點。基本語法<inputtype="text"autofocus/><textarearows="..."cols="..."autofocus>...</textarea>語法解釋一個頁面最多只能有一個表單元素設置autofocus屬,否則該功能將失效,建議對第一個input元素設置autofocus屬。三.autofocus屬autofocus屬示例作用pattern屬是input元素地驗證屬,該屬地值是一個正則表達式,通過這個表達式可以驗證輸入內容地有效。基本語法<inputtype="text"pattern="正則表達式"title="錯誤提示信息"/>語法解釋根據具體校驗要求,設置對應地正則表達式。Title屬不是必需要地,但為了提高用戶體驗,建議設置這個屬。四.pattern屬pattern屬示例作用placeholder屬主要用于在文本框或文本域提供輸入提示信息,以增加用戶界面地友好?；菊Z法<inputtype="text"placeholder="提示信息"><textarearows="…"cols="…"placeholder="提示信息">語法解釋placeholder地屬值即"提示信息"將自動顯示在對應地元素。在IE一一,當元素獲得焦點時,提示信息消失;當元素失去焦點時,提示信息又會自動顯示。五.placeholder屬pattern屬示例作用requried屬用于驗證某個表單元素地內容是否為空?；菊Z法<inputtype="…"name="…"required><selectname="…"…required><textareaname="…"…required>六.required屬required屬示例HTML五表單input元素主要新增了以下一些類型:九.三表單新增input元素類型類型描述tel電話輸入框文本emailE-mail輸入文本框urlURL地址輸入文本框number數值輸入文本框,可設置輸入值地范圍range以滑動條地形式表示特定范圍內地數值search搜索關鍵字輸入地文本框color顏色選擇器,基于取色板行選擇date日期選擇器time時間選擇器datetime包含時區地日期與時間選擇器datetime-local不包含時區地日期與時間選擇器week星期選擇器month月份選擇器作用tel類型讓input元素生成一個只能輸入電話號碼地文本框。但目前,這種類型地文本框并沒有提供額外地要求,即用戶在該文本框輸入任意地字符串,瀏覽器都不會執行校驗操作。基本語法<inputtype="tel">一.tel類型作用email類型讓input元素生成一個email輸入框。運行時瀏覽器會按照email地格式自動檢查該文本框地值,如果用戶在該文本框內輸入地內容不符合email格式,將會彈出錯誤提示信息,并阻止表單提?；菊Z法<inputtype="email"name="…"multiple>語法解釋省略multiple屬,在文本框將只允許輸入一個email地址。二.email類型email類型示例作用url類型讓input元素生成一個URL地址輸入框,要求需要在其輸入一個包含訪問協議地完整地URL路徑。運行時瀏覽器會按照完整地URL地格式自動檢查該文本框地值,如果不符合格式要求,將會彈出錯誤提示信息,并阻止表單提。基本語法<inputtype="url"name="…">三.url類型url類型示例作用number類型讓input元素生成一個只能輸入一個特定取值范圍地數值地輸入框。注:IE不支持該類型?；菊Z法<inputtype="number"min="最小值"max="最大值"step="改變數值地步長">語法解釋min屬:用于指定可輸入地最小數值,默認時將不限定最小輸入值;max屬:用于指定可輸入地最大數值,默認時將不限定最大輸入值;step屬:指定輸入框地值在單擊微調上,下限按鈕時增加或減小地數值,默認步長是一。四.number類型number類型示例作用range類型讓input元素生成一個數字滑動條,使用滑動條可讓用戶輸入特定范圍地數值。基本語法<inputtype="range"min="最小值"max="最大值"step="改變數值地步長">語法解釋min屬:用于指定可輸入地最小數值,默認值為零;max屬:用于指定可輸入地最大數值,默認值為一零零;step屬:指定滑動條每向左或向右移動一次滑塊,數值將減小或增加地數值,默認步長是一。五.range類型range類型示例作用search類型讓input元素生成一個專門用于輸入搜索關鍵字地文本框,用戶輸入搜索關鍵字后,文本框右側會出現一個"×"按鈕,單擊該按鈕將清空文本框地輸入內容?；菊Z法<inputtype="search"name="…">注意:Firefox瀏覽器不支持該特,search類型在Firefox瀏覽器跟普通地文本框完全一樣。六.search類型search類型示例作用color類型讓input元素生成一個顏色選擇器。當用戶在顏色選擇器選某種顏色后,color文本框內自動顯示用戶選地顏色。基本語法<inputtype="color"name="…">注意:IE一一則不支持color類型,在該瀏覽器color類型文本框就跟"text"文本框完全一樣。七.color類型color類型示例作用date類型讓input元素生成一個日期選擇器。當用戶單擊該文本框時,將彈出一個日歷選擇器,從可選擇年,月,日,選擇日期后,所選擇地日期將顯示在文本框。基本語法<inputtype="date"name="…">注意:IE一一則不支持不支持date類型,在該瀏覽器date類型文本框就跟"text"文本框完全一樣。八.date類型date類型示例作用time類型讓input元素生成一個時間選擇器,用于設置小時與分鐘數。基本語法<inputtype="time"name="…">注意:IE一一則不支持不支持time類型,在該瀏覽器time類型文本框就跟"text"文本框完全一樣。九.time類型time類型示例作用datetime-local類型讓input元素生成一個本地日期與時間選擇器?；菊Z法<inputtype="datetime-local"name="…">注意:IE一一與Firefox現在都不支持datetime-local類型,在這些瀏覽器datetime-local類型文本框就跟"text"文本框完全一樣。一零.datetime-local類型datetime-local類型示例作用week類型讓input元素生成星期選擇器,通過日歷選擇器選擇某個日期后,可以得到當年該日期所在地星期數?；菊Z法<inputtype="week"name="…">注意:IE一一與Firefox現在都不支持week類型,在這些瀏覽器week類型文本框就跟"text"文本框完全一樣。一一.week類型week類型示例作用month類型讓input元素生成月份選擇器,通過日歷選擇器選擇某個日期后,可以得到當年該日期所在地月份數,其實這就是日期選擇器只顯示年份與月份地效果?；菊Z法<inputtype="month"name="…">注意:IE一一與Firefox現在都不支持month類型,在這些瀏覽器month類型文本框就跟"text"文本框完全一樣。一二.month類型month類型示例有時,我們可能需要把表單已填寫好地數據暫存一下,以便將來調出來繼續填寫,此時我們可以不用關心數據是否有效,即可以取消表單地有效校驗。在HTML五,取消表單校驗地常用方式有兩種:一種是為<form>元素設置novalidate屬;另一種是