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 就比較實用，不用在折騰了。