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

標籤：網頁   表單   html5   

表單一直是網頁必不可少的一部分，一直以來，表單的作用被無限擴充，發展出了諸多新奇的用法，老版的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），這並不影響網頁的其他內容，而且還會帶來語義化的代碼，易讀易懂，隨著瀏覽器的發展進步，對錶單的支援肯定會越來越好，我們還有設麼好擔心的呢，放心的用吧。

本文出自 “貓頭鷹” 部落格，請務必保留此出處http://9096185.blog.51cto.com/9086185/1431395