当前位置:Gxlcms > html代码 > HTML5form标签之解放表单验证、增加文件上传、集成拖放的使用方法_html5教程技巧

HTML5form标签之解放表单验证、增加文件上传、集成拖放的使用方法_html5教程技巧

时间:2021-07-01 10:21:17 帮助过:11人阅读

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类型,类型未知则返回空字符串。

来来,简单做一实验:

代码如下:

关于File




输出来看看:

真的是应有尽有啊!有了该属性就可以做很多事情了,但是。。。我们来看看ie7、8:

各位观众,人家压根没这个属性,所以一切百搭。。。

话说,我觉得ie浏览器调试起来很痛苦,请问各位大神有没有什么好的ie开发插件,就像ff的firebug,google自带的插件??

FIleReader接口

filereader接口,可将文件读入内存,有了这个东东我们就可以很舒服的做图片预览了,但他的公用不止如此。

filereader的四个方法:

readAsBinaryString 将文件读取为二进制码——通常我们将数据传给后端;

readAsText 将文件读取为文本——读取文本内容;

readAsURL 将文件读取为DataURL——一般是小文件,图片或者html;

abort 中断读取,因为文件过大等待时间就很长了

filereader接口事件:

onabort 读取中断触发;

onerror 读取失败触发;

onloadstart 开始读取时触发;

onprogress 读取中

onload 读取成功时触发;

onloadend 读取完成后触发,无论成功失败;

光说不练不行,我们这里做个小实验:

代码如下:

我是一个小实验