模块二 HTML基础 HTML5表单新增属性.pdfVIP

网页设计与Web应用开发基础

课程名称可修改课程名称可修改

课程名称可修改

模块二HTML基础

COURSECOURSETITLETITLE

COURSETITLE

HTML5表单新增属性

NAMENAME白会肖可修改可修改

1.表单应用在什么场合？

2.常用的表单标签有哪些？

1.表单新增属性

知识2.表单新增input元素类型

目标3.提交按钮新增取消检验属性

1.会使用表单新增属性制作网页

技能2.会使用表单新增input元素类型制作网页

目标3.会使用提交按钮新增取消检验属性

1.学习过程中形成乐于探究的意识和敢于创新

素质的精神。

目标2.养成主动与他人交流合作的精神。

•HTML5表单在HTML4表单的基础上，新增了许多属性以及input

元素类型，这些新增属性及元素类型实现了以前需要由

JavaScript才能实现的一些功能，如非空校验、数值类型校验、

聚焦、显示提示信息等功能，极大的增强了HTML5表单的功能。

•HTML5表单主要新增了以下一些属性：

–form属性

–formaction属性

–autofocus属性

–pattern属性

–placeholder属性

–required属性

•作用

form属性可以定义表单元素和某个表单之间的隶属关系，

使用了form属性后，表单的元素可以放在

form/form标签对之外的任何地方。

•基本语法

formid=form1

…

/form

inputtype=textform=form1/

•语法解释

在表单外的元素，通过设置元素的form属性值等于表

单的id值，即可建立了表单元素和表单的隶属关系。

•作用

formaction属性可以实现在一个表单中包含多个提交

按钮，每个提交按钮都可以通过formaction属性将请

求提交给不同的服务端程序处理。

•基本语法

inputtype=submitformaction=服务端处理程序/

•语法解释

所有提交按钮都可以使用formaction属性。属于提交按钮的元素包括：input

type=submit、inputtype=image和buttontype=submit。

•作用

autofocus属性可以使textarea和input表单元素

自动获得焦点。

•基本语法

inputtype=textautofocus/

textarearows=...cols=...autofocus.../textarea

•语法解释

一个页面中最多只能有一个表单元素设置autofocus属性，否则该功能将失效

，建议对第一个input元素设置autofocus属性。

•作用

pattern属性是input元素的验证属性，该属性的值是

一个正则表达式，通过这个表达式可以验证输入内容的

有效性。

•基本语法

inputtype=textpattern=正则表达式title=错误提示信息/

•语法解释

根据具体校验要求，设置对应的正则表达式。Title属性

不是必需要的，但为了提高用户体验，建议设置这个属性。

•作用

placeholder属性主要用于在文本框或文本域中提供

输入提示信息，以增加用户界面的友好性。

•基本语法

inputtype=textplaceholder=提示信息

textarearows=…cols=…placeholder=提示信息

•语法解释

placeholder的属性值即“提示信息”将自动显示在对应

的元素中。在IE11中，当元素获得焦点时，提示信息消失；

当元素失去焦点时，提示信息又会自动显示。

•作用

requried属性用于验证某个表单元素的内容是否为空。

•基本语法

inp