工具HBuilder技术HTML5CSS3 在HTML5中，新增了很多的属性，如video、canvas等。其中，input输入框的属性type也增加了几个。下面利用实例说明：

操作说明：

1、type属性常用的有button，表示按钮

button

2、input的type属性还可以使用checkbox，表示复选框

checkbox

3、HTML5中新增属性type="color"，设置颜色选择器

color

4、保存代码并打开浏览器，可以颜色选择器的效果

颜色选择器

5、type属性值设置为date，表示日期选择器

date

6、日期选择器效果，显示年月日

日期选择器效果

7、type属性值为datetime-local，当地时间

datetime-local

8、时间选择器，默认显示年月日时分

时间选择器

9、如果要控制输入框输入电子邮件，type属性设置为email

email

10、文件上传功能，可以使用type=file

file

11、文件上传效果

文件上传效果

12、type属性设置为image，显示图片

image

13、image图片显示效果

image图片显示效果

14、如果在传值过程中，想要控件不显示，但是存储值，可以使用hidden

hidden

15、type属性值为number

number

16、如果要使输入的文字设置为密码格式，可以使用password

password

17、设置input为单选按钮，可以设置为radio

radio

18、包含一定范围内数字值的输入域，可以使用range

range

19、对应用户登录功能，有个重置功能，可以使用reset

reset

20、类似浏览器搜索框一样，input的type属性设置为search，表示搜索框

search

21、表单提交时，常用submit提交

submit

22、如果想要输入框输入电话，并进行验证，可以设置为tel

tel

23、input最常用的功能是输入框，type值为text

text

24、如果想要输入框变为时间选择器，type属性设置为time

time

25、input控件的type属性还可以输入地址，type值为url

url

26、如果想要输入框可以选择周，type属性值设置为week

week

27、week显示周的效果

HTML5+CSS3+JavaScript从入门到精通（标准版） web前端开发网页设计丛书 月销量500好评率99%无理由退换 配送¥89.6购买