HTML5表單教程之input新增加的六種時間型別

2021-06-18 12:44:13 字數 2348 閱讀 7846

今天介紹一下input在html5中新增加的時間型別的應用,如果在以下這幾種輸入框中輸入的格式不正確,是無法提交的。

注意:此種型別的input在opera10+中效果為佳,chrome中效果不是十分好,外觀取決於瀏覽器

1、date型別:

<

form

>

<

inputid=

"w3cfuns_date"

name

="w3cfuns.com"

type

="date"

/>

<

input

type

="submit"

value

="提交"

/>

form

>

如果在之前,我們使用js+css+dom才能實現日曆選擇日期的效果,在html5中,我們只需要設定input為date型別即可,提交表單的時候也不需要我們驗證資料了,它已經幫我們實現了。

執行效果如下圖:

2、time型別:

<

form

>

<

inputid=

"w3cfuns_time"

name

="w3cfuns.com"

type

="time"

/>

<

input

type

="submit"

value

="提交"

/>

form

>

此型別是乙個專門用來輸入時間的文字框,在提交的時候檢查是否輸入了有效的時間。

執行效果如下圖:

3、datetime型別:

<

form

>

<

inputid=

"w3cfuns_datetime"

name

="w3cfuns.com"

type

="datetime"

/>

<

input

type

="submit"

value

="提交"

/>

form

>

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

執行效果如下圖:

4、datetime-local型別:

<

form

>

<

inputid=

"w3cfuns_datetime-local"

name

="w3cfuns.com"

type

="datetime-local"

/>

<

input

type

="submit"

value

="提交"

/>

form

>

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

執行效果如下圖:

5、month型別:

<

form

>

<

inputid=

"w3cfuns_month"

name

="w3cfuns.com"

type

="month"

/>

<

input

type

="submit"

value

="提交"

/>

form

>

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

執行效果如下圖:

6、week型別:

<

form

>

<

inputid=

"w3cfuns_week"

name

="w3cfuns.com"

type

="week"

/>

<

input

type

="submit"

value

="提交"

/>

form

>

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

執行效果如下圖:

HTML5新增input表單

html5新增input表單 input表單及其屬性 type email 限制使用者輸入必須為e mail型別 type url 限制使用者輸入必須為 和 型別 type date 限制使用者輸入必須為日期型別 type month 限制使用者輸入必須為月份型別 type time 限制使用者輸入...

HTML5新增input表單的屬性

html5新增input表單的屬性 input表單屬性 required required 此處內容不能為空,必填 placeholder 請輸入使用者名稱 方框空裡的灰色 提示語 請輸入使用者名稱 為提示語舉例 autofocus autofocus 網頁載入出來後,游標自動聚焦到需要輸入的框裡 ...

菜鳥教程學習 html5 表單

整理自 表單中,輸入框的內容提交後,仍有記憶 autocomplete on autocomplete 適用於last name 同時提交了demo admin.php?該屬性與 type submit 和 type image 配合使用,可覆蓋 form 元素的 enctype 屬性 定義了表單的...