html5揭秘
先把form一类的代码发上来吧。觉得HTML5的input标签，几乎把之前用过的js验证全部pass了，
input中的文本占位。
常用的数据验证，如email、url、min、max、required等。
数值的选择方便直接的可以用拖动滑块的方式。
| 代码如下 | 复制代码 |
|
<form> <!--HTML5添加了占位文本--> text属性可以有占位文本<input style="width:200px" name="q" placeholder = "Search bookmarks and History" autofocus/><hr/> <!--type="email"的时候，数据验证非常方便--> type=email时方便的数据验证<input style="width:300px" type="email" name="email" placeholder = "Please input your Email Address"/><hr/> <!--这是一个可以通过拖动来设置值的控件--> 滑动选值<input type="range" min="0" max="100" value="1"/><hr/> <!--min、max、value、required等等--> 数据验证<input type="number" min="0" max="10" value="6" required="required"/><hr/> <input type="submit"/><hr/> </form> |
|
例子
| 代码如下 | 复制代码 |
|
<!DOCTYPE html> <head> <meta charset="utf8"/> <script type="text/javascript"> //拖动时 function drag(ev) { //设置一个键值为Text，值为ev.target.id的数据，着时候ev.target.id 是当年元素的id，也就是drag1 ev.dataTransfer.setData("Text",ev.target.id); } function dragover(ev) { //执行过程阻止浏览器对数据或元素默认的动作 ev.preventDefault(); } //元素放下后 function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <form> <!--HTML5添加了占位文本--> text属性可以有占位文本<input style="width:200px" name="q" placeholder = "Search bookmarks and History" autofocus/><hr/> <!--type="email"的时候，数据验证非常方便--> type=email时方便的数据验证<input style="width:300px" type="email" name="email" placeholder = "Please input your Email Address"/><hr/> <!--这是一个可以通过拖动来设置值的控件--> 滑动选值<input type="range" min="0" max="100" value="1"/><hr/> <!--min、max、value、required等等--> 数据验证<input type="number" min="0" max="10" value="6" required="required"/><hr/> <input type="submit"/><hr/> </form> <!--是元素可以拖动 draggable="true" --> <div style="border:1px solid #000;width:100px;height:100px;padding:10px;" ondrop="drop(event)" ondragover="dragover(event)"></div> <div id="drag1" style="width:100px;height:100px;background:yellow;margin:0;" draggable="true" ondragstart = "drag(event)"></div> </body> </html> |
|
时间： 2024-10-11 17:51:57