项目六 利用表单获取用户反馈

1、项目六 利用表单获取用户反馈,任务一 设计表单,【知识目标】 1了解表单的概念。 2熟悉表单对象的属性设置。 3掌握表单和表单对象的创建方法。,任务一 设计表单,【技能目标】 1能灵活使用表单对象进行不同表单的设计。 2能综合使用网页对象进行表单设计。,任务一 设计表单,【项目描述】 在网页制作中，表单为浏览用户与服务器之间架起“沟通”的桥梁，用户与服务器的之间的交流是交互的。一方面通过表单，可以获取用户的反馈信息；另一方面，服务器接收到这些信息后，调用脚本或应用程序对这些信息进行处理，并反馈给用户。用户可以使用文本域、密码域、复选框等表单对象输入个人信息，通过提交按钮实现信息的发送。Drea

2、mweaver是以整个表单为单位进行信息的发送，所以在插入表单对象前，要先在网页中插入空白的表单，然后在其内部插入表单对象，保证信息的整体发送。,6.1 设计表单 6.1.1 项目准备 1表单 表单对象是在表单的基础上存在的，因此要添加表单对象，首先应该创建表单。 常用的创建表单的方法有以下两种： （1）选择菜单【插入记录】/【表单】/【表单】，将在文档中插入一个表单，如图6-2所示。 （2）单击插入面板【表单】类别中的表单按钮 。 图6-2 插入的空白表单,说明：因为表单是不可见元素，所以在创建表单域之前应选择【查看】/【可视化助理】/【不可见元素】命令，显示不可见元素。如果仍不能显示表单的

3、红色边框，可以选择【编辑】/【首选参数】，在【首选参数】对话框的【不可见元素】分类中，复选【表单范围】。单击表单，在属性检查器显示如图6-3所示的表单属性。 图6-3 表单属性检查器,.,表单属性的参数含义如下： 表单名称：用于输入表单的名称，在同一文档中表单名称必须惟一。 动作：用于设置路径或单击文件夹图标导航到相应的页面或脚本，以指定将处理表单数据的页面或脚本。 方法：用于选择需要设置表单数据发送的方法，包含以下3个选项： 【默认】通常为GET方法；GET用于将表单数据附加到请求该页面的 URL 中。但是不要使用 GET 方法发送长表单。因为URL 的长度限制在 8192 个字符以内，如果

4、发送的数据量太大，数据将会被截断，从而会导致意外的或失败的处理结果。 【POST】用于在 HTTP 请求中嵌入表单数据。,表单属性的参数含义如下： 目标：用于指定一个窗口来显示被调用程序返回的数据。 包含4个选项：有_blank、_parent、_top和_self。 MIME类型：用于指定对提交给服务器进行处理的数据使用MIME编码类型，包含以下2个选项：选择application/x-www-form-urlencoded选择，通常与POST协同使用；选择multipart/form-data选项，通常用于创建文件上传域。 类：用于指定可在表单中使用的CSS模式。,2文本域 在网页中，常见

5、的文本域有以下3种类型： （1）单行文本域：用于输入单行信息。通常可以输入单字或短语，如姓名或地址。 （2）多行文本域：用于输入多行信息。可以设置输入文本的宽度和行数。 （3）密码域：用于输入密码信息。当用户输入密码时，所输入的文本被替换为星号或项目符号，以隐藏该文本，保护密码信息。 在这3种文本域中输入文本的显示方式如6-4所示。,常用的插入文本域的方法有以下两种： （1）选择菜单【插入记录】/【表单】/【文本字段】，弹出如图6-5所示的【输入标签辅助功能属性】对话框。 （2）单击插入面板【表单】类别中的【文本字段】按钮 。,图6-5 【输入标签辅助功能属性】对话框,【输入标签辅助功能属性】

6、对话框各参数含义如下： ID：为表单域指定 ID。这个值可用于从 JavaScript 中引用域 标签文字：用于输入表单对象的名称。如姓名： 使用“for”属性附加标签标签：使用 for 属性在表单项两侧添加 Label 标签。如RadioButton, 无标签标记：不使用 Label 标签。如男 位置：用于为标签选择相对于表单对象的位置，包括在表单项前和在表单项后两个选项。 访问键：用于使用等效的键盘键以在浏览器中选择表单对象。例如，如果输入 B 作为访问键，则用户可以通过键入Alt+B 以选择该表单对象。 Tab键索引：用于输入一个数字为表单对象指定 Tab 顺序。如果为一个对象设置 Ta

