HTML5表单新元素

* 表单新标签
     * datalist元素
       * 用法
         //定义用于显示的数据内容
     <datalist id="datalist">
        <option></option>
     </datalist>
     //将上面定义的数据进行显示
     <input type="text" list="datalist">
       * 作用 - HTML结构与数据的分离
     * progress元素
       * 属性
         * value - 当前值
     * max - 最大值(进度完成的值)
       * 动态效果
     * meter元素
       * 属性
         * value - 当前值
     * max - 最大值(进度完成的值)
     * min - 最小值
     * low - 最小预警值
     * high - 最大预警值
     * output元素(了解)

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>表单新元素</title>
 6     <link rel="stylesheet" href="css/normalize.css"/>
 7     <script src="js/html5shiv.js"></script>
 8 </head>
 9 <body>
10     <fieldset>
11         <legend>表单新元素</legend>
12         <!--
13             TODO 浏览器兼容问题
14             TODO * HTML5新标签的兼容问题如何解决
15             TODO   * 在当前的HTML页面中引入html5shiv.js文件
16             TODO * HTML5新标签不同浏览器的样式不同
17             TODO   * 在当前的HTML页面中引入normalize.css文件
18          -->
19         <form action="#">
20             <select>
21                 <option>Chrome</option>
22                 <option>Firefox</option>
23                 <option>Safari</option>
24             </select>
25             <br/>
26             <!--
27                 TODO datalist元素
28                 TODO * 特点 - 类似于<select>元素
29                 TODO * 注意 - datalist元素本身不显示
30             -->
31             <datalist id="mylist">
32                 <option>Chrome</option>
33                 <option>Firefox</option>
34                 <option>Safari</option>
35             </datalist>
36             <!--
37                 TODO HTML的结构+数据分离
38                 TODO * 结构 - 下面的input标签
39                 TODO * 数据 - 上面的datalist标签
40             -->
41             <input type="text" list="mylist"/>
42             <br/>
43             <!--
44                 TODO 进度条
45                 TODO * 属性
46                 TODO   * max - 最大值
47                 TODO   * value - 当前值
48                 TODO 问题
49                 TODO * 不同浏览器样式不同
50                 TODO * 如何实现动态加载过程
51             -->
52             正在上传:<progress id="progress" value="0" max="100"></progress>
53             <br/>
54             <!--
55                 TODO 刻度
56                 TODO * 属性
57                 TODO   * min - 最小值
58                 TODO   * max - 最大值
59                 TODO   * value - 当前值
60                 TODO   * low - 最小预警值
61                 TODO   * high - 最大预警值
62             -->
63             <meter min="0" max="10" value="8" low="3" high="7"></meter>
64 
65             <br/><br/>
66             <input type="submit"/>
67         </form>
68     </fieldset>
69     <!--
70        TODO 输出元素(了解)
71        TODO * 输入框 - <input>
72        TODO * 输出元素 - <output>
73     -->
74     <!-- oninput事件用于监听表单元素输入 -->
75     <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
76         <input type="range" id="a" value="50"/>
77         +
78         <input type="number" id="b" value="50"/>
79         =
80         <output name="x"></output>
81     </form>
82     <script>
83         var progress = document.getElementById("progress");
84         var t = setInterval(function(){
85             //TODO 获取当前值
86             var value = progress.value;
87             //TODO 判断当前值是否为 max
88             if(value >= progress.max){
89                 clearInterval(t);
90             }
91             //TODO 值累加
92             value++;
93             //TODO 将累加的值重新赋值给value属性
94             progress.value = value;
95         },100);
96     </script>
97 </body>
98 </html>
表单新标签

 

posted @ 2016-11-07 14:36  六把刀  阅读(399)  评论(0)  编辑  收藏  举报