文档视界
文档视界 最新最全的文档下载
当前位置：文档视界 › 140701第5章 HTML5网页表单设计(定稿)

140701第5章 HTML5网页表单设计(定稿)

140701第5章 HTML5网页表单设计(定稿)
140701第5章 HTML5网页表单设计(定稿)

网页设计技术实用教程--从基础到前沿

第5章HTML5网页表单设计（字数3万）

参考文献：我chp6；陆chp4；格式类似我P73；

目录

5.1表单简介及应用案例

5.2 表单主体设计---form 标记5.2表单主体设计（form）包括新增元素

5.3表单输入域设计---input标记5.3 表单设计的相关属性包括新增属性

input元素type属性的新增类型：电子邮件类型；搜索类型；URL类型；电话号码类型；数字类型；范围类型；日期类型；周类型；月份类型；时间类型；日期与时间类型；本地日期与时间类型；颜色类型；

新增属性：form属性；formaction；formmethod；placeholder；autofocus；list；autocomplete；

5.4 文本区与列表选择框设计--- textarea、select标记

5.5标签与按钮设计---label、button标记

5.6表单控件分组设计--- fieldset、legend标记

5.7 HTML5表单设计前沿内容知识技术

5.7.1 新增与改进的表单元素；HTML5表单新增与改进的元素

5.7.2 新增与改进的表单属性；HTML5表单新增与改进的属性

5.7.3 input域控件的type属性的新增与改进

5.4 表单设计示例

如果例子多，需要单独成节，可增加该节

例子（见陆p46-59）按功能划分：input元素使用示例；form等属性示例；表单验证示例……

5.8 使用DWCS5进行网页表单设计实例

（薛凯7.3.5；对5.1节的案例用工具制作、设计）

5.9本章小结

5.10进阶学习

5.11 思考与实践

第5章HTML5表单设计

本章导读：上一章我们学习了、了解了……网页中链接的设计。而在网站注册或购物时不可或缺的元素就是表单，本章就引导大家读者学习表单的设计。

首先，通过一个案例的介绍，让大家领略了解表单在网站中的重要魅力作用，同时在读者建立起了对表单有了大概的初步感性认识印象后；接着通过理论与示例结合的方式，、详细具体讲解介绍表单主体及其内部各种标记和属性的知识；同时，紧跟技术的发展，讲述介绍HTML5表单设计前沿内容；如果有该节则加入此句有了在掌握了表单设计的基本知识、技术的理论储备准备之后，我们通过几个综合示例讲解表单设计中各种元素的实用方法，完成理论向实践的转变。工欲善其事，必先利其器，网页设计离不开好的工具支持，最后，指导大家使用网页设计工具DWCS5工具实现一个复杂表单页面的设计，至此从而完成本章的讲解学习之旅。

5.1表单简介

HTML表单在制作动态网站方面起着非常重要的作用，它的功能首先是用来排列各种表单控件的布局。让表单能够以一种友好的界面呈现在浏览器面前。

其次，表单经常在网页中作为和用户进行交互的工具使用。表单在Web网页中用来给访问者填写信息，从而使服务器能获得用户信息，使网页具有交互的功能。一般是将表单设计在一个Html文档中，当用户填写完信息后做提交(submit)操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上的 ASP 、JSP或 CGI 等处理程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。

几乎所有的商务网站都离不开表单，最常见的就是用户的注册表单。图6.1所示的即是eBay易趣网站上的一个用户注册表单。需要更新,再加上一个购物表单，图中用符号标明控件名称或类型。

图6.1 戴尔账户注册表单

图6.1 eBay易趣网站用户注册表单

表单是由许多控件组成的。在上述网页中就用到了文本框、按钮等控件，见图中所示。所谓控件就是一些供用户操作用的组件，用户就是通过这些控件和网站进行交互的。这些控件的使用还与服务器端程序有关，与服务器端程序有关内容还需参看jsp等内容。