7、b 顺序，则必须为所有对象设置 Tab 顺序。,刚插入的文本域是单行文本域。如果要使用多行文本域或密码域，可以通过设置文本域的属性来达到目的。选择插入的文本域后，属性检查器中会显示其相应的属性，如图6-6所示。 图6-6 【文本域】属性检查器,【文本域】属性检查器各参数的含义如下： 字符宽度：用于设置文本域中允许显示的字符数目。 最多字符数：用于设置文本域中允许输入的最多字符数。如果未设置该值，则用户可以输入任意多的字符。如果文本超过域的字符宽度，文本将滚动显示。如果输入的字符超过最大字符数，则表单发出警告声。 类型：用于选择文本类型，包含单行、多行和密码域。 初始值：用于设置在首次载入表单时

8、域默认状态下的显示文本。, 换行：用于指定多行文本的换行方式，包含4个选项：选择【默认】选项，则使用默认的自动换行方式；选择【关】选项，当文本域中的文本超出文本域的宽度时，则会自动为文本域添加水平滚动条来浏览文本；选择【虚拟】选项，当文本域中的文本超出文本的宽度时，会自动按照文本域的宽度进行换行，这种换行是虚拟行为，在实际发送的数据中，文本中没有换行符号；选择【实体】选项，则当文本域中的文本超出文本域的宽度时，会自动按照文本域的宽度进行换行，这种换行是物理行为，在实际发送的数据中，文本中相应的位置被添加换行符号。 类：用于指定用于该表单的CSS样式。,3单选框 单选框是预定义选择对象的表单对象

9、，在单选按钮组内只能选择一个选项。 常用的插入单选框的方法有以下两种： （1）选择菜单【插入记录】/【表单】/【单选按钮】。 （2）单击插入面板【表单】类别中的【单选按钮】 。 使用以上方法即可在设计界面插入一个单选按钮 ，选中该单选按钮，在属性检查器上会显示相应的属性选项。如图6-7所示。,【单选按钮】属性各参数的含义如下： 单选按钮：用于设置单选按钮名称。如果希望多个选项为互斥的选项，则它们必须使用一个名称。此名称不能包含空格或特殊字符。 选定值：用于设置单选按钮选中后控件的值，该值能够被服务器接收。 初始状态：用于确定在浏览器中载入表单时，该单选按钮是否被选中。包括【已勾选】和【未选中】

10、两种状态。 动态：用于使服务器可以动态确定单选按钮的初始状态。,4复选框 复选框也是预定义选择对象的表单对象，用户只需单击选择即可。利用这种表单对象，可以限制用户填写的内容，使收集的信息更加规范，有得于信息的统计。 常用的插入复选框的方法有以下两种： （1）选择菜单【插入记录】/【表单】/【复选框】。 （2）单击插入面板【表单】类别中的【复选按钮】 。,使用以上方法即可在设计界面插入一个复选框 ， 选中该复选按钮，在属性检查器上会显示相应的属性 选项。如图6-8所示。 复选框属性参数的含义同单选框。 图6-8 【复选按钮】属性检查器,5列表/菜单域 使用列表和菜可以在有限的设计空间内为用户提供

11、多个选项。列表所占空间比较大，可以一次显示多个选项；而菜单一次只能显示一个选项，通过其下拉菜单展示其他选项。如图6-9所示，左侧为菜单，右侧为列表。 图6-9 菜单和列表示例,常用的插入列表/菜单的方法有以下两种： （1）选择菜单【插入记录】/【表单】/【列表/菜单】。 （2）单击插入面板【表单】类别中的【列表/菜单】 。 图6-10显示了列表/菜单的属性检查器。 图6-10 【列表/菜单】属性检查器,【列表/菜单】属性各参数的含义如下： 列表/菜单：用于设置菜单或列表的名称。该名称必须是唯一的。 类型 ：用于设置该菜单是单击时下拉的菜单，还是显示一个列有项目的可滚动列表。如果用户希望表单在浏

