HTML5中表单与文件一些学习笔记

时间：2013-12-05 编辑：简简单单来源：一聚教程网

Web应用程序的过程中，表单是页面上非常重要的一块内容，用户可以输入的大

部分内容都是在表单的元素中完成的，它与后台的交互在大多数情况下也是通过点击表单中

的按钮来完成的。在HTML 5 中，大大加强了有关于表单这一部分的功能。本章将详细介绍在HTML 5 中新增的表单元素、属性，以及对表单元素内容的有效性进行验证的功能，同时也会介绍在HTML 5的页面上，除了表单元素之外、其他的新增与改良的元素，最后会介绍在HTML 5中新增的与表单元素相关的两个API-文件API和拖放API.

学习内容：

掌握HTML 5中新增的表单中元素可以使用的属性及它们的使用方法。

掌握HTML 5 中新增的表单元素及它们的使用方法。

掌握HTML 5中新增的关于表单内元素内容的有效性的验证方法，包括属性验证、显式验证、取消验证，以及自定义验证信息。

掌握HTML5 中除了表单以外，在页面上新增及改良的元素，以及它们的使用方曲。

掌握文件API包括掌握File对象与FileList对象的使用方法，掌握Blob对象的概念和

使用方法，掌握FileReader对象以及它的方怯、事件定义、事件触发条件，以及事件

发生的先后顺序。

掌握怎样利用拖放API使页面中的元素可以互相拖放，掌握DataTransfer对象的属性和

方法，掌握怎样设定拖放时的视觉效果，以及怎样自定义拖放图标。

-新增元素与属性

form、formaction、formmethod、placeholder（处于未输入状态时文本框显示的输入提示）、autofocus（自动获取光标焦点）、
list（该属性的值为某个datalist元素的id),类似选择框。
text：

代码如下	复制代码

autocomplete（On、Off、“”三个值）
-增加Input元素的种类

search、tel、url、email、datetime、date、month、week、time、datetime-local、number、range、color、file。

- 表单验证

required、pattern（pattern=“^w.*$”）、min、max、step（元素值增加或减少的步幅）

取消验证的方法：1、form元素的novalidate属性为true。2、input元素的formnovalidate属性

-增强的页面元素

figure：网页上一块独立的内容，figcaption表示figure的标题

details:局部区域进行展开或收缩，通过点击summary元素的内容来控制

mark：高亮显示内容

progress：代表一个任务的完成进度

meter：规定范围内的数量值（max、min、low下限、high上限、optimum最佳值

下面我们一起来看一些实例

一.新增属性

1.form元素可以把表单内的从属元素书写在页面上的任何地方。

代码如下

复制代码

2.formaction属性，可以使不同的按钮，将表单提交到不同的页面

代码如下

复制代码

注：目前还没有浏览器支持这一属性

3.formmethod

代码如下

复制代码

4.placeholder属性是指当文本框（input type=”text” ）处于未输入状态时文本框中显示的输入提示。当文本框处于未输入状态并且未获取光标焦点时，模糊显示输入提示文字。

代码如下	复制代码

5.autofocus属性，让控件自动获取光标焦点

代码如下	复制代码

6.datalist该元素类似于select，但当用户想要设定的值不在选择列表之内时，允许其自行输入。

代码如下	复制代码

7.pattern属性，用来匹配某个元素的正则表达式，require表示空白时不能提交

代码如下

复制代码

二.自定义错误类型

代码如下

复制代码

2.figure元素用来表示网页上一块独立的内容，将其从网页上移除后不会对网页上的其他内容产生任何影响

代码如下

复制代码

figcaption元素表示figure元素的标题，它从属于figure元素，必须书写在figure元素内部。

3.details元素提供了一种替代javascript的，将画面上局部区域进行展开或收缩的方法，不过现在还没有任何浏览器对它提供支持。

代码如下

复制代码

精武风云

陈真当年为报杀师之仇，独闯虹口道场....

4.progress表示一个任务的完成度.

代码如下

复制代码

progress元素的使用示例

完成百分比:0%

var progressBar=document.getElementById("p");
             function button_onclick()
             {
                 var progressBar=document.getElementById('p');
                 progressBar.getElementsByTagName('span')[0].textContent="0";
                 for(var i=0;i<=100;i++)
                 updateProgress(i);
             }
             function updateProgress (newValue) {
                 var progressBar=document.getElementById('p');
                 progressBar.value=newValue;
                 progressBar.getElementsByTagName('span')[0].textContent=newValue;

                             }

3.改良的ol列表.

start属性用来自定义编号的初始值 reversed用来对列表进行反序

代码如下	复制代码
姓名性别年龄

4.cite元素表示作品的标题

代码如下

复制代码

我最喜欢的电影是由甄子丹主演的精武风云

上一个： HTML5 新增元素与属性用法介绍
下一个： wordpress实现文章和评论日期显示几分钟之前几小时之前

推荐专题

最新下载

热门教程

HTML5中表单与文件一些学习笔记

progress元素的使用示例

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程