介紹與導航，
----------------------------------------------------------------------------------------
1.Email輸入框,自動驗證Email有效性。
2.number數字輸入，驗證正確，可以設置開始結束位。
3.URL輸入框，可以驗證URL輸入的有效性。
4.Date pickers (date, month, week, time, datetime, datetime-local)選擇框，可以選擇日期，時間，月，周。
5.datalist輸入選擇。
在大家使用HTml的時候請一定要把你的瀏覽器改成OPera的，
因爲現在只有Opera對Html5支持的纔是最好的，
其它的瀏覽器可能是無效的，特別是IE根本就不管用。
說明一下本文中所有的標籤都起名爲user_email，如果大家自己使用的話就自己修改一下，我這裏是方便 寫代碼
1.Email輸入框,自動驗證Email有效性
----------------------------------------------------------------------------------------
大家以前在做註冊功能時或者是登錄功能時，如果讓用戶輸入Email時，肯定 要加或多或少的驗證吧，而且有時候正則寫起來也不是很爽，但在HTml5裏面這些都將成爲一個標籤
只要一個Email類型 的INput標籤就可以實現下面咱們來看看效果吧
如果在我輸入的郵件地址不對的時候就會有提示，下面看下我的代碼吧
<!DOCTYPE HTML> <html> <body> <form action="../Default.aspx" method="get"> E-mail: <input type="email" name="user_email"/><br /> <input type="submit"/> </form> </body> </html>
自己輸入來試試吧E-mail:
是不是很方便 呀，以後再想讓用戶輸入Email的時候直接拉個控件過來就 OK了。
2.number數字輸入，驗證正確，可以設置開始結束位
----------------------------------------------------------------------------------------
以前我們如果想讓用戶輸入數字的話，一定不是一件簡單的工作，但有了number類型的標籤時大家會很爽的，不多說了看
下效果
看下我的代碼吧
<!DOCTYPE HTML> <html> <body> <form action="../Default.aspx" method="get"> <input type="number" step="5" min="5" max="20" name="number" value="0"/> <input type="submit"/> </form> </body> </html>
而且你可以設置最大值最小值，並且可以設置增長的間隔，
一起來看看他的屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| max | number | 規定允許的最大值 |
| min | number | 規定允許的最小值 |
| step | number | 規定合法的數字間隔（如果 step="3"，則合法的數是 -3,0,3,6 等） |
| value | number | 規定默認值 |
現在自己來試試吧
3.URL輸入框，可以驗證URL輸入的有效性。
----------------------------------------------------------------------------------------
這個跟之前的都差不多也是直接Type類型，但是他只驗證協議，不驗證有效性，比如你直接輸入一個123，它會自動給你加上http://頭協議
看下面的代碼就知道了
<form action="../Default.aspx" method="get"> URL: <input type="url" name="user_email"/><br /> <input type="submit"/> </form>
還是自己動手試試吧URL:
4.Date pickers (date, month, week, time, datetime, datetime-local)
----------------------------------------------------------------------------------------
我們平時如果要做個日曆控件的話一定是非費勁的吧，而且效果 也不怎麼好，
但是在這裏你就太方便 了，在家一起來看看效果吧
代碼如下
<!DOCTYPE HTML> <html> <body> <form action="../Default.aspx" method="get"> Date: <input type="date" name="user_email"/> month : <input type="month" name="user_email"/> week: <input type="week" name="user_email"/> time: <input type="time" name="user_email"/> datetime: <input type="datetime" name="user_email"/> datetime-local : <input type="datetime-local" name="user_email"/> <input type="submit"/> </form> </body> </html>
一起來試試吧
Date: month : week: time:
datetime: datetime-local :
|
5.datalist ---------------------------------------------------------------------------------------- 這個其實有點像DropDownList了，但又比它的功能要強大一些， 先來看看效果
代碼如下 <!DOCTYPE HTML> <html> <body> <form action="../Default.aspx" method="get"> Webpage: <input type="url" list="url_list" value="fdf" name="user_email"/> <datalist id="url_list"> <option label="W3School" value="http://www.w3school.com.cn"/> <option label="Microsoft" value="http://www.microsoft.com"/> </datalist> <input type="submit"/> </form> </body> </html> 自己動手來試試吧
但是現在支持Html5的瀏覽器太少了，我發現只有Opera支持的還行，其它的都基本上是一半支持一半不支持，讓人尷尬啊。 希望Html5時候早日到來吧，讓我們一起期待更多瀏覽器提供更好更全面的支持。 -------------------------------------------------------------簽名部分您可以不訪問--------------------------------------------------------------
歡迎大家轉載，如有轉載請註明文章來自： http://sufei.cnblogs.com/ 簽名：做一番一生引以爲豪的事業;在有生之年報答幫過我的人;並有能力幫助需要幫助的人; 軟件開發，功能定製，請聯繫我 |