12、览器中显示时仅有一个选项可见，则选择【菜单】选项。若要显示其它选项，用户必须单击向下箭头。选择【列表】选项可以在浏览器显示表单时列出一些或所有选项，以便用户可以选择多个项。 高度：用于设置菜单中显示的项数，仅对【列表】类型有效。, 选定范围：用于指定用户是否可以从列表中选择多个选项，仅对【列表】类型有效。 类：用于使用户可以将 CSS 规则应用于对象。 初始化时选定：用于设置列表中默认选定的菜单项。单击列表中的一个或多个菜单项。 列表值 ：用于打开向表单菜单添加项目的对话框，如图6-11所示。 使用 可以在列表中添加项目，使用 能够删除列表项；通过项目标签和值能够添加菜单项目和可选值；使用 按

13、钮可以重新排列列表中的项目。,图6-11 【列表值】对话框,6按钮 按钮是表单非常重要的一个对象，用于控制表单的操作。当用户完成表单的填写后，可以单击表单按钮将数据提交服务器处理或重置。也可以将其他已经在脚本中定义的处理任务分配给按钮。按钮可分为标准表单按钮和图片式表单按钮。 （1）标准表单按钮 常用的插入按钮的方法有以下两种： 1）选择菜单【插入记录】/【表单】/【按钮】。 2）单击插入面板【表单】类别中的【按钮】 。,插入按钮的表单如图6-12所示。要设置表单按钮的属性，可在文件中选中按钮，即可显示【按钮】属性检查器。如图6-13所示。 图6-12 插入表单按钮 图6-13 【按钮】属性检

14、查器,【按钮】属性检查器各参数含义如下： 按钮名称：用于设置按钮的名称。 值：用于设置需要显示在按钮上的文本。 动作：用于选择按钮的行为，即按钮的类型，包括3个选项：选择【提交表单】单选按钮，该按钮会把包含该按钮的表单内容发送到表单中参数ACTION指定的地址；选择【重设表单】单按钮，能够使表单恢复刚载入时的状态，以便重新填写表单；选择【无】单选按钮，则不对当前按钮设置行为，但是可用JavaScript等脚本语言指定动作。,综合以上几个表单对象可以创建一个简单的站内搜索及信息订阅表单，如图6-14和6-15所示。 图6-14 站内搜索设计 图6-15 信息订阅,（2）图片式表单按钮 为了美化网

15、页，可以使用图像域作为按钮，生成的图像按钮是提交按钮。若使用图像来执行任务而不是提交数据，则需要将某种行为附加到表单对象。 常用的插入图像域的方法有以下两种： 1）选择菜单【插入记录】/【表单】/【图像域】。 2）单击插入面板【表单】类别中的【图像域】 。 插入图像域后，选中该图像域，即可显示【图像域】属性检查器如图6-16所示。,【图像域】属性检查器各参数的含义如下： 图像区域：用于设置图像域的名称。 源文件：用于设置图像域的URL地址，或通过浏览按钮选择图像文件。 替换：用于设置要替代图像显示的文本。 对齐：用于设置图像的对齐方式。 编辑图像：用于启动默认的图像编辑器并打开该图像文件以待编

16、辑。 类：用于使用户可以将 CSS 规则应用于对象。,6.1.2 项目实现 通过前面的学习，读者掌握了创建表单及表单对象的基本方法。本节我们运用上述方法根据图6-1来实现留言簿表单的制作。 1表单的设计 （1）单击插入面板【表单】选项卡中的表单按钮 ，即可在网页中插入一个表单。 （2）将光标置于表单中，单击插入面板【常用】选项卡中的表格按钮 ，弹出【表格】对话框。如图6-17所示设置。单击 按钮完成表格的创建，完成后效果如图6-18所示,图6-17 留言簿表格设置,图6-18 留言簿表格创建,(3) 选择第1行的两个单元格，然后右击，在弹出的对话框中选择【表格】/【合并单元格】，完成合并。 (

17、4) 选择最后1行的两个单元格，然后右击，在弹出的对话框中选择【表格】/【合并单元格】，完成合并。 (5) 设置首行的高度为80像素，以添加标题；调整第1列的宽度为25%。 (6) 在第1行中输入标题“留言簿”，设置字号为36像素，颜色为蓝色，设置单元格对齐方式为居中对齐。 (7) 选择除第1行外第1列所有单元格，设置单元格对齐方式为右对齐。,(8) 在第2行第1列中输入“昵称：”。将光标置于第2行第2列中，单击插入面板【表单】类别中的【文本字段】按钮 ，在单元格中插入一个单行文本域。设置文本域的名称为“nc”，类型选择单行，其余属性根据需要自己定义。 (9) 在第3行第1列中输入“密码：”。

