您的位置：首页 > Web前端 > HTML5

【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放

2013-04-16 23:04 615 查看

【初探HTML5之使用新标签布局】用html5布局我的博客页！

【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放

【HTML5初探之绘制图像（上）】看我canvas元素引领下一代web页面

【HTML5初探之绘制图像（下）】看我canvas元素引领下一代web页面

【HTML5初探之多媒体元素】视频播放HTML5、Flash谁才是王道？

【HTML5初探之本地存储】如果没有数据库。。。

【HTML5初探之离线应用】如何打造零请求、无流量的网站？

【HTML5初探之通信API】跨域门槛不再高、数据推送不是梦

【HTML5初探之Web Workers】网页也能多线程

【HTML5初探之Geolocation API】让我们来回去地理信息

HTML中与form有关的东东

新增属性	个人理解
form	html5之前，表单内的从属元素需要放入标签中，现在可以为标签指定form标签即可点评：该功能解决了我们实际中遇到的一些问题，比如iframe模拟异步图片上传时，就必须将图片写到form外。
formaction formmethod	该属性用于按钮（submit）让表单提交页面可又按钮控制 formmethod指定各按钮提交方式
placehoder	该属性非常有用，用于文本框中显示提示信息，非常有用的一属性
list	list属性需要与datalist一同使用，相当于文本框，模拟select，非常适用的一个属性
autofocus	用于文本框主动获取焦点，有用的东东
新增input属性，解放验证，各浏览器支持不好
tel	用于电话
url	验证url
email	验证邮箱
date/time	日期类验证，会出现日期选择插件哦。。。
number	只能是数字
range	控制数字范围
color	颜色选择器，好东西啊。。。

HTML5中增加了很多与form有关的属性，说实在的，这些东西真心贴心啊！！！很大程度上讲：

完全解放表单验证

若不是考虑兼容性问题，老夫恨不得立即投入其中，但一旦想起兼容性问题的话，你就会非常头疼！！！

因为原本很好的东西，却是因为历史的原因，反而会增加我们的工作量！！！

在错的时间，做对的事情，他看起来是对的，实际上也是对的。。。但你会发现，他错了。。。。

增强页面元素

项目	个人理解
figure/figcaption	据说表示页面独立内容，移除后无影响，暂无发现用处..
details	该标签有点意思，用于替代js中，元素收起展开功能。最新ff都不支持……个人觉得，既然提供了该标签应该提供属性表示上下展开或者左右展开；
mark	高亮显示，当真语义化
progress	屌丝们，可以告别gif图片了，也不用div模拟百分比了，与windows区域一致的进度条出现啦，异步文件上传更加完善！
改良ol	老夫就没有用过这个主。。。
……

以上元素属于可有可无的元素，不必赘述，接下来，本文明星对象登场：

文件API

FileList与file对象：

在html4中，file标签只允许选择一个文件，但html5中，对file标签设置multiple属性后，变可以选择多文件了！！！

而，选择后便会形成这里的filelist对象，即一个个file组成的对象列表，简单来说就是file数组。

file对象具有2属性，name代表文件名（不包括路径），lastModifiedDate表示最后修改时间

其实我们在html4中操作file时，可以获取本地很多属性，比如文件大小，但是万恶的ie不支持，到ie9后才有所好转。

所以想客户端提示文件上传过大的同学放弃吧。。。

Blob对象

表示二进制原始数据，提供一slice方法访问字节内部原始数据；size表示blob对象字节长度、type表示其mime类型，类型未知则返回空字符串。

来来，简单做一实验：

拖放的例子

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

</head>
<body>
<div id="dragme" draggable="true" style=" width: 200px; border: 1px solid gray;">请拖放</div>
<div id="text" style=" width: 200px; height: 200px; border: 1px solid gray;"></div>
<script type="text/javascript">
document.ondragover = function (e) {
e.preventDefault();
};
document.ondrop = function (e) {
e.preventDefault();
};

var source = document.getElementById('dragme');
var dest = document.getElementById('text');
source.addEventListener('dragstart', function (e) {
var dt = e.dataTransfer;
dt.setData('text/plain', '您好' + new Date());
}, false);

dest.addEventListener('dragend', function (e) {
e.preventDefault();
}, false);

dest.addEventListener('drop', function (e) {
var dt = e.dataTransfer;
var text = dt.getData('text/plain');
dest.innerHTML += text;
e.stopPropagation();
e.preventDefault();
return false;
}, false);

</script>
</body>
</html>

拖放时候一定要记住，阻止页面默认行为，否则会打开新窗口的，其中以下亦是重点：

1 拖放可使用DataTransfer传递数据，该对象是非常有用的，因为在拖动目标元素时，可能会经过其它元素，我们可以用此传递信息；

API：

dragstart 被拖放元素开始拖放时

drag 被拖放元素拖放过程中

dragenter 拖放过程中鼠标经过的元素被拖放元素开始进入本元素时

dragover 拖放过程中鼠标经过的元素本元素内移动

drageleave 拖放过程中鼠标经过的元素离开本元素

drop 拖放的目标元素拖动的元素放到了本元素中

dragend 拖放的对象拖放结束

其实这里是有问题的，我并未去深入研究从开始拖动到经过各种元素会产生神马情况，这个可以作为二次学习时的重点研究对象。

结语

html5的文件和表单做的比较精致，个人感觉比布局新增的几个标签有用多了，明天开始学习canvas，虽然不懂，虽然见过，但是还是感觉很厉害的样子！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航