HTML5对表单有了极大的增强,不仅加了很多表单属性而且加了许多类型的表单元素,
下面例子就对所有新增的表单属性和表单元素做了一个演示
1.
2.
3.
4.
5.
6.
7.
HTML5 表单DEMO8.
9.
10.
Part1:新增的input 元素的属性
11.
12.
13.
14.
15. 实验1:demo 文本框的placeholder属性,这个属性可以用于未输入状态时的文本提示
16. 输入textfield:
17.
18.
19.
20. 实验2:demo autofocus属性,这个属性可以让某控件自动获得焦点
21. 输入搜索文本:
22.
23.
24.
25. 实验3:demo list属性,这个属性可以和datalist配合,当用户获得焦点时候给用户提示
26. 输入文本(有提示哦):
27.
28. charles wang
29. charles_wang888
30. charles王子
31.
32.
33.
34.
35.
36.
37.
38.
Part2:新增的input 元素的类型
39.
40.
41.
42.
43. 输入url:
44.
45.
46.
47.
48. 输入邮箱地址:
49.
50.
51.
52. 选择大好时间:
53.
54.
55.
56. 输入数字:
57.
58.
59.
60. 选择数值:
61.
62.
63.
64.
65.
最后效果图是:
部分控件比如控件在Firefox 11上不支持,所以我的截图是用的Opera 11浏览器的截图
摘自 平行线的凝聚