HTML5 的標准已經定了，應該火了，或者已經火了。那么是不是可以學習一下呢？
目前h5的主場還是在手機端，pc還是受困於瀏覽器的兼容，主要是IE在拖后腿。所以這里側重的是手機里面的表現。
先來看看表單。h5里面增加了一些新的標簽和屬性，解決了我們以前比較頭疼或者繁瑣的功能。
先看看input里面的type屬性，新增了一些屬性，比如email、number、date、range等，那么他們的表現到底如何呢？我們來羅列一下。
<form > <input type="checkbox" name="c1" value="11"/> <input type="checkbox" name="c1" value="12"/>多選 <br/><br/> <input type="radio" name="r1" value="21"/> <input type="radio" name="r1" value="22"/> 單選<br/><br/> <input id="color" type="color"/> 顏色：<span id="spanColor"></span><br/><br/> <input id="month" type="month"/> 月份：<span id="spanMonth"></span><br/><br/> <input id="week" type="week"/> 周：<span id="spanWeek"></span><br/><br/> <input id="date" type="date"/> 日期：<span id="spanDate"></span><br/><br/> <input id="" type="datetime"/> 日期和時間 （UTC 時間）（這個沒有效果）<br/><br/> <input id="datetime" type="datetime-local"/> 日期和時間 （本地時間）：<span id="spanDatetime"></span><br/><br/> <input id="time" type="time"/> 時間：<span id="spanTime"></span><br/><br/> <input id="email" type="email"/> email （提交表單的時候會自動進行簡單的驗證）<br/> <span id="spanEmail"></span><br/> <input id="file" type="file"/> 文件 （應該可以上傳手機里的圖片，沒測試）<br/> <span id="spanFile"></span><br/> <input id="number" type="number" max="100" min="10" step="2" value="4"/> 數字 （輸入法會變成數字形式）<br/> <span id="spanNumber"></span><br/> <input id="range1" type="range" max="100" min="10" step="10" value="1" /> 滑動塊 <br/> <span id="spanRange"></span><br/> <input id="range2" type="range" max="100" min="10" step="1" value="1" /> 滑動塊 <br/> <span id="span1"></span><br/> <input id="password" type="password"/> 密碼（輸入法會變成英文和數字形式）<br/> <span id="spanPassword"></span><br/> <input id="tel" type="tel"/> 電話 （數字鍵盤和#號）<br/> <span id="spanTel"></span><br/> <input id="text" type="text" placeholder="請輸入。。。"/> 文本 （輸入法會變成中文形式）<br/> <span id="spanText"></span><br/> <input id="url" type="url"/> url（輸入法會變成英文形式）<br/> <span id="spanUrl"></span><br/> <input id="search" type="search"/> 查詢 (輸入法里面增加“放大鏡”，點擊放大鏡后會提交表單)<br/> <span id="spanSearch"></span><br/> <input id="reset" type="reset" value=" 清 空 "/> <br/> <input id="submit" type="submit" value=" 提 交 "/> <br/> <input id="button" type="button" value=" 取 值 "/><br/> </form>
w3school 里面有介紹，我也是看這里的資料學習的，里面有在線演示，這個功能很強大。當然自己動手做一遍，印象可以更深刻。所以有了上面的代碼。
先看看在手機瀏覽器里面的表現。
type="number" 這個很好很強大，在手機里，點文本框后，輸入法會自動變成數字形式，這個就大大方便輸入，不需要用戶再次修改輸入法的狀態了。
type="week" "date" 等，在手機里面也有很漂亮和方便的選擇方式。
type="range" 是滑動塊。目前沒想到很合適的應用場景。
type="url" 輸入法會自動切換成英文輸入狀態。
type="email" 在提交表單的時候會做自動的檢測，只是檢測標准比較簡單，要有 @，前后要有字符。然后就符合條件了。這個嘛，嗯嗯。
type="color" 這個可以選擇顏色，什么地方可以應用到呢？值是 #123456的形式。
type="datetime" 這個說是 UTC 時間，但是在chrome和手機里面都沒要任何效果，和普通的文本框一樣。type="datetime-local" 才有效果。
還有新增了一些屬性，這個下次在說。
在說一下事件。選擇性的input可以用onchange事件，選完了就會觸發獲得選擇的值，onclick的話，是先觸發事件，然后才會去change。
type="range" 可以用 onmousemove 事件，移動一下就會把值取出來。只是不知道是不是應該這么用，一開始還好用，可以刷了幾次之后居然給玩死了。
datalist 元素: <input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="W3School" value="http://www.jb51.net" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist>
<datalist > 是啥？asp.net里面的datalist嗎？看效果不是。
w3school 給出來的例子是和input配合使用，實現既可以選擇又可以自己添加內容的“下拉列表框”。想想以前實現這樣的功能是多么的頭疼，現在兩個標簽就搞定了。js都不用寫。只是需要瀏覽器支持！
在線演示效果
http://demo001.naturefw.com/input.htm
我知道 w3school 里面有演示，只是那個比較分散，我的這個比較集中。另外加上了客戶端取值的js腳步，可以看看控件的值是啥。比如 color。在pc里面看沒啥意思，在手機里面看看，可能會有驚喜哦。
手頭里只有小米手機，也不知道兼容性如何。大家感興趣的話，歡迎幫忙測試一下，謝謝了。
下面會研究一下屬性，placeholder 就比較實用，不用在折騰了。