DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> HTML5實例教程:input標記時間類型屬性實例
HTML5實例教程:input標記時間類型屬性實例
編輯:HTML和Xhtml     

今天網頁教學網帶領大家一起領略一下HTML5的新特性,標記input在HTML5中新增加的時間類型的應用,如果在以下這幾種輸入框中輸入的格式不正確,也是無法提交的。

注意:此種類型的input在Opera10+中效果為佳,Chrome中效果不是十分好,外觀取決於浏覽器


1、Date類型:

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

如果在之前,我們使用js+css+dom才能實現日歷選擇日期的效果,在HTML5中,我們只需要設置input為date類型即可,提交表單的時候也不需要我們驗證數據了,它已經幫我們實現了。
運行效果如下圖:

2、Time類型:

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

此類型是一個專門用來輸入時間的文本框,在提交的時候檢查是否輸入了有效的時間。
運行效果如下圖:

3、DateTime類型:

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

datetime類型的input元素是專門用來輸入UTC日期和實踐的文本框,在提交的時候,對日期和時間進行有效的檢查。

運行效果如下圖:

4、DateTime-Local類型:

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

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

運行效果如下圖:

5、Month類型:

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

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

運行效果如下圖:

6、Week類型:

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

week是專門用來輸入周(星期)的文本框,W後面所跟的數字表示此周是當年的第幾個星期。在日歷中只能選擇一周,同樣不能選擇某一天。

運行效果如下圖:

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved