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

    HTML5擁有多個新的表單輸入型控件，這些新特性提供了更好的輸入控制和驗證，下面就來為大家介紹一下這些新的表單輸入型控件。

    1.Input類型-email

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

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

2.Input類型-url

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

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

3.Input類型-number

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

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

請使用如表所示的屬性來規(guī)定對數(shù)字類型的限定。

4.Input類型-range

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

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

請使用如表所示的屬性來規(guī)定對數(shù)字類型的限定。

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

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

? date：選取日、月、年。

? month：選取月、年。

? week：選取周、年。

? time：選取時間（小時和分鐘）。

? datetime：選取時間、日、月、年（UTC時間）。

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

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

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

6.Input類型-search

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

7.Input 類型-color

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

代碼實例如下：

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