saber酱的抱枕

Fly me to the moon

06/28
17:22
学习

html5中input的一些新特性

刚才看《JavaScript高级程序设计》,读到input控件的部分,看到了html5中对input增加了一些新的功能,试验了一番,这些实在让人excited!下面发点测试图。

1.新的type类型。

input有些type我们是很熟悉的,例如text、password等。html5中增加了一些新的type类型,而且这些type类型基本都可以承担一部分表单验证的工作,很实用。这些新的type有:
"email"、"url"、"number"、"range"、"datetime"、"datetime-local"、"date"、"month"、"week"、"time"。

举一些例子:

email类型,必须要有@符号:
html5中input的一些新特性

url类型,必须要有协议:
html5中input的一些新特性

number类型,只能输入数字:
html5中input的一些新特性

date类型,只能输入日期:
html5中input的一些新特性

range类型,会出现一个滑块以调节:
html5中input的一些新特性

需要注意的是,浏览器(如果支持的话)会对这些控件的值进行检查。有些类型是在输入的时候进行检查,有些则是在提交表单时进行检查。所以,如果input没写在form里,有些类型可能起不到限制作用。

2.新的属性。

如required属性,当表单提交时,这个控件的内容不能为空。
html5中input的一些新特性

对于数值类型的控件,还可以设置最小值、最大值、增量值等,如:

<input type="number" min="60" max="100" step="5">

3.新的方法。

主要是stepUp()和stepDown()方法。这两个方法分别使input控件的值增加或减少。不带参数默认为1,也可以带参数。如对range的调节:

html5中input的一些新特性

html5中input的一些新特性