HTML5学习笔记五:html5表单

时间:2022-04-21 15:10:58

  表单是页面上非常重要的一块内容,用户可输入的大部分内容都是在表单元素中完成的,与后台的交互大多数也是通过点击表单中的按钮。

一、新增的元素和属性

  1.新增属性:

    1.1 form属性:页面中的任何元素指定form属性,属性值为相应表单的id,该元素就属于指定表单了;只有Opera 10支持。

    1.2 placeholder属性:文本框处于未输入状态且未获取光标焦点时,模糊显示输入提示文字;Safari 4,chrome3,firefox4

    1.3 autofocus属性:打开页面时,有该属性的控件自动获得光标焦点;Safari 4,chrome3,firefox4

  2. 改良input元素种类:

    2.1 url类型:<input name="url1" type="url" value="http://www.micosoft.com">

    2.2 email类型: 只验证格式,并不检查email地址是否存在,提交时可以为空,除非加上了required属性;

    2.3 data类型:data类型的input元素以日历的形式方便用户输入;只有Opera 10支持

    还有很多类型不一一列举,大多数浏览器还不支持

 二、 表单验证

    2.1 自动验证:通过对元素使用属性的方法,可完成自动验证。例如:

    1)required属性:可应用在大多数输入元素上(除了隐藏元素、图片元素按钮上)

    2)pattern属性:对input元素使用pattern属性,属性值为正则表达式,

      <input pattern="[0-9][A-Z]{3}" name="part" palceholder="输入内容:一个数字和三个大写字母。">

    3) min属性和max属性:为数值类型或日期类型的input元素专属,现在范围

    4)step属性:控制input元素中的值增加或者减少的步幅

   2.2 显示验证:form元素和input元素(包括select和textare)都具有一个checkValidity方法,可以显示的对表单内元素进行验证;以boolean形式返回验证效果,利用js可操作

  2.3 取消验证:有时候需要将表单临时提交下,但不想让表单中所有元素内容进行有效性验证(因为没有填完)。有两种方法取消表单验证

    1)利用input或submit元素的novalidate属性,可以关闭整个表单验证,该属性值为Boolean值

    2)利用input或submit元素的formnovalidate属性,利用input元素的该属性,=可以让表单验证对整个input元素失效;对submit按钮使用该属性,整个表单验证失效

三、 增强的页面元素

    3.1 figure元素和figcaption元素:figure一种元素的组合,带有可选标题,表示网页上一块独立内容,内容可以是图片、统计图、代码示例;figcaption表示figure的标题,可以在figure内其他从属元素的前面或者后面,仅允许一个figcaption。

    3.2 details元素:提供了一种替代JS的,将画面上局部区域进行展开或收缩的方法;目前无浏览器支持;

    3.3 meter元素:规定范围内的数量值。如:磁盘使用量,投票数占总投票人数的比例等。它有六个属性:

     value:元素中特地表示出来的实际值,默认值为0;min,max,low下限,high上限,optimum最佳值

四、文件API

  通过这个API,对于从Web页面*问本地文件系统的相关处理变得十分简单;

  4.1 filelist对象与file对象:html5中file控件通过添加mulitiple属性,file控件内允许一次放置多个文件,filelist对象表示用户选择的文件列表;

  4.2 Blob对象:表示二进制原始数据,提供一个slice方法,通过该方法访问到字节内部的原始数据块。blod对象有两个属性,size属性表示一个Blob对象的字节长度,type属性表示Blob的MIME类型,如果是未知类型,则返回一个空字符串。

   4.3 FileReader接口:主要用来把文件读入内存,并且读取文件中的数据。提供一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中数据

    1)该接口有四个方法,其中3个用以读取文件(readAsBinaryString,readAsText,readAsDataUrl),另一个用来将读取过程中断(abort)

     2)FileReader接口的事件:用于捕获读取文件时的状态。onabort:中断时触发,onerror:出错时触发,onloadstart:开始时,onprogress:读取中,onload:读取完成时;onloadend:完成时,无论成功或失败

五、拖放API  

  H5中支持浏览器与其他应用程序之间的数据互相拖动,简化拖放方面的代码

  1. 实现拖放的步骤:(1)将想要拖放的对象元素的draggable属性设置为true;另外,img和a 元素默认允许拖放;(2)编写与拖放有关的事件处理代码

  现在支持拖放的MIME的类型有:text/plain:文本文字;text/html:HTML文字;text/xml:XML文字;text/uri-list:URL列表,每个URL为一列。

  2. DataTransfer对象:该对象的属性和方法使用的好,可以实现定制拖放图标,只支持特定拖放(copy/移动)

                      HTML5学习笔记五:html5表单

  3. 设定拖放时的视觉效果:effectAllowed属性表示被拖动时允许的视觉效果,值none /copy /copyMove /link /linkmove /move /all /unintialize,一般在ondragstart事件中

              dropEffect属性表示实际拖放时的视觉效果,值none /copy /link /move,一般在ondragover事件中。后者必须在前者所表示的允许的视觉效果范围内

  4. 自定义拖放图标:DataTransfer对象有一个setDragImage方法,它有三个参数(img,拖放图标离鼠标指针的x轴方向的偏移量,y)