网页设计与制作 高等教育应用型本科计算机类课程规划教材 胡一波 教学课件 第12章 表单及应用.pptVIP

尚辅网 尚辅网 第12章 表单及应用 本章内容提要： 1.表单域 2.文本域 3.单选按钮、复选框 4.列表和菜单 5.按钮 6.跳转菜单 本章目标任务： 1.掌握插入、设置表单域的方法； 2.熟练使用常用的表单对象创建表单网页。 表单域 表单可以帮助Internet服务器从用户那里收集信息，例如收集用户资料、获取用户订单等。表单的工作过程是：访问者在浏览有表单的页面时，填写必要的信息，然后单击【提交】按钮。这些信息通过Internet传送到服务器上，服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器程序对数据做出相应的反馈。 每个表单都是由一个表单域和若干个表单对象构成的。表单对象包括有：文本域、单选按钮、复选框、按钮、列表菜单等，它们都必须插入到表单域中，浏览器才能正确处理这些数据。 插入表单域 插入表单域的步骤如下： 打开一个页面，将插入点放置到希望添加表单的地方。 执行“插入”→ “表单”菜单命令，或选择工具栏上的“表单”选项卡，然后单击【表单】 插入表单域 设置表单域属性 1.“表单名称”：用于设置表单的名称，以便程序正确处理该表单。 2.“动作”：用于指定处理该表单的服务器端脚本的路径。 3.“方法”：用于选择把表单数据传输到服务器的方法。有三个选项：默认、GET和POST。 “POST”方法将在 HTTP 请求中嵌入表单数据。 “GET”方法将值附加到请求该页的 URL中。 “默认”方法是指使用浏览器的默认设置将表单数据发送到服务器。通常，默认方法为GET方法。 不要使用GET方法发送长表单和机密信息，因为当发送的数据量太大时，数据将被截断，从而导致意外的或失败的处理结果，而且GET方法传递信息不安全。 4.“目标”：用于指定一个窗口来显示调用程序所返回的数据。如果命名的窗口尚未打开，则打开一个具有该名称的新窗口。目标值有：_blank在未命名的新窗口中打开目标文档。 _parent在显示当前文档的窗口的父窗口中打开目标文档。_self在提交表单所使用的窗口中打开目标文档。_top在当前窗口的窗体内打开目标文档。此值可用于确保目标文档占用整个窗口，即使原始文档显示在框架中。 5.“MIME类型”：用于设置发送数据的MIME编码类型。 插入文本域 插入一个文本域的步骤如下： 将插入点放在表单轮廓内。 选择“插入” →“表单” →“文本域”菜单命令，或者单击“插入”工具栏上的【文本域】按钮。一个文本域随即出现在文档中。 若要在页面中为文本域添加标签，请在该文本域旁边单击，然后键入标签文字。 在属性面板中，根据需要设置文本域的属性。 插入单选按钮组 单选按钮可让用户从一组选项中选择一个选项 。 将插入点放在表单轮廓内。 执行“插入” →“表单” →“单选按钮组” ，或选择工具栏上的“表单”选项卡，然后单击【单选按钮组】按钮。 出现“单选按钮组”对话框。完成“单选按钮组”对话框，然后单击“确定”。 插入复选框 复选框可让用户可以从一组选项中选择多个选项 。 将插入点放在表单轮廓内。 执行“插入”→“表单”→“复选框” ，或选择工具栏上的“表单”选项卡，然后单击【复选框】按钮。 一个复选框随即出现在文档中。 插入表单按钮 按钮控制表单的操作。使用按钮可将表单数据提交到服务器，或者重置该表单。标准表单按钮通常带有“提交”、“重置”或“发送”标签。 插入列表和菜单 插入列表菜单的步骤如下： 将插入点放在表单轮廓内。 执行“插入”→“表单”→“列表/菜单” ，或选择工具栏上的“表单”选项卡，然后单击【列表/菜单】按钮。一个菜单随即出现在文档中。 在“属性”检查器中，可以设置属性 插入文件域 文件域使用户可以选择其计算机上的文件，如字处理文档或图形文件，并将该文件上传到服务器。文件域的外观与其它文本域类似，只是文件域还包含一个【浏览】按钮。用户可以手动输入要上传的文件的路径，也可以使用【浏览】按钮定位并选择该文件。 创建跳转菜单 跳转菜单可建立URL与弹出菜单列表中的选项之间的关联。通过从列表中选择一项，用户将跳转到指定的URL。 【例12.2】插入如图的跳转菜单 表单实例 【实例12.3】制作如图所示的个人资料表单网页。 表单实例 操作步骤如下： （1）新建一个网页12_3.html，执行“插入”→ “表单”菜单命令，插入一个空的表单域。 （2）在表单内插入10行2列的表格，选中表格，如下图所示设置表格属性，修改表格宽70%，填充5，间距1，背景颜色黑色。 表单实例 （3）将表格第一行的两个单元格合并，修改第一行单元格的背景颜色为“#99CCFF”。在表格第一行插入文字“个人资料”，选中文字将其大小设置为16点数，居中对齐。 （4）