* 表单新标签
* 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>