创建表单网页

.第7章 创建表单网页7.1 任务题目灵活运用各种表单域创建表单。7.2 任务导入表单是用于实现网页浏览者与服务器（或者说网页所有者）之间信息交互的一种页面元素，在 WWW 上它被广泛用于各种信息的搜集和反馈。例如，图 7-1 显示了一个用于进行电子邮件系统登录的表单。通常，一个表单中包含多个对象，有时也称为控件或表单元素，例如用于输入文本的文本域、用于发送命令的按钮、用于选择项目的单选按钮和复选框、用于显示列表项的列表框等。图7-1 用于进行电子邮件系统登录的表单7.3 任务目标1目的（1）掌握表单的概念。（2）掌握表单的类型。（3）掌握表单的创建。（4）掌握各类表单对象的实际应用范围。2重点（1）掌握如何在表单网页中插入表单域。（2）掌握如何在表单域中插入文本域和文本区域。（3）掌握如何在表单域中插入单选按钮、单选 按钮组和复选框。（4）掌握如何在表单域中插入列表/菜单、按钮和图像域。3难点（1）表单对象的属性设置。（2）表单对象的灵活运用。7.4 技能目标1使学生具有设计表单页面的能力。2使学生熟练表单的创建和使用方法。3使学生熟悉各种表单域的使用和属性设置。7.5 任务讲析7.5.1 实例演练问卷调查表【任务一】设计思路新建网页1在D盘创建新文件夹名为“任务7-1”，作为站点文件夹用于存放站内的文档。2启动dreamweaverCS3软件，新建一个文档，命名为“index.html”，且将该网页保存在“任务7-1”文件夹中，页面标题设置为“表单”。插入表单域11如果网页“index.html”处于关闭状态，则先打开该网页，然后将光标置于要插入表单域的位置。2在Dreamweaver CS3主窗口中，单击菜单【插入记录】【表单】【表单】，在光标处插入一个表单域。3设置表单域属性2将光标置于表单域中并单击鼠标左键，即可看到表单域【属性】面板。4在表单域中插入定位表格，输入“畅游旅行社调查表”、“姓名”等提示信息光标置于表单域中，插入一个11行2列的表格，且将第一行及最后两行的单元格合并，表格的“填充”文本框中输入“1”、“间距”文本框中输入“2”、“边框”文本框中输入“5”、“边框颜色”文本框中输入“#FF9900”，对齐方式为“居中对齐”。然后在表格中输入提示信息。效果如图7-2所示。图7-2 在表单域中插入定位表格插入表单控件31插入单行文本域 插入文本域的过程如下：（1）将光标置于“姓名”一行的第二个单元格中。 （2）单击【表单】插入工具栏中的【文本字段】按钮，弹出【输入标签辅助功能属性】对话框，直接单击【确定】按钮，在光标所在位置插入一个文本域。默认插入的是单行文本域。 （3）设置文本域的属性选中插入的文本域，在【属性】面板中设置文本域的属性。在“字符宽度”文本框中输入“14”，设置文本框中能显示7个汉字（14个字节的长度）。【属性】面板如图7-3所示。 图7-3文本域的【属性】面板 以同样的方法，将光标置于“E-mail”一行的第二个单元格中。插入单行文本域，文本域的属性设置是 “字符宽度”为“20”，“最多字符数”为“30”。2插入单选按钮（1）将光标置于“性别”一行的第二个单元格中。 （2）单击【表单】插入工具栏中的【单选按钮】按钮，弹出【输入标签辅助功能属性】对话框，在“标签文字”文本框输入 “男”，“位置”选中“在表单项后”单选按钮，然后单击【确定】按钮，在光标所在位置便插入一个单选按钮。以同样的方法插入另一个单选按钮，“标签文字”输入为“女”。（3）设置单选按钮属性选择刚插入的“标签文字”为“男”的单选按钮，在【属性】面板上设置“选定值”为“man”，“初始状态”为“未选中”。【属性】面板如图7-4所示。 图7-4 单选按钮的【属性】面板以同样的方法设置另一个单选按钮，“选定值”为“woman” ，“初始状态”为“未选中”。3插入单选按钮组使用单选按钮组，可以一次插入一组单选按钮。（1）将光标置于“年龄”一行的第二个单元格中。（2）单击【表单】插入工具栏中的【单选按钮组】按钮，弹出【单选按钮组】对话框。单击按钮，向单选按钮组中添加新的单选按钮，然后单击“标签”一列的文字，输入新的内容，可以使用中文，这里分别输入“20岁以下”、“2030”、“3040”、“4050”、“50岁以上”；单击“值”一列的文字，输入需要的值，只能使用英文半角字符，这里分别输入“50”。效果如图7-5所示。图7-5 【单选按钮组】对话框（3）单击【确定】按钮，在光标所在处插入单选按钮组，将五个单选按钮调整为两行布局。提示：同一组单选按钮的名称相同。4插入列表和菜单（1）插入列表的步骤如下：将光标置于“职业”一行的第二个单元格中。单击【表单】插入工具栏中的【列表/菜单】按钮，弹出 【输入标签辅助功能属性】对话框，直接单击【确定】按钮，在光标所在位置便插入列表/菜单。 添加列表值。选中刚插入的“列表/菜单”，在【属性】面板上的“类型”中选择“列表”单选按钮，然后单击【列表值】按钮，弹出【列表值】对话框，在该对话框中，中间的列表项中列出了该菜单所包含的所有选项，每一行代表一个选项。“项目标签”用来设置每个选项所显示的文本，“值”设置的是选项的值。单击按钮，为列表添加一个新的项目标签，在此分别添加：“教育行业”、“金融业”、“保险业”、“公共事业”、“自由职业”。 并为每个项目标签设定值为“01” “05”。项目标签添加完成如图7-6所示。在【列表值】对话框中单击【确定】按钮。图7-6 【列表值】属性面板（2）插入菜单的步骤如下：将光标置于“地区”一行的第二个单元格中。单击【表单】插入工具栏中的【列表/菜单】按钮，弹出 【输入标签辅助功能属性】对话框，直接单击【确定】按钮，在光标所在位置插入列表/菜单。 添加列表值。选中刚插入的“列表/菜单”，在【属性】面板上的“类型”中选择“菜单”单选按钮，然后单击【列表值】按钮，弹出【列表值】对话框，单击按钮，为菜单添加一个新的选项，在此分别添加：“北京”、“上海”、“大连”、“天津”。并为每个项目标签设定值为“001” “004”。项目标签添加完成如图7-7所示。在【列表值】对话框中单击【确定】按钮。图7-7 “列表/菜单”中“菜单”的【列表值】属性面板5插入复选框（1）将光标置于“你曾游览过哪些景点？”一行的第二个单元格中。（2）单击【表单】插入工具栏中的【复选框】按钮，弹出 【输入标签辅助功能属性】对话框，在“标签文字”文本框输入“故宫”，“位置”选中“在表单项后”单选按钮，然后单击【确定】按钮，在光标所在位置便插入一个复选框。（3）设置复选框的属性选中刚插入的“复选框”，在【属性】面板上的“选定值”中输入“no1”，当表单被提交时，被选中复选框的选定值被传递给服务器的应用程序。如图7-8所示。图7-8 复选框的【属性】面板用同样的方法插入其他7个复选框，“标签文字”分别是“东方明珠”、“水立方”、“周邓纪念馆”、“长城”、“海底世界”、“鸟巢”和“世博园”。“位置”为“在表单项后”。“选定值”为“no2”“no8”，初始状态都设置为“未选中”。6插入多行文本区域（1）将光标置于“你的意见”一行的第二个单元格中。（2）单击【表单】插入工具栏中的【文本区域】按钮，弹出【输入标签辅助功能属性】对话框，直接单击【确定】按钮，在光标所在位置插入多行文本域。 （3）设置多行文本域的属性 “字符宽度”文本框中输入“40”，“行数”文本框中输入“6”，“换行”下拉列表框中选择“实体”。如图7-9所示。图7-9多行文本域的属性设置7插入表单按钮将光标置于表格中的倒数第二行，单击【表单】插入工具栏中的【按钮】按钮，即可在光标处插入一个按钮。选中所插入的按钮，在【属性】面板中设置其属性，“值”文本框中输入“提交”，使按钮上显示的文字为“提交”；“动作”类型选择“提交表单”单选按钮。 如图7-10所示。图7-10 表单按钮的【属性】面板以同样的方法插入“清除”按钮，在【属性】面板中设置其属性，“值”文本框中输入“清除”，使按钮上显示的文字为“清除”；“动作”类型选择“重设表单”单选按钮。8插入图像域 将光标置于表格的最后一行，单击【表单】插入工具栏中的【图像域】按钮，弹出【选择图像源文件】对话框，在该对话框中选择“光盘/素材/第7章/任务1/image/title.jpg”，然后单击【确定】按钮，即可在光标处插入一个图像域。如图7-11所示。图7-11 图像域的【属性】面板至此，一个表单网页就制作完成了，预览效果如图7-12所示。图7-12调查问卷预览效果7.5.2 基础知识解析1 表单域每个表单由一个表单域和若干个表单控件组成，所有的表单控件要放置在表单域中才会有效，因此，制作表单页面的第一步是插入表单域。在Dreamweaver CS3主窗口中，单击菜单【插入】【表单】【表单】，在光标处可以插入一个表单域。一个表单域插入到网页中，在编辑窗口中显示为一个红色虚线框，如图7-13所示。其他的表单对象必须要放入这个框内才能起作用。如果看不见插入到页面中的标记表单或的红色虚线区域，可以单击菜单【查看】【可视化助理】【不可见元素】，使红色虚线可见。图7-13 表单2表单的属性设置在文档窗口中，选中表单轮廓，即可在表单的【属性】面板中对其进行各种属性设置。表单的【属性】面板如图7-14所示。图7-14表单的【属性】面板1“表单名称”属性在“表单名称”文本框中，键入标识该表单的唯一名称。 命名表单后，就可以使用脚本语言（如 JavaScript 或 VBScript）引用或控制该表单。如果未命名表单，则 Dreamweaver 使用语法 formn 生成一个名称，并在向页面中添加每个表单时递增 n 的值。如，form1。2“动作”属性在“动作”文本框中指定处理该表单的动态页或脚本的路径。可在“动作”文本框中键入完整路径，也可单击文件夹图标定位到同一站点中包含该脚本或应用程序页的相应文件夹。3“MIME类型”属性如果需要，可以使用“MIME 类型”弹出菜单指定对提交给服务器进行处理的数据使用 MIME 编码类型。 默认设置 application/x-www-form-urlencode 通常与 POST 方法协同使用。如果要创建文件上传域，请指定 multipart/form-data MIME 类型。4“方法”属性在“方法”下拉菜单中，选择将表单数据传输到服务器的方法。 默认方法使用浏览器的默认设置将表单数据发送到服务器。通常，默认方法为 GET 方法。GET 方法将值附加到请求该页的 URL 中。不要使用 GET 方法发送长表单。URL 的长度限制在819个字符以内。如果发送的数据量太大，数据将被截断，从而导致意外的或失败的处理结果。POST 方法将在 HTTP 请求中嵌入表单数据。如果您要收集机密用户名和密码、信用卡号或其它机密信息，POST 方法看起来比 GET 方法更安全。但是，由 POST 方法发送的信息是未经加密的，容易被黑客获取。若要确保安全性，请通过安全的连接与安全的服务器相连。5“目标”属性如果需要，使用“目标”弹出菜单指定一个窗口，在该窗口中显示被调用程序所返回的数据。 如果命名的窗口尚未打开，则打开一个具有该名称的新窗口。目标值如下所示： l _blank 在未命名的新窗口中打开目标文档。 l _parent 在显示当前文档的窗口的父窗口中打开目标文档。 l _self 在提交表单所使用的窗口中打开目标文档。 l _top 在当前窗口的窗体内打开目标文档。此值可用于确保目标文档占用整个窗口，即使原始文档显示在框架中。3各种表单控件1文本字段与文本域通过文本域可以创建一个包含单行或多行的文本域，也可以创建一个隐藏用户输入文本的密码文本域。对其属性设置可以通过文本字段与文本域的【属性】面板进行。如图7-15所示。图7-15 文本字段与文本域的【属性】面板（1）“文本域”属性每个文本域都必须有一个唯一名称。所选名称必须在该表单内唯一标识该文本域。提示：表单对象名称不能包含空格或特殊字符。可以使用字母数字字符和下划线 (_) 的任意组合。请注意，为文本域指定的标签是存储该域的值（输入的数据）的变量名。这是发送给服务器进行处理的值。（2）“字符宽度”属性字符宽度设置域中最多可显示的字符数。此数字可以小于“最多字符数”。“最多字符数”指定在域中最多可输入的字符数。例如，如果“字符宽度”设置为 20（默认值），而用户输入100个字符，则在该文本域中只能看到其中的20个字符。请注意，虽然无法在该域中看到这些字符，但域对象可以识别它们，而且它们会被发送到服务器进行处理。（3）“最多字符数”属性“最多字符数”设置单行文本域中最多可输入的字符数。如果将“最多字符数”文本框保留为空白，则用户可以输入任意数量的文本。如果文本超过域的字符宽度，文本将滚动显示。如果用户输入超过最大字符数，则表单产生警告声。（4）“类型”属性选择“单行”属性将产生一个单行文本域。 选择“多行”属性将产生一个多行文本域。可通过“行数”属性设置文本域的行数。选择“密码”属性将产生一个密码文本域。当用户在密码文本域中键入时，输入内容显示为项目符号或“*”，以保护它不被其他人看到。（5）“初始值”属性初始值指定在首次载入表单时域中显示的值。例如，通过包含说明或示例值，可以指示用户在域中输入信息。（6）“行数”属性行数（在选中了“多行”选项时可用），设置多行文本域的域高度。（7）“换行”属性换行（在选中了“多行”选项时可用）指定当用户输入的信息较多，无法在定义的文本区域内显示时，如何显示用户输入的内容。换行选项中包含如下选项：l “关或默认”，防止文本换行到下一行。当用户输入的内容超过文本区域的右边界时，文本将向左侧滚动。用户必须按 Return 键才能将插入点移动到文本区域的下一行。 l “虚拟”，在文本区域中设置自动换行。当用户输入的内容超过文本区域的右边界时，文本换行到下一行。当提交数据进行处理时，自动换行并不应用于数据。数据作为一个数据字符串进行提交。 l “实体”，在文本区域设置自动换行，当提交数据进行处理时，也对这些数据设置自动换行。2隐藏域使用隐藏域的【属性】面板设置 HTML 表单中的隐藏域属性。如图7-16所示。图7-16 隐藏域的【属性】面板（1）“隐藏区域”属性指定该域的名称。（2）“值”属性设置要为该域指定的值。该值将在提交表单时传递给服务器。3复选框 复选框的属性如图7-17所示。图7-17 复选框的【属性】面板（1）“复选框名称”属性为该对象指定一个名称。每个复选框都必须有一个唯一名称。所选名称必须在该表单内唯一标识该复选框。此名称不能包含空格或特殊字符。 （2）“选定值”属性设置在该复选框被选中时发送给服务器的值。（3）“初始状态”属性确定在浏览器中载入表单时，该复选框是否被选中。4单选按钮单选按钮的属性如图7-18所示。图7-18 单选按钮的【属性】面板（1）“单选按钮”属性文本框中，为该对象指定一个名称。 对于单选按钮组，如果您希望这些选项为互斥选项，必须共用同一名称。此名称不能包含空格或特殊字符。（2）“选定值”属性设置在该单选按钮被选中时发送给服务器的值。例如，可以在“选定值”文本框中键入滑雪，指示用户选择滑雪。（3）“初始状态”属性确定在浏览器中载入表单时，该单选按钮是否被选中。5单选按钮组 单选按钮通常成组地使用，单击【插入记录】【表单】【单选按钮组】可以创建一个单选按钮组。如图7-19所示。图7-19 【单选按钮组】对话框（1）“名称”属性用于输入单选按钮组的名称。（2）“单选按钮”属性 单击或按钮，可以向按钮组中添加单选按钮或删除所选的单选按钮，单击或 按钮，可以改变按钮组中按钮的排列顺序。（3）“布局，使用”属性 选择使用“换行符”或“表格”设置按钮的布局。6列表/菜单 列表/菜单属性如图7-20所示。图7-20 列表/菜单的【属性】面板（1）“列表/菜单”属性为该菜单指定一个名称。该名称必须是唯一的。（2）“类型”属性指定该菜单是单击时下拉的菜单（“菜单”选项），还是显示一个列有项目的可滚动列表（“列表”选项）。如果您希望表单在浏览器中显示时仅有一个选项可见，则选择“菜单”选项。如果您希望表单在浏览器中显示时列出部分或全部选项，如图7-21所示，或者打算允许用户选择多个菜单项，则选择“列表”选项。图7-21 “列表/菜单”的“类型”属性（3）高度（仅“列表”类型）设置菜单中显示的项数。（4）选定范围（仅“列表”类型）指定用户是否可以从列表中选择多个项。（5）初始化时选定设置列表中默认选择的菜单项。单击列表中的一个或多个菜单项。（6）列表值打开一个对话框，您可以在该对话框中向菜单中添加菜单项。7图像域 图像域属性如图7-22所示。图7-22 图像域的【属性】面板（1）“图像区域”属性为该按钮指定一个名称。（2）“源文件”属性指定要为该按钮使用的图像。（3）“替代”属性用于输入描述性文本，一旦图像在浏览器中载入失败，将显示这些文本。（4）“对齐”属性设置对象的对齐属性。（5）“编辑图像”属性启动默认的图像编辑器并打开该图像文件进行编辑。8文件域 文件域属性如图7-23所示。图7-23 文件域的【属性】面板（1）“文件域名称”属性指定该文件域对象的名称。 （2）“字符宽度”属性指定希望该域最多可显示的字符数。（3）“最多字符数”属性指定域中最多可容纳的字符数。如果用户通过浏览来定位文件，则文件名和路径可超过指定的“最多字符数”的值。但是，如果用户尝试键入文件名和路径，则文件域仅允许键入“最多字符数”值所指定的字符数。9按钮 按钮属性如图7-24所示。图7-24 按钮的【属性】面板（1）“按钮名称”属性为该按钮指定一个名称。“提交”和“重置”是两个保留名称，“提交”通知表单将表单数据提交给处理应用程序或脚本，“重置”将所有表单域重置为其原始值。（2）“标签”属性确定按钮上显示的文本。（3）“动作”属性确定单击该按钮时发生的操作。 如果选中“提交表单”选项，当单击该按钮时将提交表单数据进行处理，该数据将被提交到表单的“动作”属性中指定的页面或脚本。如果选中“重置表单”选项，当单击该按钮时将清除该表单的内容。7.6 能力拓展7.6.1 触类旁通制作访客留言板【任务二】设计思路新建文档1在D盘创建新文件夹名为“任务7-2”，作为站点文件夹用于存放站内的文档。2启动dreamweaverCS3软件，新建一个文档，命名为“indexhtml”的网页，且保存该网页，将页面标题设置为“留言板”。插入表格1在文档窗口中插入一个2行4列的表格，用于留言板页面的布局。表格属性设置如图7-25所示。图7-25 表格的【属性】设置2在表格的第1行第1列单元格内插入图像“光盘/素材/第7章/任务2/image/Snap1_01.jpg”。在表格的第2行第1列单元格内插入图像“光盘/素材/第7章/任务2/image/Snap1_02.jpg”。在表格的第2行第2列单元格内插入图像“光盘/素材/第7章/任务2/image/Snap1_03.jpg”。在表格的第2行第3列单元格内插入图像“光盘/素材/第7章/任务2/image/Snap1_04.jpg”。效果如图7-26所示。图7-26 在表格内插入图像效果3将表格的第1行第4列单元格与第2行第4列单元格合并。并在该单元格内插入图像“光盘/素材/第7章/任务2/image/Snap1_05.jpg”。4再将表格的第1行第2列单元格与第1行第3列单元格合并。选中合并后的单元格，设置单元格背景图像为“光盘/素材/第7章/任务2/image/Snap1_06.jpg”。效果及属性设置如图7-27所示。图7-27 合并单元格及设置单元格背景图像效果5将设置了背景图像的单元格拆分为2