武林網(wǎng)(www.survivalescaperooms.com)文章簡介：input新增加的時(shí)間類型應(yīng)用。

今天網(wǎng)頁教學(xué)網(wǎng)帶領(lǐng)大家一起領(lǐng)略一下HTML5的新特性，標(biāo)記input在HTML5中新增加的時(shí)間類型的應(yīng)用，如果在以下這幾種輸入框中輸入的格式不正確，也是無法提交的。

注意：此種類型的input在Opera10+中效果為佳，Chrome中效果不是十分好，外觀取決于瀏覽器


1、Date類型：

<form>
 
      <input id="webjx_date" name="webjx.com" type="date"/>
 
      <input type="submit" value="提交"/>
 
</form>

如果在之前，我們使用js+css+dom才能實(shí)現(xiàn)日歷選擇日期的效果，在HTML5中，我們只需要設(shè)置input為date類型即可，提交表單的時(shí)候也不需要我們驗(yàn)證數(shù)據(jù)了，它已經(jīng)幫我們實(shí)現(xiàn)了。
運(yùn)行效果如下圖：

2、Time類型：

<form>
 
      <input id="webjx_time" name="webjx.com" type="time"/>
 
      <input type="submit" value="提交"/>
 
</form>

此類型是一個(gè)專門用來輸入時(shí)間的文本框，在提交的時(shí)候檢查是否輸入了有效的時(shí)間。
運(yùn)行效果如下圖：

3、DateTime類型：

<form>
 
      <input id="webjx_datetime" name="webjx.com" type="datetime"/>
 
      <input type="submit" value="提交"/>
 
</form>

datetime類型的input元素是專門用來輸入U(xiǎn)TC日期和實(shí)踐的文本框，在提交的時(shí)候，對日期和時(shí)間進(jìn)行有效的檢查。

運(yùn)行效果如下圖：

4、DateTime-Local類型：

<form>
      <input id="webjx_datetime-local" name="webjx.com" type="datetime-local"/>
      <input type="submit" value="提交"/>
</form>

此類型與datatime類型差不多，只不過是用來輸入本地的日期和時(shí)間。

運(yùn)行效果如下圖：

5、Month類型：

<form>
 
      <input id="webjx_month" name="webjx.com" type="month"/>
 
      <input type="submit" value="提交"/>
 
</form>

month是一種專門輸入月份的文本框，在日歷中，你只能選擇某一個(gè)月，不能選擇某一天。

運(yùn)行效果如下圖：

6、Week類型：

<form>
 
      <input id="webjx_week" name="webjx.com" type="week"/>
 
      <input type="submit" value="提交"/>
 
</form>

week是專門用來輸入周（星期）的文本框，W后面所跟的數(shù)字表示此周是當(dāng)年的第幾個(gè)星期。在日歷中只能選擇一周，同樣不能選擇某一天。

運(yùn)行效果如下圖：

HTML5在此方面做的還算比較完善了，至于樣式的定義，歡迎大家在此討論！