1. 程式人生 > >web前端學習技術之對HTML5 智慧表單的理解

web前端學習技術之對HTML5 智慧表單的理解

Html5新增input的form屬性,用於指向特定form表單的id,實現input無需放在form標籤之中,即可通過表單進行提交。

<FORM id=xinzeng>

</FORM>

<INPUT … form="xinzeng">

type新增屬性:

email、URL、date、time、month、week、number、range、color

input元素的新增屬性:

Autocomplete:自動完成功能.記錄使用者之前輸入的內容,並在下次輸入時自動提示完成輸入。

>>> 屬性值: on/off

>>> 可以在form表單上使用,對整張表單的所有控制元件進行自動完成的開關

也可以在input上使用,對特定輸入框進行修改。

>>> 絕大部分瀏覽器,預設開啟。

Autofocus:自動獲得焦點. autofocus="autofocus",只能設定input元素自動獲得焦點。

Form:所屬表單。通過form表單的id,確定此input輸入哪張表單。

Required:必填.required="required" 設定input必填,否則阻止提交。

Pattern:使用正則表示式驗證input的模式.

數字型別

跟數字強相關的型別,其中number、range在移動端開發時,會彈出數字鍵盤,而range是一個範圍滑動塊。

<input type='number'> <!--用於比較精確的純數字輸入型別-->

<input type='range'> <!--用於不是很精確的數字範圍-->

<input type='tel'> <!--用於電話號碼-->

日期和時間型別

web表單常見的欄位就是日期和時間,html5以此來收集這類資訊

<input type='time'>

<input type='date'>

<input type='month'>

<input type='week'>

<input type='datetime'>

<input type='datetime-local'>

其他型別 :email、url、color、search

其中一些型別在不同的裝置上都會有不同的顯示。

<input type='email'>

<input type='url'>

<input type='color'>

<input type='search'>

placeholder 佔位符文字,以前我們用js來模擬,獲得焦點的時候,文字消失,失去焦點並且內容為空時,文字重現,現在html5自帶了這一項功能。

html結構:

<input id='search' type='text' placeholder='search your goods'>

如果想要修改placeholder中的文字樣式,那麼我們只要給瀏覽器設定一些樣式即可,css結構:

::-webkit-input-placeholder{

color:red;

font-size:14px;

}

::-moz-placeholder{

color:red;

font-size:14px;

}

autofocus 自動聚焦 ,autofocus屬性可以讓表單在載入完成時,會有一個表單域被預設聚焦或者選中,但是儘量不要在一個頁面上在多個表單域上使用autofocus,在一些低版本瀏覽器上會預設聚焦最後一個含有autofocus的表單域,在大多數瀏覽器中會聚焦第一個含有autofocus的表單域,這會造成跨瀏覽器的混亂。還有我們通常用空格鍵來滾動頁面,如果頁面上有autofocus的表單域會阻止這一瀏覽器的預設行為。

autocomplete 自動完成,很多瀏覽器預設提供自動完成功能,幫助使用者輸入上次提交過的內容,autocomplete有兩個必備的條件才能夠工作,一是一定要有form元素,二個是表單域上必須要有name屬性和name屬性值。但是,有些時候我們為了保護隱私,需要避免自動完成這項功能,我們開啟和關閉這項功能,只需給它賦值on或者off ,如果不賦值,預設就是on,表示功能開啟。