表单上的常用控件名称、图例和功能（说明）如表6.1

表6.1中除了Textarea(文本区)、select（列表选择框）外，其他控件都由input 标记实现。下面各节我们将依次讲解各种控件相关的标记，包括其元素和属性的知识。

5.2 表单主体设计---form 标记

< form >标记定义了一个交互式表单。任何一个表单都由该标记开始，它是表单的主标记，它里面可以包含多个其它子标记（如段落、表格、列表和图象等）或控件。控件集中放在表单里面可以保证发送的数据是一块连续的数据。< form >标记常用的属性如表6.2所示。

表6.2 常用的< form >属性定义

【示例6.1】

使用FORM 标记及属性，设计一个给商家发送电子邮件的表单页面，文件命名为E06_01.htm 。网页功能要求如下：

表单被命名为myform ，并采用post 方法提交数据。 当用户单击提交按钮时，执行JavaScript 脚本代码，打开提示对话框。

当用户单击提示对话框的确定按钮后，程序询问是否发送表单数据至商家电子邮箱。

在IE 浏览器中的显示效果如图6.3-图6.5所示

图6.3 打开网页时的显示效果

图6.4 单击提交按钮后的显示效果

图6.5 单击上图确定按钮后的显示效果

本例网页E06_01.htm 文件的源程序代码如下。重点代码阴影表示，注意在DW 下加程序的行号及实用性修改，排版格式最后统一处理

源程序清单：E6_2.htm 】

表单FORM 标记及属性的示例

onsubmit="javascript:alert('hello ：你确认要提交表单吗？你点击了提交按钮')">

表单FORM 标记及属性的示例

请你点击提交按钮，发送表单数据：

技术、设计、代码说明，

知识要点、

代码解释；操作提示【示例解析】（1）代码onsubmit="javascript:alert('hello：你点击了提交按钮')"，指明：当点击“提交”按钮时，需调用的javascript函数-- alert（）函数。用到了事件、行为，javascript 中window对象的这里暂时会用即可，详细见javascript部分指出具体小节。

（2）DW工具操作步骤：插入菜单--- 表单

（3）用区别于正文宋体的楷体及大小，不同字体易于消除阅读疲劳。

5.3表单输入域设计---input标记

input元素type属性的新增类型：电子邮件类型；搜索类型；URL类型；电话号码类型；数字类型；范围类型；日期类型；周类型；月份类型；时间类型；日期与时间类型；本地日期与时间类型；颜色类型；

标记在表单中用于定义输入数据的区域。它可以根据type属性的不同取值生成多种不同的控件。因而，在HTML表单设计中有着最广泛的应用。< input >标记常用的属性如表6.3所示。

【示例 6.2】使用input标记及属性，设计一个网上商城用户注册页面，文件命名为E06_02.htm。网页功能要求如下：

页面内容及包含的控件和布局在IE浏览器中的显示效果如图6.6所示。

password控件允许输入字符的上限为6位，并设置p为其快捷访问键。

当用户单击“提交”按钮时，访问网上商城主页index.htm。

图 6.6网上商城用户注册页面input标记及属性的使用

本例网页E06_02.htm文件的源程序代码如下。重点代码阴影表示，注意加程序的行号及实用性

【源程序清单：E6_3.htm】

input标记及属性的使用

网上商城用户注册页面

请填写您的个人注册信息

tabindex="1">

登录密码：

maxlength="6" value="密码域" accesskey="p">

选择性别：男

女

个人爱好： 体育

文学

娱乐

onclick="this.value='你单击了我'" accesskey="a">

type="image" width="62" height="24" id="fp2">

您的照片：

技术说明，要

点、解释

【示例解析】 （1）本例中“用户名称”标签的 for 属性与其后的text （文本框）的ID 属性值相同，是为了实现2个控件的绑定关联。这样单击该标签也可以使text 获得焦点。关于标签标记

