HTML5新增屬性

2021-09-02 08:25:37 字數 1287 閱讀 7969

html5的input標籤新增了很多屬性,也是讓大家非常興奮的一件事,用簡單的乙個屬性搞定以前複雜的js驗證。input新增的這些屬性,使得html和js的分工更明確了,使用起來十分舒暢。

[size=medium]新增屬性一:[/size]autoconmplete

autoconmplete可以賦值為 on 或者 off。當為 on的時候,瀏覽器能自動儲存使用者輸入的內容。當使用者返回到曾經填寫過值的頁面的時候,瀏覽器能把使用者寫過的值自動填寫在相應的input框裡。

現在很多**都實現了這個功能,不過基本都是用php來實現的。用了這個屬性,無疑可以減少很多前端和後台的交流量和工作量。

[size=medium]新增屬性二:[/size]autofocus

autofocus 可以賦值為 autofocus,也就是在頁面載入完成的時候自動聚焦到這個input標籤,自然 type="hidden"的時候是不能用的。 這個也是乙個比較常見的效果,至今為止的實現方法是用js。在頁面載入完時執行聚焦操作,現在也被乙個屬性搞定了。

可以想象,乙個頁面至多只有乙個input標籤會設定 autofocus,否則必然不會達到預期效果。因為不可能同事聚焦在兩個input上。

[size=medium]新增屬性三:[/size]required

input的有乙個強力新增屬性,免去驗證的麻煩。可以賦值為 required。

比如使用者註冊頁面的使用者名稱和密碼都是必填的,只要設定乙個required就可以了。而在以前是需要js來驗證或者後台驗證的。

注意:這裡required屬性是需要使用者來填寫的,所以type是button、submit、reset、image等等不需要使用者填寫選擇的型別是不可以使用這個屬性的。

[size=medium]新增屬性四:[/size]placeholder

這個新增屬性也是非常使用,用在type= text email等等型別的時候,提示使用者輸入資訊的格式或者內容等等。這個效果在之前也是需要js來實現的。

[size=medium]新增屬性五:[/size]新增list屬性---聯想框效果

注意從這個屬性使用的特點:需要有對應的datalist標籤;datalist子標籤option支援 value和lable兩個屬性;list的屬性值要和datalist的id一致。

[size=medium]新增屬性六:[/size] min、max屬性來限制數值範圍,minheight、maxheight屬性來限制字串長度。

其他新增屬性: height、width設定高和寬 form、formaction、formmethod、fromtarget、formenctype等等屬性來覆蓋掉預設設定。

HTML5新增的屬性列表

序號 屬性型別 新增屬性 屬性說明與表 單的相關 屬性對 type text 與 指定autofocus屬性 以指定屬性的方式讓元素在頁面開啟時自動獲取焦點 對 type text 與 指定placeholder屬性 對使用者輸入進行提示,提示使用者可以輸入的內容 對與指定 form屬性 宣告屬於哪...

HTML5新增屬性詳細講解

新增的input type屬性值 1.email,使用方法 輸入郵箱格式 2.tel,使用方法 輸入手機號碼格式 3.urll,使用方法 輸入url格式 4.numberl,使用方法 輸入數字格式 5.search,使用方法 搜尋框 體現語義化 6。range,使用方法 自由拖動滑塊 7.time,...

HTML5新增屬性學習筆記

1 form屬性 表單內的從屬元素,可以寫在表單外部。可以通過指定元素的form屬性來宣告元素所屬表單。form的屬性值為表單的id。1 form id testform 2 input type text 3form 4 textarea form testform textarea 詳細學習內容...