html5 表单增强,HTML5对于表单的增强Demo

HTML5对表单有了极大的增强，不仅加了很多表单属性而且加了许多类型的表单元素，

下面例子就对所有新增的表单属性和表单元素做了一个演示

1. 

2.

3. 

4. 

5. 

6. 

7. 

HTML5 表单DEMO

8. 

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浏览器的截图

摘自 平行线的凝聚