完善:HTML5表單新特徵簡介與舉例

1、前言一撇

其實關於HTML5的表單特徵早在去年「 你必須知道的28個HTML5特徵、竅門和技術」一文中就有所介紹(在第十一項),不過,有些遺憾的是,此部分的介紹是以視頻形式展現的,其實,是視頻還好啦,關鍵是TouTuBe視頻,須要越獄觀看。得,像我這樣安分守已的良民,除了看空姐,其餘狀況都是懶得fan牆的,因此這部分視頻展現的內容,其實就是個「空」。
截圖
因此,這裏打個補丁,把這部份內容完善下。本文的大體內容有:
# <input type=」number」 />
# <input type=」range」 />
# <input type=」date」 /> 以及其餘時間選擇器控件
# <input type=」color」 /> 顏色選擇器
# <input type=」search」 />
# <datalist>元素和list屬性
# HTML5表單驗證與CSS3的曖昧關係

2、HTML5表單新特徵

1. type=number
type=number的HTML表單元素可讓你以按鍵的方式改變文本框中的值,這種效果在window系統中常常見到,例如:
window系統中的時間點擊選擇
懶惰的人寧肯躺在椅子上點點鼠標也不元素坐起來按鍵盤,因此,相比鍵盤輸入,點擊輸入也是有市場的。這就是爲什麼HTML5表單中有數值選擇控件。
大體HTML代碼以下:
人數:<input type="number" value="1" />
若是加上點合適的寬度限制,則在Chrome瀏覽器下效果(估計UI與系統主題相關)以下:
Chrome
目前還支持的瀏覽器就是Opera 11了,不過Opera下的上下增減數值的按鈕長得有些歪瓜裂棗,頗有抽象派的風格。
Opera瀏覽器下number類表單模樣
您能夠狠狠地點擊這裏: HTML5表單之nubmer控件demo
2. type=range
range中文意義值區域範圍,這類效果在window系統中也家常便飯,以下截圖:
window系統下拖動條
HTML5中有相似效果的input控件,只要定義其type爲range就能夠了,so easy!
拖動範圍:<input type="range" value="50" />
默認狀況下的value範圍是0~100,因此呢,value=50,則拖動條就在區域範圍的中間。以下圖所示:
Opera下range空間效果
個人Firefox目前版本3.6,還沒有支持此特性。不過,Chrome,Opera,以及Safari4下均有效果,只是畢竟不是同一個爸爸,因此模樣上還有有些差別的,這裏就不展現這些差別了。
您能夠狠狠地點擊這裏: HTML5表單之range控件demo
在一開始提到的「 你必須知道的28個HTML5特徵、竅門和技術」一文中最後一項,也就是第二十八項的精湛效果實例就是在range類控件上實現的效果,裏面還涉及到了min,max屬性,以及step屬性,是個很是值得觀摩學習體驗的例子。關於此實例demo,您能夠狠狠地點擊 這裏
3. type=」date」以及其餘時間控件
這是時間選擇器控件,之後選擇時間久不要去折騰什麼js插件了,直接一個date屬性,而後,你就能夠邊和咖啡邊和旁邊掃地的老太太交流代碼了。不信,你看:
選擇日期:<input type="date" value="2011-01-04" />
結果在支持的瀏覽器下,例如Opera下,就有以下效果:
date類控件效果
這不活脫脫的一個時間選擇器嘛!
window系統下時間控件
除了長相有些磕磣,其餘仍是挺讓人欣喜的。
時間類空間,不只有date類型的,還有time類型,還有datetime,week,month。
顯然,顧名思意,date類型是選擇日期,time類型是選擇時間,datetime是日期時間一塊兒選,而week是選擇星期,month實現選擇月份。
您能夠狠狠地點擊這裏: HTML5表單時間類空間demo
我測試了番,設置剛把Safari升級到5.0版本,發現,目前而言,就Opera瀏覽器支持這類時間控件。效果分別以下:
type=time時效果有些相似type=number,能夠經過點擊切換事件,默認每點一次,時間切換1分鐘,鼠標長按也是有效的。
選擇時間:<input type="time" value="22:52" />
選擇時間:
選擇時間的效果
type=week下,鼠標通過的時候,每一行(表明一週)的日期背景色會集體變暗,以下圖:
type=week控件鼠標hover效果
而type=month的時候,是整月的背景色變深,以下圖:
整月日期鼠標通過背景變深
二者選擇後的數據值以下:
week類型和month類型的值
4. type=」color」
這是顏色選擇器控件,至關的給力。使用很簡單,以下:
選取顏色:<input type="color" value="#34538b" />
結果在Opera瀏覽器下默認效果以下:
顏色選擇器默認
默認input控件有個圓圓的顏色爲#34538b的背景,咱們點擊下拉,結果,擦,展開的web色面板:
web色面板效果截圖
點擊下面有「其餘…」字樣的按鈕,結果,噌,展開了華麗的顏色選擇面板:
華麗的顏色選擇面板截圖
很酷,關鍵使用很方便,哦呵呵。
您能夠狠狠地點擊這裏: HTML5表單之color顏色選擇控件demo
5. type=search
就是搜索功能,我記得何時看到search類型的input框裏面會自動有搜索的放大鏡圖標的。不過,此次測試沒有見到(難道是在夢境中),此屬性的UI效果很低調,很冷淡。在webkit核心的瀏覽器下,有值的時候,輸入框後面會有個漸變的很性感的叉號,以下圖:
search類型的HTML空間樣式
其餘我就沒有發現什麼特別之處,因此,這個就提這麼點。您能夠狠狠地點擊這裏: HTML5 search類型控件demo
6. <datalist>元素和list屬性
datalist是個很稀奇的元素,實現數據列表下拉效果的,UI風格有點相似於autocomplete。
autocomplete下拉風格
舉個簡單例子:
以下HTML代碼:
列表:<input type="text" list="mydata" placeholder="熱門電影排行" />
    <datalist id="mydata">
        <option label="Top1" value="讓×××飛">
        <option label="Top2" value="非誠勿擾2">
        <option label="Top3" value="大笑江湖">
        <option label="Top4" value="趙氏孤兒">
        <option label="Top5" value="初戀這件小事">
    </datalist>
