移動WEB開發(fā)之表單元素

1、表單元素的類型表單元素中的屬性實例5-4：在網頁中生成一個密鑰實例5-1：驗證輸入的是否是一個URL地址實例5-2：驗證輸入的數(shù)值是否合法實例5-3：實現(xiàn)一個簡單的乘法計算器綜合實例：制作一個顏色滑動控制器HTML5提供了多個新的表單輸入類型，這些新類型為我們提供了更好的輸入控制和驗證功能。在HTML5標記語言中，包含了如下所示的輸入類型。emailurlnumberrangeDate pickers（date，month，week，time，datetime，datetime-local）searchcolor在HTML5標記語言中，email類型用于包含Email地址的輸入域。如果將元素中

2、的“type”類型設置為“email”，將在頁面中創(chuàng)建一個專門用于輸入郵件地址的文本輸入框。在顯示頁面時，這個文本框與其他文本框沒有區(qū)別，專門用于接收Email地址信息。當提交表單時，會自動檢測文本框中的內容是否符合Email郵件地址格式，如果不符則提示相應錯誤信息。在現(xiàn)實應用中，在提交表單之前不會檢測email類型文本框的內容是否為空，只有在不為空的情況下才會檢測其內容是否符合標準的Email格式。如果將該元素的“multiple”屬性設置為“true”，則表示允許用戶輸入一串用逗號分隔的Email地址。在提交表單時，會自動驗證Email域中的值是否合法。在HTML5標記語言中，url類型用

3、于包含URL地址的輸入域。在提交表單時，會自動驗證url域中的值。在輸入元素中，“url”類型是一種新增的類型，該類型表示元素是一個專門用于輸入Web站點地址的輸入框。Web地址的格式與普通文本有些區(qū)別，例如文本中有反斜杠“/”和點“.”。為了確保“url”類型的輸入框能夠正確提交符合格式的內容，表單在提交數(shù)據前會自動驗證其內容格式的有效性。如果不符合對應的格式，則會出現(xiàn)相應的錯誤提示信息。并且與“email”類型一樣，url的有效性檢測并不會判斷輸入框的內容是否為空，而是針對非空內容進行格式檢測。在HTML5標記語言中，number類型用于設置包含數(shù)值的輸入域，通過此類型能夠設置對所接受的數(shù)

4、字的限定。在網頁設計應用中，可以使用下表所示的屬性來設置對數(shù)字類型的限定。number類型支持的屬性在HTML4及以前的版本中，如果想要在表單中輸入一個指定范圍的整數(shù)，需要在表單提交前使用代碼進行數(shù)據檢測，以確定輸入框中是否是一個符合要求的整數(shù)。而在HTML5標記語言中，只要創(chuàng)建一個“number”類型的元素便可以實現(xiàn)以上操作。該類型的元素在HTML5中還將顯示一個微調控件。如果指定了最大與最小范圍值，就可以點擊微調控件的上限與下限按鈕，以指定的步長（step）增加或減少輸入框中的值，極大方便了用戶的操作。在“number”類型的輸入框中，不能輸入其他非數(shù)字型的字符，并且當輸入的數(shù)字大于設定的

5、最大值或小于設置的最小值時，都將出現(xiàn)數(shù)字輸入出錯的提示信息。同樣道理，該類型不進行輸入內容是否為空值的自動檢測。在HTML5標記語言中，使用Date Pickers（數(shù)據檢出器）可以為用戶提供日期和時間輸入框。Date Pickers的意義是可以避免用打字的方式輸入日期和時間，能夠大大提高處理數(shù)據的效率。在HTML5中提供了多個可供選取日期和時間的新輸入類型，具體說明如下：date：選取日、月、年。month：選取月、年。week：選取周和年。time：選取時間（小時和分鐘）。datetime：選取時間、日、月、年（UTC時間）。datetime-local：選取時間、日、月、年（本地時間）。

