HTML5學習筆記（二）——表單1

表單一直是網頁必不可少的一部分，一直以來，表單的作用被無限擴展，發展出了諸多新奇的用法，老版的HTML只支持很少的一部分常用表單，許多的新表單都需要借助CSS與JavaScript語言來進行構建，現在HTML5來了，她帶來了新的表單，這些強大的表單項，可以省去一大塊復雜的JavaScript代碼，很值得去學習。

而且在新的表單里面，不再像以前每個表單都必須位于<form></form>之內，只要在<form></form>內定義一個id，然后在網頁任何位置都可以插入表單，只要將該表單通過form屬性指向這個已定義的id即可，即完成相關聯，極大地提高了表單的任意度，值得一贊。就像如下的例子：

<formid=iform>
<inputtype=”text” name=”我在form內部” />
</form>
<inputtype=”text” name=”我在form外部” form=”foo” />

        HTML5中新增了不少的新表單項：

        Email類型

<inputtype=”email” name=”my_email” />

        Email表單用于在文本框中輸入email格式的內容，如果輸入內容為非標準email格式，會提示錯誤，讓你重新輸入。

        Url類型

<inputtype=”url” name=”my_url” />

        url表單用于在文本框中輸入網址內容，瀏覽器會自動為網址添加http://，所以只需輸入其后面的內容即可，如果輸入內容不符合網址格式，則會提示錯誤，重新輸入。

        Number類型

<inputtype=”number” name=”my_number” min=”1” max=”10” step=”2” />

        Number類型表單用于用戶輸入規定的數值，如上所述，限定在文本框內輸入從1到10中按2為跨越的數值（1、3、5、7、9），如果輸入其他數值則會提示錯誤，要求重新輸入。其實number類型還有一個屬性value，用于顯示默認值。

        Range類型

<inputtype=”range” name=”my_range” min=”0” max=”10” step=”2” value=”6” />

        Range表單顯示出一個進度條式的數值選擇條，通過滑動選擇自己的數值，同樣如上所示，限定用戶滑動選擇從0到10里以2為跨步的數值，這不會存在錯誤的情況。

        Data類型

<inputtype=”data” name=”my_data” />
<inputtype=”month” name=”my_month” />
<inputtype=”week” name=”my_week” />
<inputtype=”time” name=”my_time” />
<inputtype=”datatime” name=”my_datatime” />
<inputtype=”datatime_local” name=”my_datatime_local” />

         Data類型的表單包含如上所示一組的表單項，均表示的是時間，相對應的如果在文本框內輸入超出范圍的時間則會出錯，現在支持的瀏覽器很少。

        Search類型

<inouttype=”search” />

        Search表單顯示為普通的文本域，同text表單一樣，采用search表單語義化明確，通常用于網頁頂部的搜索框。

        Color類型

<inouttype=”color” />

        Color表單可以在網頁中提供顏色選擇框，用戶可以選擇一種顏色，這個顏色值將會賦予value。

        這里我們還要提一點，就是有關HTML5的兼容性，為什么提這個東西呢，當然是因為這里用得到，雖然現在主流的瀏覽器對新表單的支持良莠不齊，有的甚至都不支持，但這并不能阻止我們使用它們，這就是因為HTML5的兼容性，因為瀏覽器對不支持的表單項并不會報錯，而是將其顯示為正常的文本框（text），這并不影響網頁的其他內容，而且還會帶來語義化的代碼，易讀易懂，隨著瀏覽器的發展進步，對表單的支持肯定會越來越好，我們還有設么好擔心的呢，放心的用吧。