結果輸入框得到焦點後效果以下:
datalist下拉效果截圖
這玩意,這屬性是個好東西,不要溜達了一圈發現,還只在最新的Opera瀏覽器下有效果,其餘瀏覽器往後是否支持,不得而知。

3、HTML5表單驗證與CSS3

伴隨着HTML5,CSS3的選擇器部分也出現了一些新的僞類,例如:
  • :required 和 : optional,指表單元素內容是可選的仍是必填的
  • :valid 和 :invalid 表示填入的數據是有效的仍是無效的,例如email類型的input框就須要是有效的郵箱格式
  • in-range 和 : out-of-range, 這適用於range類型的input控件,當其有min或是max範圍限制的時候
舉個例子,以下CSS與HTML代碼:
input[type=text]:focus:valid,
input[type=email]:focus:valid,
input[type=number]:focus:in-range { outline: 2px green solid; }
input[type=text]:focus:invalid,
input[type=email]:focus:invalid,
input[type=number]:focus:out-of-range { outline: 2px red solid; }
<p>普通輸入框:<input type="text" /></p>
<p>郵件輸入框:<input type="email" /></p>
<p>數值輸入框:<input type="number" min=0 max=10 /> (0~10)</p>
以郵件輸入框舉例,當輸入文字不是合法郵箱時,輸入框外輪廓會顯示紅色警示邊框:
不合法郵箱的邊框效果
隨着字符的輸入,當郵箱合法的時候,邊框紅色就會刷得一下變成安全的綠色邊框:
郵箱格式合乎要求時的效果
驗證工做,以及相關的樣式顯示等都由瀏覽器和CSS完成了。我想到了10年之後,哇,那是的web,一切是那麼的美好。

4、匆匆結語

HTML5表單的一些其餘特性,例如required, autofocus, placeholder,pattern等屬性在「 你必須知道的28個HTML5特徵、竅門和技術」一文中已經有所展現與講解,因此這裏就不贅述了。
若是您對HTML5感興趣,我我的建議先看以前的那個28個什麼什麼的文章,本文的內容能夠說是對其某一點(其餘HTML5表單新特徵)的進一步完善與補充。前者是大頭,本文充其量是個高級別的打醬油的。
最後,因爲都是HTML5的些東西,若是您如今手頭上正在折騰的瀏覽器是IE之流,即便你讓你的瀏覽器再飛一下子,也不會看到這些矚目的效果的。因此,建議移步最新版本的現代瀏覽器。
參考文章:
New form features in HTML5: http://dev.opera.com/articles/view/new-form-features-in-html5/

0html

收藏android

a1405

217篇文章,54W+人氣,0粉絲

相關文章
相關標籤/搜索