H5系列之新input

虽说H5 新填了几个很方便的input 类型,但是吧,想法是美好的,但是现实很残酷,兼容性不太好。基本只有google浏览器能用。但是既然出了,那么就要了解他,知道有这么一个东西就好。

 

input类型:

  color      

  date

  datetime

  datetime-local

  email

  month

  number

  range

  time

  url

  week

 

color    兼容情况(支持:google,opera)

允许用户从取色器中选一个颜色    

 

<input type="color">

H5系列之新input_第1张图片

 

  

date  兼容情况(支持:google,opera,safari)

允许用户从一个日期选择器中选取一个日期

<input type="date">

H5系列之新input_第2张图片

 

datatime  兼容情况(支持:safari)  w3school 里面显示 opera浏览器兼容,但是实测,不行。

由于没有mac系统,就实验不了了- -

 

datetime-local  兼容情况(支持:google,opera,safari)

允许用户选择日期和时间

H5系列之新input_第3张图片

 

 

email  兼容情况(支持:ie,google,opera,firefox)

在提交表单的时候,会验证用户输入的 email格式是否有效

H5系列之新input_第4张图片

 

month  兼容情况(支持:google,opera,safari)

允许用户选择一个年份和月份没有日期

H5系列之新input_第5张图片

 

number  兼容情况(支持:ie,google,opera,safari)

设置文本框只能输入数字,其他字母不允许。

 

<input type="number" min="1" max="10">

 

允许添加限定:

disabled 规定输入字段是禁用的
max 规定允许的最大值
maxlength 规定输入字段的最大字符长度
min 规定允许的最小值
pattern 规定用于验证输入字段的模式
readonly 规定输入字段的值无法修改
required 规定输入字段的值是必需的
size 规定输入字段中的可见字符数
step 规定输入字段的合法数字间隔
value

规定输入字段的默认值

 

 

 

 

 

 

 

 

H5系列之新input_第6张图片

 

range  兼容情况(支持:ie,google,opera,safari)

这个类型就比较好玩了,会出现一条滑动条

也有一些允许添加的限定:

 

  • max - 规定允许的最大值
  • min - 规定允许的最小值
  • step - 规定合法的数字间隔
  • value - 规定默认值

 

time  兼容情况(支持:google,opera,safari)

允许用户输入或定义时间。

<input type="time">

H5系列之新input_第7张图片

 

url  兼容情况(支持:ie,google,opera,)

在提交表单的时候,会验证用户输入的 url格式是否有效

<input type="url">

H5系列之新input_第8张图片

 

week  兼容情况(支持:google,opera,safari)

允许用户选择年份,第几周

 

<input type="week">

 

H5系列之新input_第9张图片

 

你可能感兴趣的:(H5系列之新input)