[html5] 学习笔记-改良的input元素种类

在html5中,大幅度增加与改良了input元素的种类,可以简单的使用这些元素来实现之前需要JS脚本来实现的功能。

1、url类型、email类型、date类型、time类型、datetime类型、datatime-local类型、month类型、week类型、number类型、range类型、search类型、Tel类型、color类型

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5     <title>g改良的input元素</title>
 6 </head>
 7 <body>
 8     <form>
 9     <!--url-->
10     <input name="url" type="url" value="http://jikexueyuan.com"></input>
11     <input type="submit" value="提交"></input>
12     <br>
13     <!--email-->
14     <input name="email" type="email" value="[email protected]"></input>
15     <input type="submit" value="提交"></input>
16     </form>
17     <br>
18     <!--date-->
19     <input name="date" type="date" value=""></input>
20     <!--time-->
21     <br>
22     <input name="time" type="time" value="10:00"></input>
23     <!--datetime-->
24     <br>
25     <input name="datetime" type="datetime" value=""></input>
26     <!--datetime-local-->
27     <br>
28     <input name="datetime-local" type="datetime-local" value=""></input>
29     <!--month-->
30     <br>
31     <input name="month" type="month" value="2010-01-01"></input>
32     <!--week-->
33     <br>
34     <input name="week" type="week"></input>
35     <!--number-->
36     <br>
37     <input name="number" type="number" value="15" min="10" max="100" step="5"></input>
38     <!--简单的计算器-->
39     <br>
40     <script>
41         function sum(){
42             var n1=document.getElementById("num1").valueAsNumber;
43             var n2=document.getElementById("num2").valueAsNumber;
44             document.getElementById("result").valueAsNumber = n1 + n2;
45         }
46     </script>
47     <form>
48         <input type="number" id="num1"></input>
49         +
50         <input type="number" id="num2"></input>
51         =
52         <input type="number" id="result" readonly></input>
53         <input type="button" value="计算" onclick="sum()"></input>
54     </form>
55     <!--range滑动条-->
56     <br>
57     <input name="range" type="range" value="25" min="0" max="100" step="5"></input>
58     <!--serachs用于搜索域,比如站点搜索或google搜索-->
59     <input type="search"></input>
60     <!--tel-->
61     <br>
62     <input type="tel"></input>
63     <!--color-->
64     <br>
65     <input type="color" onchange="document.body.style.backgroundColor = document.getElementById("currentColor").textContent = this.value;"></input>
66         <span id="currentColor"></span>
67     
68     <!--output-->
69     <script>
70         function value_change(){
71             var number = document.getElementById("range").value;
72             document.getElementById("output").value=number;
73         }
74     </script>
75     <form id="testform">
76         <input id="range" type="range" min="0" max"100" step="5" value="25" onchange="value_change()"></input>
77         <output id="output">25</output>
78     </form>
79 </body>
80 </html>

2、表单验证

 1 <body>
 2     <script>
 3         function check(){
 4             var email = document.getElementById("email");
 5             if (email.value=="") {
 6                 alert("请输入email");
 7                 return false;
 8             }else if(!email.checkValidity()){
 9                 alert("请输入正确的email地址");
10                 return false;
11             }
12         }
13     </script>
14     <form id="testform" onsubmit="check()" novalidate="true">
15         <label for="email">email</label>
16         <input name="email" type="email" id="email"></input>
17         <br>
18         <input type="submit"></input>
19     </form>
20 </body>

 

你可能感兴趣的:([html5] 学习笔记-改良的input元素种类)