18、将光标置于第3行第2列中，单击插入面板【表单】类别中的【文本字段】按钮 ，在单元格中插入一个单行文本域。设置文本域的名称为“mm”，类型选择密码，其余属性根据需要自己定义。,（10）在第4行第1列中输入“性别：”。将光标置于第4行第2列中，插入两个单选按钮。单击插入面板【表单】类别中的【单选按钮】按钮 ，在单元格中插入一个单选按钮，设置标签文字为“男”，单选按钮名称为“xb”，选定值设置为“男”；用同样的方法再插入一个单选按钮，设置标签文字为“女”，单选按钮名称为“xb”，选定值设置为“女”。 （11）在第5行第1列输入“爱好：”。在其后的单元格里输入四个复选框。单击插入面板【表单】类别中的【

19、复选按钮】 ，在单元格中插入一个复选按钮，设置其标签文字为“文学”，复选按钮的名称为“ah”，选定值设置为“文学”，其余3个复选按钮的名称均为“ah”，余下设置同上。,（12）在第6行第1列输入“职业：”。将光标置于其的单元格里，单击插入面板【表单】类别中的【列表/菜单】 ，在单元格中插入一个列表/菜单，设置菜单的名称为“zy”，类型选择菜单。列表值设置如图6-19所示。 图6-19 【列表/菜单】列表值设置,（13）在第7行第1列中输入“留言内容：”。将光标置于其的单元格里，单击插入面板【表单】类别中的【文本字段】按钮 ，在单元格中插入一个单行文本域。设置文本域的名称为“lynr”，类型选择

20、多行，其余属性根据需要自己定义。 （14）将光标置于第8行，单击插入面板【表单】类别中的【按钮】 ，动作选择提交表单；用同样方法再插入一个按钮，动作选择重设表单。,2CSS设计 单击【窗口】/【CSS样式】，打开CSS样式面板。单击【新建CSS样式规则】按钮 ，弹出如图6-20所示的【新建CSS样式规则】窗口，选择器类型选择类（可应用于任何标签），设置名称“.maintext”，定义在选择仅对该文档，单击确定即可打开【.maintext的CSS规则定义】窗口，设置参数如图6-21所示。,图6-20【新建 CSS 样式规则】窗口 图6-21 【.maintext的 CSS规则定义】 窗口,3套用

21、CSS样式 选择需要套用样式的文本，右键单击【CSS样式】中的.maintext，在弹出的菜单中选择【套用】，完成样式的套用。,6.1.3 知识拓展 1单选按钮组 （1）插入单选按钮组 创建单选按钮组的方法有以下二种： 1）选择菜单【插入记录】/【表单】/【单选按钮 组】，弹出【单选按钮组】对话框，如图6-22所示。 2）单击插入面板【表单】类别中的【单选按钮 组】 ，弹出【单选按钮组】对话框。,图6-22 【单选按钮组】对话框,【单选按钮组】对话框中的参数含义如下： 名称：用于设置单选按钮组的名称。 ：用于向该组添加一个单选按钮。为新按钮输入标签和选定值。 ：用于删除单选按钮组中指定按钮。

22、：用于重新排序单选按钮组中的按钮。 布局，使用：用于选择 Dreamweaver 对这些按钮进行布局时要使用的格式。可以使用换行符或表格来设置这些按钮的布局。如果选择表格选项，则 Dreamweaver 创建一个单列表，并将这些单选按钮放在左侧，将标签放在右侧。,例如，我们要设计一个考试表单，试卷中均为单项选择题，每个题目四个选项，这时就可以使用单选按钮组完成选项的添加。第一题选项的设置如图6-23所示。设计效果如图6-24所示。 图6-23 第一题选项的设置 图6-24 用单选按钮组设计 选项的效果,2跳转菜单 跳转菜单是一种特殊的弹出式菜单，用它可以实现网页的跳转。 创建跳转菜单的方法有以