6、在HTML4之前的版本中，沒有專門用于顯示日期的文本輸入框，開發(fā)人員需要編寫大量的JavaScript代碼或導入相應的插件。而在HTML5中，只需要將元素的類型設置為“date”，便可以創(chuàng)建一個日期輸入框。當單擊該文本框時會彈出一個日歷選擇器，選擇日期并關閉這個框，會將所選擇的日期顯示在文本框中。除了本章5.1中介紹的表單類型外，在HTML5中還可以使用屬性來實現(xiàn)我們需要的顯示功能。HTML5新增的表單屬性如下：autocompletenovalidateautocompleteautofocusformform overrides（formaction，formenctype，formmet

7、hod，formnovalidate，formtarget）height和widthlistmin、max和stepmultiplepattern（regexp）placeholderrequired下面我們具體介紹其中常用的一些。在HTML5的元素中，屬性“autofocus”是一個布爾值。主要功能是當加載頁面完成后，設置光標是否自動鎖定元素，即是否使元素自動獲取焦點。在元素中，如果將該屬性的值設置為“true”或直接輸入“autofocus”屬性名稱，那么對應的元素將自動獲取焦點。在HTML5網頁中，可以通過“pattern”屬性驗證在表單中輸入的數(shù)據是否合法。pattern屬性適用于以下

8、類型的標簽：textsearchurltelephoneemailpassword“email”和“url”等類型的元素都內置了正則表達式，當創(chuàng)建這些元素時，通過與內容進行匹配的方式進行有效性驗證。其實這些元素都使用了“pattern”屬性，只是內置的而已。但是內置驗證的元素畢竟較少，并且如果要進行組合式的驗證，就需要使用“pattem”屬性。該屬性支持各種類型的組合正則表達式，用來驗證對應文本輸入框中的內容。在HTML5標記語言中，placeholder屬性能夠提供一種描述輸入域所期待值的提示。只要為某個元素設置“placeholder”屬性后，會在輸入域為空時顯示提示，在輸入域獲得焦點時這

9、個提示會消失。placeholder屬性適用于以下所示的標簽類型：textsearchurltelephoneemailpassword在HTML5標記語言中，可以使用required屬性來驗證文本框中的內容是否為空。required屬性適用于以下所示的標簽類型：textsearchurltelephoneemailpassworddate pickersnumbercheckboxradiofile通過前面的學習我們已經知道，“email”或“url”類型的元素在提交表單時只驗證非空內容。這時只要在驗證元素中添加一個“required”屬性，就可以對其內容是否為空自動進行驗證，如果為空，則在

10、表單提交數(shù)據時會顯示錯誤提示信息。在HTML5標記語言中，使用autocomplete屬性可以設置form或input域開啟自動完成功能，該功能可隨著用戶鍵入顯示以前的匹配條目從而節(jié)約時間。autocomplet屬性不但適用于標簽，而且適應于標簽中的以下類型：textsearchurltelephoneemailpassworddatepickersrangecolor在某些瀏覽器中，可能還需要啟用自動完成功能才能使該屬性生效。在HTML5標記語言中，通過表單重寫屬性（form override attributes）可以重寫form元素的某些屬性設定。HTML5中的表單重寫屬性如下：form

11、action：重寫表單的action屬性。formenctype：重寫表單的enctype屬性。formmethod：重寫表單的method屬性。formnovalidate：重寫表單的novalidate屬性。formtarget：重寫表單的target屬性。在HTML5應用中，表單重寫屬性適用于以下類型的標簽：submitimage在HTML5標記語言中，使用屬性min、max和step可以為包含數(shù)字或日期的input類型規(guī)定限定條件，這三個屬性的具體說明如下：max：規(guī)定輸入域所允許的最大值。min：規(guī)定輸入域所允許的最小值。step：為輸入域設置合法的數(shù)字間隔，假如step=3，則合法

12、的數(shù)是-3、0、3、6等。在HTML5應用中，屬性min、max和step適用于以下三個標簽類型：date pickersnumberrange在HTML5標記語言中，使用multiple屬性可以設置在輸入域中選擇多個值。在HTML5應用中，multiple屬性適用于以下兩種類型的標簽：emailfile在本實例中首先創(chuàng)建了一個“url”類型的元素，然后新建了一個表單“提交”按鈕。當單擊“提交”按鈕時，會自動檢測輸入框中的元素是否符合Web地址格式，如果不是合法的URL，則顯示錯誤提示信息。實例文件5-1.html的具體代碼如下所示。 請在下面的表單中輸入一個網址： 在此需要說明的是，不同瀏覽

