www.qjdy.com-奇迹赌场 > www.qjdy.com官网 > 下面例子就对所有新增的表单属性和表单元素做

原标题:下面例子就对所有新增的表单属性和表单元素做

浏览次数:193 时间:2019-08-15

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. 输入text田野(field):<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=";
44. <br><br>
45. 
46. <!-- email类型申明特意输入邮箱地址 -->
47. <!-- 注意,每一个成分都足以用pattern,来利用正则表明式来校验输入,举例自身这里就提交了邮箱地址的正则表明式 -->
48. 输入邮箱地址:<input name="email1" type="email"   size="60"  value="[email protected]" 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>

  

摘自 平行线的密集

上边例子就对持有新增添的表单属性和表单成分做了贰个...

本文由www.qjdy.com-奇迹赌场发布于www.qjdy.com官网,转载请注明出处:下面例子就对所有新增的表单属性和表单元素做

关键词: GPI电子

上一篇:qrcode其实是通过计算

下一篇:没有了