H5系列之新input

2022-06-09 15:36:14 字數 2738 閱讀 6496

雖說h5 新填了幾個很方便的input 型別,但是吧,想法是美好的,但是現實很殘酷,相容性不太好。基本只有google瀏覽器能用。但是既然出了,那麼就要了解他,知道有這麼乙個東西就好。

input型別:

color

date

datetime

datetime-local

email

month

number

range

time

urlweek

color    相容情況(支援:google,opera)

允許使用者從取色器中選乙個顏色    

date相容情況(支援:google,opera,safari)

允許使用者從乙個日期選擇器中選取乙個日期

datatime相容情況(支援:safari)  w3school 裡面顯示 opera瀏覽器相容,但是實測,不行。

由於沒有mac系統,就實驗不了了- -

datetime-local相容情況(支援:google,opera,safari)

允許使用者選擇日期和時間

email相容情況(支援:ie,google,opera,firefox)

在提交表單的時候,會驗證使用者輸入的 email格式是否有效

month  相容情況(支援:google,opera,safari

)允許使用者選擇乙個年份和月份沒有日期

number相容情況(支援:ie,google,opera,safari

)設定文字框只能輸入數字,其他字母不允許。

<

input

type

="number"

min="1"

max="10"

>

允許新增限定:

disabled

規定輸入欄位是禁用的

max規定允許的最大值

maxlength

規定輸入欄位的最大字元長度

min規定允許的最小值

pattern

規定用於驗證輸入欄位的模式

readonly

規定輸入欄位的值無法修改

required

規定輸入欄位的值是必需的

size

規定輸入欄位中的可見字元數

step

規定輸入欄位的合法數字間隔

value

規定輸入欄位的預設值

range相容情況(支援:ie,google,opera,safari

)這個型別就比較好玩了,會出現一條滑動條

也有一些允許新增的限定:

time  相容情況(支援:google,opera,

safari)

允許使用者輸入或定義時間。

url  相容情況(支援:ie,google,opera,

)在提交表單的時候,會驗證使用者輸入的 url格式是否有效

week  相容情況(支援:google,opera,safari)

允許使用者選擇年份,第幾周

h5 新的 input 型別

input 型別 color color 型別用在input欄位主要用於選取顏色,從拾色器中選擇乙個顏色如下所示 input 型別 date date 型別允許你從乙個日期選擇器選擇乙個日期。input 型別 datetime datetime 型別允許你選擇乙個日期。input 型別 dateti...

H5 標籤屬性 input屬性

高亮文字 全部商品只要6.18 結果 加拼音文字 變bian 結果 軟換行,只試用於英文 zhe li shi ce shi wen zi,zhishiyongyuyingwen zhishiyongyuyingweninput輸入框 文字 text name username value 賬號 密...

H5常用新特性

注意 這些新特性都有相容性的問題,基本是ie9 以上版本的瀏覽器才支援,如果不考相容性問題,可以大量使用這些新特性 html5新增的語義話標籤 html新增的多 標籤 屬性值描述 autoplay autoplay controls controls width pixels height pxlo...