Html5 學習系列(三)增強型表單標籤

2022-02-17 19:37:11 字數 3015 閱讀 3306

在之前的html表單標籤中,對於一些功能支援的不夠好,比如:文字框提示資訊(之前只能通過js和input的事件結合處理)、表單校驗、日期選擇控制項、顏色選擇控制項、範圍控制項、進度條、標籤跨表單等功能。當然這些東西我們都可以直接通過js和dom元素配合實現這些通用的功能。這些功能或者是標籤都已經大量的使用在了現代的web應用中,而這些公共性的東西在早期的html標準沒有直接的標準支援,而在html5中,新標準直接把這些常用的基本的功能直接加入的新的表單標籤中,真正把表單功能異常的強大,那就跟我走一下html5智慧型表單之旅吧!

由於最新版本的opera瀏覽器對新型表單支援的最為完美,所以建議本blog或者以下示例請在opera瀏覽器上開啟.

新的標準中新增了很多輸入型控制項,比如:number、url、email、range、color等。而他們都是以 input標籤的type屬性出場,那下面我一一簡單介紹一下。[以下所有的例子請用opera瀏覽器瀏覽]

1)只能輸入數字的number型別input標籤

html**為:

執行效果:

:此標籤其實就是普通的input標籤,只不過是type型別指向了number,標識當前標籤接受數字型別輸入.另外新增了四個屬性.

name:屬性大家很熟悉了用來標識表單提交時的key值

min:是表單標籤新增加的屬性標識當前輸入框輸入的最小值

max:那就是最大值了

step:是步長的意思,也就是在點選增大或者減小的時候的增加減少的步長

小結:min,max,step是表單標籤中新增的新的屬性。另外就是type又增加了乙個新的number型別,接受數字輸入。而之前我們要做到這樣的效果只能通過js在失去焦點時候判斷,控制起來不那麼方便,現在一切都那麼簡單簡潔。 

2)新型email型別input標籤

html**:

執行效果:

:在上面html**中,相對於之前的標籤,不同點:type="email"表示當前input標籤接受乙個郵箱的輸入。另外就是:placeholder="請輸入註冊郵箱"   這個屬性的功能,相信你看到此時的效果的時候你會感到非常想興奮,而在之前實現此提示資訊,需要監聽一下文字框的blur事件,然後判斷是否為空,為空再去給文字框賦值乙個灰色的字型提示資訊,而現在只需要乙個簡單屬性指定就可以了,瀏覽器都幫我們實現了。

小結:當表單在提交前,此文字框會自動校驗是否符合郵箱的正規表示式,另外placeholder屬性帶來的提示資訊功能太強大了。

3)新型url型別input標籤

這裡不再贅述了,跟email型別input標籤類似。只看一效果吧:

執行效果:

4)新型tel型別input標籤

html**:

執行效果:

5)新型range型別input標籤

html**:

執行效果:

此型別標籤的加入,輸入範圍內的資料變得非常簡單容易,而且非常標準,使用者輸入可感知體驗非常好。另外此標籤可以跟表單新增加的output標籤一塊使用,達到乙個聯動的效果。看demo原始碼:

執行效果:6)新的日期、時間、月份、星期input標籤html**:

執行效果:

還有其他的type:month(月)  、time、week、datetime-local、datetime。那趕緊實驗一下吧。

7)顏色選擇input標籤

顏色選擇器實現起來還是有點困難的,而現在一切都變得那麼簡單。且看**:

html**:

執行效果:

8)input標籤自動完成功能

執行結果:

input標籤新增加的特有屬性

demo:此屬性可以設定當前頁面中input標籤載入完畢後獲得焦點。

這跟使用jq validate的時候一樣的爽。而且還新增了:pattern正規表示式的校驗。

demo:input type="text" autofocus="autofocus" required pattern="\d+" />

form表單標籤新增加屬性

demo:<formaction=""method="post"novalidate="true">

只能表單演示:請用最新opera 瀏覽器表單外的input標籤:

執行結果:

實際運**況:

只能表單演示:請用最新opera 瀏覽器表單外的input標籤:

在新版本的表單中的確新增了很多令人興奮的功能。其實進步不是特別大,只不過是把之前的常用的功能,加入到了標準中來定義,然後瀏覽器幫我們實現了很多我們原先需要自己用js實現的一些功能罷了。但是對於開發者來說,這的確是很不錯的一件事情。

Html5 學習系列(三)增強型表單標籤

在之前的html表單標籤中,對於一些功能支援的不夠好,比如 文字框提示資訊 之前只能通過js和input的事件結合處理 表單校驗 日期選擇控制項 顏色選擇控制項 範圍控制項 進度條 標籤跨表單等功能。當然這些東西我們都可以直接通過js和dom元素配合實現這些通用的功能。這些功能或者是標籤都已經大量的...

HTML5 新特性之一 增強型表單

目錄 1 新的 input type input type 2 新的表單元素 3 表單元素的新屬性 h4 text,password,checkbox,radio,submit,reset,button,file,image,hidden h5 email,url,number,tel,search...

HTML5 表單學習

表單仍然使用 required表示必須要填 value命名 type date 設定min,max特性,將輸入框的值限定在了最大和最小之間 type time type month type datetime type datetime local type number value為預設值,ste...