本篇教程探讨了HTML5学习笔记（5）：html5表单，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

<

　表单是页面上非常重要的一块内容，用户可输入的大部分内容都是在表单元素中完成的，与后台的交互大多数也是通过点击表单中的按钮。
一、新增的元素和属性
　　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="//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/移动）
　　　　     　　　　　　　　　　　　　
　　3. 设定拖放时的视觉效果：effectAllowed属性表示被拖动时允许的视觉效果，值none /copy /copyMove /link /linkmove /move /all /unintialize，一般在ondragstart事件中
　　　　　　　　　　　　　　dropEffect属性表示实际拖放时的视觉效果，值none /copy /link /move，一般在ondragover事件中。后者必须在前者所表示的允许的视觉效果范围内
　　4. 自定义拖放图标：DataTransfer对象有一个setDragImage方法，它有三个参数（img，拖放图标离鼠标指针的x轴方向的偏移量，y）
   

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！