學習HTML5之表單

 

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