HTML5初探 新增的表單元素和屬性

2021-06-22 09:34:26 字數 1765 閱讀 4927

html5初探——新增的表單元素和屬性

html5 新元素--表單元素

placeholder 屬性:

一般用在文字框上

其主要作用是當文字框處於未輸入狀態並且內容為空時給文字框的提示內容

效果:當文字框獲取焦點時,提示資訊自動清空,失去焦點且未輸入內容時,提示資訊又自動出現

省去傳統的文字框需要借助 onfocel 和 onblur 事件才能實現的效果

(相容大部分的pc瀏覽器和mobile瀏覽器,只能說科技確實進步了)

示例:

autofocus 屬性:

指定控制項自動獲取焦點,需要注意的是乙個html頁面上只能有乙個控制項具有改屬性

示例:

list 和 datalist 元素:

list 元素的主要作用是提示文字框輸入,提示的資料來源則由 datalist 提供

目前 list 和 datalist 元素只有 opera 瀏覽器支援,甚至沒有任何一款移動瀏覽器支援該特性

示例:我是datalist1

我是datalist2

我是datalist3

我是datalist4

search 型別文字框:

該文字框和普通文字框唯一區別,在 safari 和 chrome 瀏覽器下,文字框的外觀為圓角

示例:

email 型別文字框:

是乙個可以指定電子郵件內容的文字框,通常用在輸入e-mail位址的輸入文字框上

這種文字框和普通文字框在外觀上幾乎一樣,但實際上在safari移動版瀏覽器下是有區別的

其鍵盤會根據文字框型別不同而顯示相對應的鍵盤

示例:

number 型別文字框:

是一種用於輸入數字的文字框型別

它可以配合 min、max、及step屬性使用

示例:

range 型別文字框:

是一種數值範圍輸入文字框型別,提供的是一種滑動輸入方式

需要配合 min、max、range等屬性的使用

示例:

tel 型別文字框:

是一種供使用者輸入**號碼的文字框型別

這種文字框在移動版瀏覽器下,其鍵盤會根據文字框型別不同而顯示相對應的鍵盤

示例:

url 型別文字框:

是一種供使用者輸入url位址的文字框型別

這種文字框在移動版瀏覽器下,其鍵盤會根據文字框型別不同而顯示相對應的鍵盤

示例:

在html5規範中,除了新增表單元素外,還有日期、時間型別的 input元素

但這些型別都沒有得到廣泛的支援

具體如下:

日期和時間(含時區):

日期和時間(不含時區):

時間選擇器文字框:

日期選擇器文字框:

年的周號選擇器文字框:

月份選擇器文字框:

html5 新元素--表單元素

HTML5新增的表單元素

html5新增的表單元素 progress進度條 max 進度元素所要求的任務的工作量,預設值為1 value 已經完成的工作量,如果max值為1,該值必須是介於0 1之間的小數 例如 output使用者動作產生的結果 name 定義元素的名稱 for 其他元素的id列表,表明這些元素為計算提供了輸...

HTML5新增表單元素和表單屬性

safari和ie9以下不支援,規定了輸入域的選項內容 與input元素配合使用,定義input輸入域的選項內容。ie完全不支援 作用 提供一種驗證使用者的可靠方法 用於表單的金鑰對生成器字段,當提交表單時,會生成兩個鍵,乙個是私鑰,乙個公鑰。私鑰 private key 儲存於客戶端,公鑰 pub...

HTML5中新增的表單元素

相容性 input type iefirefox opera chrome safari email no4.0 9.010.0 no urlno4.0 9.010.0 no number nono9.0 7.0no search no4.0 11.0 10.0 no color nono11.0 ...