23、下二种： 1）选择菜单【插入记录】/【表单】/【跳转菜单】，弹出【跳转菜单】对话框，如图6-25所示。 2）单击插入面板【表单】类别中的【跳转菜单】，弹出【跳转菜单】对话框。,图6-25 【跳转菜单】对话框,【跳转菜单】对话框中的参数含义如下： ：加号用于添加菜单项。减号用于删除菜单项。 ：用于在【菜单项】列表中上下移动选定的菜单项。 文本：用于设置在菜单列表中显示的文本。 选择时，转到 URL ：用于设置选择该菜单后要跳转的网址。 打开 URL 于：用于选择文件的打开位置。 菜单之后插入前往按钮 ：用于添加一个【前往】按钮，而不是菜单选择提示。 更改 URL 后选择第一个项目 ：用于设置是否

24、插入菜单选择提示作为第一个菜单项。,跳转菜单的三种格式如图6-26所示。 图6-26 【跳转菜单】的三种格式 跳转菜单即可以实现站内跳转，也能实现Web站点上文档的链接。站内跳转及跳转到Web站点的设置方法如图6-27所示。设计效果如图6-28所示。,图6-27 跳转菜单的使用方法,图6-28 插入跳转菜单的效网页果,3文件域 文件域又称为文件上传域，允许用户将其计算机上的文件上传到服务器。文件域要求使用POST方法将文件从浏览器传输到服务器。 创建文件域的方法有以下二种： 1）选择菜单【插入记录】/【表单】/【文件域】，会在表单中插入一个文件域，如图6-29所示。 2）单击插入面板【表单】类

25、别中的【文件域】 。 图6-29 插入文件域,选中文件域会显示文件属性检查器，如图6-30所示。 图6-30 【文件域】属性检查器 【文件域】属性检查器中的参数含义如下： 文件域名称：用于设置文件域名称。 字符宽度：用于设置文件域的文本框中最多可显示的字符数。 最多字符数：用于设置文件域的文本框中最多容纳的字符数。,6.1.4 项目训练 参照6-1项目，自己动手制作一个信息反馈表单。如图6-31所示。 图6-31 信息反馈表单,【知识目标】 1了解表单处理的基本方法。 2熟悉表单及表单对象的HTML语法。 3掌握表单及表单对象HTML标签的使用。,任务二 表单处理,【技能目标】 1能灵活使用标

26、签和标签建立不同类型的表单。 2学会表单处理的方法。,任务二 表单处理,任务二 表单处理,【项目描述】 Web表单能够响应用户的请求，提高Web页面的交互性，可以使用表单标签来要求用户输入文本信息、从菜单进行选择、还可以使用复选按钮进行多项选择或通过单选按钮进行选择，然后再把所得的信息发送到Web服务器端进行处理。下面我们将使用HTML的表单及表单对象标签来实现获取用户留言信息。,6.2 表单处理 6.2.1 项目准备 1表单及其对象源代码 （1）form标签 功能： 用来定义一个表单元素。 语法：. 常用属性： action：用来指明当本表单提交后将激活的表单处理程序的URL。 method

27、：用来指定表单中信息传送给Web应用程序时所采用的方式。包括两个选项：GET和METHOD。,说明：当method属性设置为“GET”方式时，将把表单中的所有信息作为字符串附加在所需执行程序的URL后面，中间用“?”隔开，各表单域信息之间用“&”隔开。但是用GET方法传递信息字符数会受到系统环境变量长度的限制，另外这种传递方式会在浏览器的地址栏中以明文的形式显示传递的表单信息，因此保密性不好；当设置为“POST”方式时，系统会将表单中的信息进行包装后再进行传递。不会在浏览器的地址栏中显示表单信息，传递信息的长度不会受到限制，保密性较好。,（2）input标签 功能：用于搜集用户信息。该标签根据

28、不同的 type 属性值，输入字段有很多种形式。输入字段可以是文本字段、复选框、单选按钮、按钮等等。 语法： 常用属性： ltype：用来指定表单域的类型。可取值有text(单行文本框)、password（密码框）、image(图片按钮)、file(文件框)、checkbox(复选框)、button(普通按钮)、radio(单选按钮)、submit(提交按钮)、reset(重置按钮)、hidden(隐藏区域)等多种表单域类型。当取值不同时，常用属性也不同。,name：用于当把该表单域的值传递给处理程序时，作为与该值对应的引用名称。 value：当type属性为text或password时，va

