html5擁有很多新的表單輸入類型，這些類型提供更好的輸入控制和驗證，以前我們需要自己通過腳本去控制的功能，現(xiàn)在標(biāo)簽已經(jīng)幫我們完成了。這里我將詳細(xì)介紹input類型為：date、datetime、datetime-local、time、month、week、email、number、range、search、tel、url、color的用法！
注意:并不是所有的主流瀏覽器都支持新的input類型，不過您已經(jīng)可以在所有主流的瀏覽器中使用它們了。即使不被支持，仍然可以顯示為常規(guī)的文本域。建議使用Opera瀏覽器測試
date類型
date類型允許你從一個時機(jī)選擇期選擇一個日期，以前我們都是使用JS時間插件完成的功能，現(xiàn)在已經(jīng)如此簡單！代碼如下：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
生日: <input type="date" name="bday">
</body>
</html>
效果：
注意:低版本的火狐和IE不支持該屬性，建議使用Opera瀏覽器測試！
datetime類型
datetime類型的input元素是專門用來輸入UTC日期和實踐的文本框，在提交的時候，對日期和時間進(jìn)行有效的檢查。代碼如下：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<form>
<input id="w3cfuns_datetime" name="w3cfuns.com" type="datetime"/>
<input type="submit" value="提交"/>
</form>
</form>
</body>
</html>
效果：
注意:建議使用Opera瀏覽器測試！
datetime-local類型
datetime-local 類型允許你選擇一個日期和時間 (無時區(qū))。此類型與datatime類型差不多，只不過是用來輸入本地的日期和時間。
time類型
time 類型允許你選擇一個時間，在提交的時候檢查是否輸入了有效的時間。代碼如下：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
選擇時間: <input type="time" name="usr_time">
</body>
</html>
效果：
注意:建議使用Opera瀏覽器測試！
month類型
month是一種專門輸入月份的文本框，在日歷中，你只能選擇某一個月，不能選擇某一天。代碼如下：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<input id="w3cfuns_month" name="w3cfuns.com" type="month"/>
</body>
</html>
效果：
注意:建議使用Opera瀏覽器測試！
week類型
week是專門用來輸入周（星期）的文本框，W后面所跟的數(shù)字表示此周是當(dāng)年的第幾個星期。在日歷中只能選擇一周，同樣不能選擇某一天。代碼如下：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<input id="w3cfuns_week" name="w3cfuns.com" type="week"/>
</body>
</html>
效果：
注意:建議使用Opera瀏覽器測試！
email類型
email 類型用于應(yīng)該包含 e-mail 地址的輸入域，在提交表單時，會自動驗證 email 域的值是否合法有效。代碼如下：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<form action="demo-form.php">
E-mail: <input type="email" name="usremail">
<input type="submit">
</form>
</body>
</html>
注意: Internet Explorer 9 及更早IE版本不支持type="email" 。
number類型
number 類型用于應(yīng)該包含數(shù)值的輸入域。我們還能夠設(shè)定對所接受的數(shù)字的限定，step為上一個數(shù)字與下一個數(shù)字的間隔，value - 規(guī)定默認(rèn)值。代碼如下：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<form action="demo-form.php">
<input type="number" max="9" min="0" step="2"/>
<input type="submit">
</form>
</body>
</html>
range類型
range 類型用于應(yīng)該包含一定范圍內(nèi)數(shù)字值的輸入域。range 類型顯示為滑動條。step - 規(guī)定合法的數(shù)字間隔，value - 規(guī)定默認(rèn)值。代碼如下：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<form action="demo-form.php">
<input type="range" name="points" min="1" max="10" step="2"/>
<input type="submit">
</form>
</body>
</html>
search類型
search 類型用于搜索域，比如站點搜索或 Google 搜索。一般是語義話，代碼如下：
<input type="search" name="googlesearch">
tel類型
tel可輸入一個電話號碼,大部分瀏覽器不支持，代碼如下：
<input type="tel" name="usrtel">
url類型
url 類型用于應(yīng)該包含 URL 地址的輸入域。在提交表單時，會自動驗證是否符合url標(biāo)準(zhǔn)。代碼如下：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<form action="demo-form.php">
添加您的主頁: <input type="url" name="homepage">
<input type="submit">
</form>
</body>
</html>
color類型
color 類型用在input字段主要用于選取顏色，代碼如下：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<form action="demo-form.php">
選擇你喜歡的顏色: <input type="color" name="favcolor">
<input type="submit">
</form>
</body>
</html>
效果：
注意:建議使用Opera瀏覽器測試！
