HTML5初步 新的表單元素和屬性

2021-09-07 00:15:53 字數 1865 閱讀 2692

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表單元素

新的表單元素 1.datalist元素 規定輸入域的選項列表,datalist屬性規定form或input域應該擁有的自動完成的功能。當使用者在自動完成域中開始輸出時,瀏覽器應該在域中顯示填寫的選項。2.keygen提供一種驗證使用者的可靠方法。用於表單的金鑰對生成器字段。當提交表單時,會生成兩個鍵...

HTML 5 表單元素

html5 的新的表單元素 html5 擁有若干涉及表單的元素和屬性。本章介紹以下新的表單元素 datalist 元素 datalist 元素規定輸入域的選項列表。列表是通過 datalist 內的 option 元素建立的。如需把 datalist 繫結到輸入域,請用輸入域的 list 屬性引用 ...

HTML5表單元素

表單驗證觸發oninvalid事件 通過setcustomvalidity方法設定修改內容 action method get type text name uname pattern d required class uname type submit name form var input do...