29、lue属性值是输入框中的初始内容；当type属性为radio或checkbox时，value属性值是提交给Web处理程序的值；当type属性为button、submit或reset时，value属性值是该按钮上的文本。 size：当type属性值为text或password时，该属性值决定了输入框的宽度。 maxlength：当type属性值为text或password时，该属性值决定了输入框接收的最大字符数。 checked：当type属性值为radio或checkbox时，用于表示缺省已选的选项,（3）select标签 功能： 用来在表单中创建一个列表框或下拉列表框元素。 语法： 文本 文

30、本 . ,常用属性： name：用于当把该表单域的值传给服务器处理程序时，作为该值对应的引用名称。 size：用于设置可以在列表框中同时显示的选项个数，默认值为1。 multiple：用于设置允许用户在此列表框中选取多个选项 说明：和option标签是用来定义列表框中一个具体选项的，其有selected参数，表示该选项已经被预先选中。,（4）textarea标签 功能： 用来在表单中创建一个可以输入多行文字的多行文本框。 语法：. 常用属性： name：用于当把表单域的值传给处理程序时，作为该值的引用名称。 rows：用于设置可以同时显示在多行文本框中的文字行数。 cols：用于设置可以同时显

31、示在多行文本框中的文字列数。 value：用于设置多行文本框中的默认值。,2获取表单信息 表单可以用来收集来自用户的信息并将其存储在服务器的内存中。HTML 表单可以将信息作为表单参数或 URL 参数来发送。如果想对提交的表单信息进行处理，程序需要放置在安装了Web服务器的计算机的主目录下。,6.2.2 项目实现 以6-1为基础，使用HTML标签来制作留言簿表单。打开Dreamweaver，新建一个空白文档，单击视图中的【代码】视图，进入代码编辑窗口。 1在主体区域添加表单 在代码窗口中找到标签，将光标置于后，输入 ，即完成在文档中插入一个空白表单，其处理程序为chuli.asp，这是一个动态

32、ASP程序，采用post方法进行信息的传递。,2表单的设计 （1）插入8行两列的表格 将光标置于和中，输入、标签，并设置第一列单元格的宽度为25%，且对齐方式为右对齐。代码见教材。 (2) 将第一行的两个单元格标签删除，用 代替。将光标置于该标签中，输入“留言簿”。 (3) 在第二个中的第一组标签中输入“昵称：”，在第二组标签中输入 ,(4) 在第三个中的第一组标签中输入“密码：”；在第二组标签中输入 (5) 在第四个中的第一组标签中输入“性别：”；在第二组标签中输入 男 女,(6)在第五个中的第一组标签中输入“爱好：”在第二组标签中输入 文学 音乐 体育 旅游,(7) 在第六个中的第一组标签

33、中输入“职业：”在第二组标签中输入 工程师 教师 医生 学生 ,(8) 在第七个中的第一组标签中输入“留言内容：”在第二组标签中输入 (9) 将第八组标签中的两组标签删除，输入 ,3CSS设计并套用 （1）在标签中输入以下代码 ,（2）选择“留言簿”文本，在其左侧的标签中加入class=STYLE1属性，完成标题样式的套用。 （3）选择表单其他标签文本，在其左侧的标签中加入class=maintext属性，完成标签文本样式的套用。,6.2.3 知识拓展 1隐藏区域 当标签type属性的取值为hidden时，即为隐藏区域。它的作用是要传送某类值给Web服务器和脚本。它通常用来给脚本发送关键字或某

34、些其他类型的字符串，这样脚本就知道它是合法的Web页面访问的。 2图像域 当标签type属性的取值为image时，即为图像域。用作提交按钮的图片可以通过src属性进行设置。,6.2.4 项目训练 使用HTML制作用户注册表单，如图6-32所示。要求：文本样式使用统一的CSS进行设计。 图6-32 用户注册表单,6.3 实训项目,1实训目标 掌握使用表单对象创建注册页面的方法。 2实训内容 在本例中将制作3个用于会员注册的表单页面，分别是用户注册页面；注册协议页面；注册成功页面。如图6-33、图6-34、 图6-35 所示。,图6-33 用户注册页面 图6-34注册协议页面 图6-35 注册成功页面,3制作步骤