DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> HTML5新表單
HTML5新表單
編輯:HTML5詳解     

Html5推出了一段時間,現在大部分浏覽器還不支持,不過IE9和google Chrome支持部分特性。

那麼Html5到底有哪些新特性呢? 我就用幾個簡單明了的字說明下:

1、新表單

2、新媒介

3、新繪畫

4、新元素

5、離線存

下面我們就來一個一個的來解釋這些新特性。

新表單

a、Email

<input type="email" name="myemail"/> 提交表單時會自動驗證輸入的格式是否是正確的email格式

b、Url

<input type="url" name="myurl"/> 提交表單時會自動驗證輸入的格式是否是正確的Url格式

c、number

<input type="number" name="mynumber"/> 提交表單時會自動驗證輸入的格式是否是正確的數字格式

你還可以增加其他屬性

<input type="number" name="mynumber" step="2" min="2" value="4" max="10"/>

其中Value就是我們以前用的默認值;min最小數字,max最大數字;step就是每個輸入的數字之間的差值,比如我們輸入的是2,下一次輸入的就是4。(這裡我們定義了最小值是2,如果定義了最小值是0 。那麼我們可以輸入0,2,4,6,8,10)

d、range

<input type="range" name="myrange" step="2" min="2" value="4" max="10"/> 通過圖形界面的形式來展示輸入域,不像表單的文本那樣輸入數字,而是滾動條的展示。如下圖:

e、date pickers

<input type="date" name="mypickers"/> 我們稱為的日期數據輸入框,也就是我們以前使用的日期控件,現在通過這種方式可以直接展示了。

<input type="date" name="mypickers"/> 選擇日、月、年

<input type="month " name="mypickers"/> 選擇月、年

<input type="week" name="mypickers"/> 選擇月、年

<input type="time " name="mypickers"/> 選擇時間 小時和分鐘

<input type="datetime" name="mypickers"/> 選擇時間 日、月、年(Utc標准)

<input type="datetime-local" name="mypickers"/>選擇時間 日、月、年(本地)

<input type="search" results="10" />

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