HTML5对于表单的增强Demo

HTML5对表单有了极大的增强，不仅加了很多表单属性而且加了许多类型的表单元素，
下面例子就对所有新增的表单属性和表单元素做了一个演示
 
1. !DOCTYPE htML>
2. 
3. head>
4. link rel="stylesheet" href="css/common.css" type="text/css">
5. script type="text/javascript" src="js/validateform.js"> /script>
6. meta charset="UTF-8">
7. tITle> HTML5 表单DEMO/title>
8. /head>
9. 
10. h3> Part1：新增的input 元素的属性/h3> br>
11. 
12. form method="post" action="action1.jsp">
13. 
14. !-- 文本框的placeholder(占位符）属性，这个属性可以用于未输入状态时的文本提示 -->
15. 实验1：demo 文本框的placeholder属性，这个属性可以用于未输入状态时的文本提示 br>
16. 输入textfield:input type="text" placeholder="请输入内容到文本框" />
17. br> br>
18. 
19. !-- autofocus可以让页面打开时，这个控件自动获得焦点 -->
20. 实验2：demo autofocus属性，这个属性可以让某控件自动获得焦点br>
21. 输入搜索文本:input type='seArch' autofocus/>
22. br> br>
23. 
24. !-- list属性可以和datalist配合起来使用，当用获得焦点时候可以让给用户提示，否则让用户自己输入内容 -->
25. 实验3：demo list属性，这个属性可以和datalist配合，当用户获得焦点时候给用户提示br>
26. 输入文本（有提示哦）：input type="text" name="charles" list="charles info" >
27. datalist id="charles info" stype="display:none; ">
28.     option value="charles wang"> charles wang/option>
29.     option value="charles_wang888"> charles_wang888/option>
30.     option value="charles王子"> charles王子/option>
31. /datalist>
32. br> br>
33. 
34. 
35. /form>
36. 
37. hr>
38. h3> Part2：新增的input 元素的类型/h3> br>
39. 
40. form method="post" action="action2.jsp">
41. 
42. !-- url类型表明专门输入url的文本框,必须是协议名+地址，否则提示报错-->
43. 输入url: input name="url1" type="url"  size="60" value="http://www.sina.COM.cn"/>
44. br> br>
45. 
46. !-- email类型表明专门输入邮箱地址 -->
47. !-- 注意，每个元素都可以用pattern，来使用正则表达式来校验输入，比如我这里就给出了邮箱地址的正则表达式 -->
48. 输入邮箱地址:input name="email1" type="email"   size="60"  value="charles_wang888@126.com" pattern="^[/w-]+(/.[/w-]+)*@[/w-]+(/.[/w-]+)+$"/>
49. br> br>
50. 
51. !-- datetime类型可以输入UTC日期和时间,并且进行有效性检查，这个opera支持，Firefox不支持-->
52. 选择大好时间：input name="datetime1" type="datetime" required="true"/>
53. br> br>
54. 
55. !-- number 类型可以输入数字，可以上下箭头选择增减，并且进行校验 -->
56. 输入数字:input name="number1" type="number" value="25" min="10" max="25" step="5"/>
57. br> br>
58. 
59. !-- range类型可以输入一定范围内的数值，具有最小值和最大值 ，可以设定 ，值用滑动条指定-->
60. 选择数值：input name="range1" type="range" value="25"  min="0"  max="100" step="5"/>
61. br> br>
62. 
63. input type="submit"/>
64. 
65. /form>

HTML5对表单有了极大的增强，不仅加了很多表单属性而且加了许多类型的表单元素，
下面例子就对所有新增的表单属性和表单元素做了一个演示
 
1. !DOCTYPE html>
2. 
3. head>
4. link rel="stylesheet" href="css/common.css" type="text/css">
5. script type="text/javascript" src="js/validateform.js"> /script>
6. meta charset="UTF-8">
7. title> HTML5 表单DEMO/title>
8. /head>
9. 
10. h3> Part1：新增的input 元素的属性/h3> br>
11. 
12. form method="post" action="action1.jsp">
13. 
14. !-- 文本框的placeholder(占位符）属性，这个属性可以用于未输入状态时的文本提示 -->
15. 实验1：demo 文本框的placeholder属性，这个属性可以用于未输入状态时的文本提示 br>
16. 输入textfield:input type="text" placeholder="请输入内容到文本框" />
17. br> br>
18. 
19. !-- autofocus可以让页面打开时，这个控件自动获得焦点 -->
20. 实验2：demo autofocus属性，这个属性可以让某控件自动获得焦点br>
21. 输入搜索文本:input type='search' autofocus/>
22. br> br>
23. 
24. !-- list属性可以和datalist配合起来使用，当用获得焦点时候可以让给用户提示，否则让用户自己输入内容 -->
25. 实验3：demo list属性，这个属性可以和datalist配合，当用户获得焦点时候给用户提示br>
26. 输入文本（有提示哦）：input type="text" name="charles" list="charles info" >
27. datalist id="charles info" stype="display:none; ">
28.     option value="charles wang"> charles wang/option>
29.     option value="charles_wang888"> charles_wang888/option>
30.     option value="charles王子"> charles王子/option>
31. /datalist>
32. br> br>
33. 
34. 
35. /form>
36. 
37. hr>
38. h3> Part2：新增的input 元素的类型/h3> br>
39. 
40. form method="post" action="action2.jsp">
41. 
42. !-- url类型表明专门输入url的文本框,必须是协议名+地址，否则提示报错-->
43. 输入url: input name="url1" type="url"  size="60" value="http://www.sina.com.cn"/>
44. br> br>
45. 
46. !-- email类型表明专门输入邮箱地址 -->
47. !-- 注意，每个元素都可以用pattern，来使用正则表达式来校验输入，比如我这里就给出了邮箱地址的正则表达式 -->
48. 输入邮箱地址:input name="email1" type="email"   size="60"  value="charles_wang888@126.com" pattern="^[/w-]+(/.[/w-]+)*@[/w-]+(/.[/w-]+)+$"/>
49. br> br>
50. 
51. !-- datetime类型可以输入UTC日期和时间,并且进行有效性检查，这个Opera支持，Firefox不支持-->
52. 选择大好时间：input name="datetime1" type="datetime" required="true"/>
53. br> br>
54. 
55. !-- number 类型可以输入数字，可以上下箭头选择增减，并且进行校验 -->
56. 输入数字:input name="number1" type="number" value="25" min="10" max="25" step="5"/>
57. br> br>
58. 
59. !-- range类型可以输入一定范围内的数值，具有最小值和最大值 ，可以设定 ，值用滑动条指定-->
60. 选择数值：input name="range1" type="range" value="25"  min="0"  max="100" step="5"/>
61. br> br>
62. 
63. input type="submit"/>
64. 
65. /form>

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！