HTML5 表單應(yīng)用 輸入型控件

    HTML5擁有多個(gè)新的表單輸入型控件，這些新特性提供了更好的輸入控制和驗(yàn)證，下面就來(lái)為大家介紹一下這些新的表單輸入型控件。

    1.Input類型-email

    email類型用于應(yīng)該包含e-mail地址的輸入域。在提交表單時(shí)，會(huì)自動(dòng)驗(yàn)證email域的值，代碼實(shí)例如下：

    E-mail:<input type="email" name="email_url" />

2.Input類型-url

    url類型用于應(yīng)該包含url地址的輸入域。在提交表單時(shí)，表單會(huì)自動(dòng)驗(yàn)證url域的值，代碼實(shí)例如下:

    Home-page: <input type="url" name="user_url" />

3.Input類型-number

number類型用于應(yīng)該包含數(shù)值的輸入域。還能夠設(shè)定對(duì)所接受數(shù)字的限定，代碼實(shí)例如下：

points: <input type="numbert" name="points" max="10" min="1"/>

請(qǐng)使用如表所示的屬性來(lái)規(guī)定對(duì)數(shù)字類型的限定。

4.Input類型-range

    range類型用于應(yīng)該包含一定范圍內(nèi)數(shù)字值的輸入域。range類型在頁(yè)面中顯示為可移動(dòng)的滑動(dòng)條，還能夠設(shè)定對(duì)所接受數(shù)字的限定，代碼實(shí)例如下：

    <input type="range" min="2" max="9" />

請(qǐng)使用如表所示的屬性來(lái)規(guī)定對(duì)數(shù)字類型的限定。

5.Input類型-Date Pickers (日期選擇器）

    HTML5擁有多個(gè)可供選取曰期和時(shí)間的新輸入類型，包括：

? date：選取日、月、年。

? month：選取月、年。

? week：選取周、年。

? time：選取時(shí)間（小時(shí)和分鐘）。

? datetime：選取時(shí)間、日、月、年（UTC時(shí)間）。

? datetime-local：選取時(shí)間、日、月、年（本地時(shí)間）。

如果我們想要從日歷中選取一個(gè)日期，代碼如下：

Date: 〈input type*3"date" xiame^Hdate" />

6.Input類型-search

    search類型用于搜索域，開(kāi)發(fā)者可以用在大名鼎鼎的百度搜索。search域在頁(yè)面中顯示為常規(guī)的單行文本輸入框。

7.Input 類型-color

color類型用于顏色，可以讓用戶在瀏覽器中直接使用拾色器找到自己想要的顏色。color會(huì)在頁(yè)面中生成一個(gè)允許用戶選取顏色的拾色器。

代碼實(shí)例如下：

color: <input type="color" name="color_type" />