您好,登錄后才能下訂單哦!
表單一直是網頁必不可少的一部分,一直以來,表單的作用被無限擴展,發展出了諸多新奇的用法,老版的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),這并不影響網頁的其他內容,而且還會帶來語義化的代碼,易讀易懂,隨著瀏覽器的發展進步,對表單的支持肯定會越來越好,我們還有設么好擔心的呢,放心的用吧。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。