13、器對元素的支持不同。在筆者目前的測試中Chrome瀏覽器和Opera瀏覽器必須輸入完整的URL地址路徑（包括“http:/”），否則將提示格式出錯信息，如下圖所示。執(zhí)行效果在本實例文件5-2.html中創(chuàng)建了三個表單，并分別創(chuàng)建了三個“number”類型的元素，分別用于輸入日期中“年”、“月”、“日”的數(shù)字。同時，新建一個表單的“提交”按鈕。單擊該按鈕時會檢測這三個輸入框中的數(shù)字是否屬于各自設置的整數(shù)范圍，如果不符合則顯示錯誤提示信息。實例文件5-2.html的具體代碼如下所示。 請輸入你的生日（年-月-日格式）： 年 月 日 在上述代碼中，定義了三個“number”類型的元素輸入框，用于分別

14、設置“mm”、“max”、“value”、“step”屬性值。其中“step”屬性值表示步長值，默認值為1，表示當用戶點擊微調控件時，向上增加或向下減少的值。上述代碼的執(zhí)行效果如下圖所示。執(zhí)行效果在HTML5標記語言中，使用元素可以實現(xiàn)不同類型信息的輸出，例如計算或腳本輸出。在實際應用中，元素必須從屬于某個表單，或通過屬性指定某個表單。元素的功能是在頁面中顯示各種不同類型表單元素的內容，例如輸入框的值、JavaScript代碼執(zhí)行后的結果值等。為了獲取這些值，需要設置元素的“onFormlnput”事件。當在表單輸入框中錄入內容時，會觸發(fā)該事件，從而方便地實時偵察到表單中各元素的輸入內容。下面

15、我們設計實現(xiàn)一個簡單的乘法計算器，方法如下：（1）在新建表單中創(chuàng)建兩個輸入文本框，分別用于輸入兩個數(shù)字。（2）新建一個元素，用于顯示兩個輸入文本框中數(shù)字相乘后的結果。（3）當改變兩個輸入框中任意一個數(shù)值時，會自動變化在元素中顯示的計算結果。實例文件5-3.html的具體代碼如下所示。 請在下面輸入兩個數(shù)字 * = 在上述代碼中，元素的內容通過“onFormlnput”事件綁定了兩個輸入文本框，因此，當輸入框中的值發(fā)生變化時，元素的內容根據綁定的規(guī)則迅速響應，這樣便實現(xiàn)了一種聯(lián)動的效果。執(zhí)行效果如下圖所示。執(zhí)行效果提示：目前各大瀏覽器并非完全支持HTML5的特性，這里建議讀者使用Opera Mo

16、bile Emulator進行測試。它是一款PC上的Opera mobile模擬器，簡單來說，它能在你的電腦上模擬各種手機、平板等設備去訪問網站。免費、使用方法簡單，讀者可在其官方網站進行下載，資料包中附有相應安裝包。在HTML5標記語言中，新增元素的功能是生成頁面的密鑰。元素是一種密鑰對生成器（key-pair generator）技術，如果在表單中創(chuàng)建元素，當在表單提交時該元素將生成一對密鑰：一個保存在客戶端，稱為私密鑰（Private Key）；另一個發(fā)送至服務器，由服務器進行保存，稱為公密鑰（Public Key），公密鑰可以用于客戶端證書的驗證。下面來講解在網頁中生成一個密鑰的方法，具體實現(xiàn)流程如下所示：（1）在表單中新建一個“name”值為“keyUserInfo”的元素，通過此元素可以在頁面中創(chuàng)建一個選擇密鑰位數(shù)的下拉列表框。（2）當選擇列表框中某選項值，并單擊表單中的“提交”按鈕時，可以將根據所選密鑰的位數(shù)生成對應密鑰提交給服務器。實例文件5-4.html的具體實現(xiàn)代碼如下所示：使用keygen元素 選擇密鑰位數(shù) 在上述代碼中，元素在表單中以列表的形式展示提供密鑰位數(shù)的選擇。當提交表單時，可以通過元素在表單中的“name”值獲取該元素生成的