HTML5入门教程之HTML5学习笔记
来源:网络 作者:佚名 点击:
次时间:2017-07-06 20:56
[摘要] 三年前就听说HTML5和Flex会有一战，现在看来好像HTML5略占上风？既然决定要回归计算机，甚至要做前端，所以买了两本HTML5相关的书回来。这几天把图灵的《html5揭秘》给看了个大概
|
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>
|
|
------分隔线----------------------------