5.4 文本区与列表选择框设计--- textarea 、select 标记

< textarea >标记用来定义了一个可输入多行内容的文本区控件。与text 相比，它可以输入象个人资料、上传的文章等较长的文本。其中的属性rows 和cols ，分别指明文本区的行数和列数（一个英文半角字符为一列），其余属性同input 标记，此处不再列出，此处不再赘述。

< select >标记定义了一个列表选择框，它提供多个选项供用户选择数据，包括2种形式的控件，下拉选择框(当size=1)或列表框(当size >1)。它适合于选项比较多（如50以上）的情况。因为，此时，如果仍使用radio 或checkbox 进行选择，则在页面上的选项就会显得非常多而冗长。与之配合使用的标记有 option （选项）和optgroup （选项分组）。

选项标记< option >定义< select >控件的每个具体选项。其value 属性的值将和< select >标记name 属性的值作为一组数据传输给服务器处理。

选项组标记< optgroup>用来对各个< option >选项按照其功能或性质进行分类编组，

使选项的分类清晰，形成结构良好的树状菜单形式，从而为用户提供更加友好的交互界面。< select >标记部分常用的属性如表6.5所示，其余属性同input标记，此处不再列出。

表6.5 常用的< select >属性定义

< select >标记的部分常用属性

< optgroup >标记的部分常用属性

【示例 6.3】使用

（1）文本区使用了onselect 事件属性，这样当用户在文本区选择文本时就会调用javascript 脚本代码，显示提示对话框。 （2）DW 工具操作步骤：插入菜单--- 表单。

5.5标签与按钮设计---label 、button 标记

< label >标记用来定义标签控件，来为其它控件（如text 、 select 、 textarea 等）提供附加说明信息，说明这些控件的功能或作用。

标签的for 属性用来和其它控件进行绑定或关联，即使得点击了标签就等于点击了该控件。如让标签和其后的text （文本框）绑定或关联，只需要将标签的for 属性与text 的ID 属性值相同即可。标签for 属性的用法，参见【示例6.2】。label 标记的其余属性同input 标记，此处不再列出。 < button >标记定义了一个专门显示按钮的控件。与标记所建立的按钮相比，该标记提供了更加灵活的样式。可以在按钮上设置图片、修改按钮上面文本的字体、颜色设置等。

button 标记的type 属性用来指明按钮控件的类型，包括3种：submit

（提交按钮）、reset （重置按钮）和button （一般按钮），如type="button"

，则表示一般按钮，其余属性同input 标记，此处不再列出。 【示例 6.4】

使用

 

技术说明

5.6表单控件分组设计--- fieldset 、legend 标记

当表单控件比较多，需要按照不同功能进行分组时，就需要使用< fieldset >标记。该标记定义了一个表单控件集合，形成一个用细线包围的表单区域。表单控件分区可以使表单控件的分组条理清晰、方便用户的使用。因而在HTML 表单设计中有着广泛的应用。

与之配合使用的标记有legend （传说、说明），用来说明表单区域的标题，其作用是提

健康信息

身高：

体重：

如下图6.11所示，就是一个应用在IE 浏览器的Internet 选项设置窗口。该窗口中把表单控件分为3个区域，其中“分级审查”、“证书”和“个人信息” 分别是这3个区域的标题。

图6.11 利用标记

进行表单分区

< fieldset >标记的常用属性为全局属性，< legend >标记的常用主要属性如表6.8所示。

【示例6.5】使用

等标记及属性，设计一个客户注册页面，文件命名为E06_02.htm。网页功能要求如下：

页面内容及包含的控件和布局在IE浏览器中的显示效果如图6.10所示。

将表单控件分为2个区域，并通过< legend >标记的align属性将“客户注册资料”设置为居中对齐。

2个区域分别设置A、B为其快捷访问键，用户可通过按“Alt”键和相应的快捷访问键将光标置于对应的表单区域的第一个控件上。

