04. Web大前端時代之：HTML5+CSS3入門系列~HTML5 表單

Web大前端時代之：HTML5+CSS3入門系列：http://www.cnblogs.com/dunitian/p/5121725.html

1、input新增類型：

1.tel：輸入類型用於應該包含電話號碼的輸入字段

 

2.url：用於應該包含 URL 地址的輸入字段 - 提交表單時對 url 字段的值自動進行驗證

<form action="/test.html" method="post">

url:<input type="url" name="user_url" /><input type="submit" />

</form>

 

注意：要帶ftp:// http:// https:// 等等的前綴頭才能夠

 

 

3.email：用於 e-mail 地址的文本字段

<form action="/test.html" method="post">

email:<input type="email" name="user_email" /><input type="submit" />

</form>

 

 

4.number：輸入類型用於包含數字值的輸入字段 - 能夠設置可接受數字的限制

<form action="/test.html" method="post">

number:<input type="number" name="user_number" min="1" max="10" /><input type="submit" />

</form>

 

 

5.search：用於搜索字段，好比站內搜索或谷歌搜索等 - 搜索字段的外觀與常規的文本字段無異

<input type="search" />

 

 

6.color 定義拾色器。

 

7.range：輸入類型用於應該包含指定範圍值的輸入字段 - range 類型顯示爲滑塊

 

 

8.日期檢出器類型

HTML5擁有多個可供選則日期和時間的新型文本輸入框

date：定義日期字段

接受結果

 

 

month：定義日期字段的月

接受結果

 

 

week：定義日期字段的周

接受結果

 

 

time：定義日期字段的時、分、秒

接受結果

 

 

datetime：定義日期字段

 

 

datetime-local：定義日期字段

接受結果

大綱圖：

2、input新增屬性：

 

 

3、form新增類型和屬性：

 

附錄：

火狐表現：

 

IE表現：

 

谷歌表現：