当用户单击“提交”按钮时，访问网上主页index.htm。

图 6.12 包含控件分组的客户注册页面

本例网页E06_02.htm文件的源程序代码如下。重点代码阴影表示，注意加程序的行号及实用性

【源程序清单：E6_8.htm】

控件集标记及属性的使用

请您认真填写下面的注册资料

客户注册资料

必填项目

客户名称（N）：

登录密码（P）：

性    别（

S）：

男

女

月 收 入（M）：

可选项目

下面2项客户可以根据本人的实际情况选择填写，

建议您能够提供详细的资料，以方便我们联系。

个人简历：

上传照片：

5.7 HTML5表单设计前沿知识内容、技术 有些难度的，课堂讲解费时的、或者目前浏览器不支持的，不通用的（是否在实际网站中通用，专门查看网站中的表单页面代码），可作为课外进阶或小资料、选学、给出，让学生课外学习

5.7.1 新增与改进的表单元素；HTML5表单新增与改进的元素[1]

HTML5大幅度吸纳了WEB2.0的标准，新增或改进了表单元素，增强了表单的功能，提高了表单设计的效率和便利性。一些以前需要通过JavaScript 编码实现的功能，现在无需编码就可轻松实现。这些新变化并未得到所有浏览器的普遍支持，而且不同浏览器的显示

[1] 参考资源https://www.docsj.com/doc/3f15727269.html,/html5/html_5_form_elements.asp

部分新增或改进的表单元素如表6.8所示。

演示效果如图所示：

5.7.2

新增与改进的表单属性；HTML5表单新增与改进的属性

参考资源：https://www.docsj.com/doc/3f15727269.html,/js/index.asp 可以加到脚注

https://www.docsj.com/doc/3f15727269.html,/HTML5features/form/20110926_2002.html

HTML5中关于表单设计新增了多种属性，增强了表单的可用性。这些属性也得到了Safari 、Google Chrome 、Firefox 等部分浏览器的支持。部分新增或改进的表单属性如表6.8所示。

HTML网页设计(表单元素)

HTML网页设计（表单元素） 1.什么是表单 表单(form)是由一个或多个文本输入框、可单击的按钮、多选框、下拉菜单和图像按钮等组成，所有这些都放在

标签在。一个文档中可以包含多个表单，而且每个表单可以放置通常的主体内容（包括文字和图像在内） Form标签 设计者可以将表单放在文档主体中的任何位置，但前提是将表单的缘故都放在标签和
结束标签之间。

2.表单元素 在

标签中，可以包含以下5个标签。 Input标签 对于大量通常的表单内元素，可以使用标签来进行定义，其中包括文本字段、多选列表、可单击的图像和提交按钮等。虽然标签中有许多属性，但对每个元素来说，只有type和name属性是必须的。当然，根据指定的比哦啊单元素类型，也可以设置一些其

可以使用标签中的name属性来为字段命名（表单提交到处理过程中使用的字段，这种字段的说明可以参阅前面介绍）。从技术角度上讲，name属性的值是任意的一个字符串，但是我们建议最好采用没有嵌入空格或标点的字符串。标签中必须的type属性可以用来选择控件的类型，其属性值如下表所示。 最有用也是最常见的表单输入元素时文字域，在浏览器窗口中显示为一行的空框，它接收用输入的一行信息，当你用户将表单提交给服务器时，这些信息就变成了元素值。 范例代码：

密码域 将type属性值设置为password，就可以创建一个密码域。传统文本域的其他属性和语义也可以应用于密码域。应用呢密码域时必须制定一个字段的名称，这样就可以为该段字段设置size和maxlength属性，并可以设置一个初见时的vlaue。 范例代码： 文件域（file） 复选框（checked） 单选框（ridio） 普通按钮（button） 设置普通按钮（button）代码： 重置按钮（Reset） Textarea标签 作为表单的一部分，