Dreamweaver表单制作

第9讲表单网页本讲要点内容:•表单的概念和作用。•创建不同的表单元素。本讲学习目标•了解表单在网页中的用途。•熟悉在各种表单元素的特点。•掌握在网页中插入编辑表单的方法。本讲学前要求•会创建复杂结构的网页。•熟悉论坛、电子邮件、搜索引擎等使用。9.1认识表单表单（form）:一种与用户交互的接口界面，通过表单将用户信息提交给服务器端相应程序进行处理。所有的表单对象都包含在一对form和/form标签中.表单文本字段隐藏域文本区域复选框单选按钮单选按钮组列表/钮组跳转菜单图像域文件域按钮标签字段集图9.2表单对象面板9.2创建表单域无论插入什么表单对象，都必须先创建一个表单9.3插入文本域9.3.1插入文本字段图9.6文本字段属性面板“字符宽度”：指定文本字段的宽度。“最多字符数”：指定在该文本域中最多可输入的字符个数。注：如果“最多字符数”大于“字符宽度”，那么也多余宽度的字符不被显示。“类型”：“单行”、“多行”、“密码”。注：密码文本域不显示内容，用“*”来代替显示。“初始值”：指定在首次载入表单时文本字段中显示的值。9.3.2插入文本区域“换行”：指定当用户输入的信息较多，无法在定义的文本区域内显示时，如何显示用户输入的内容，分别有以下四个值。1）“关闭或默认”：当用户输入的内容超过文本区域的右边界时，文本将向左侧滚动。用户必须按Return键才能将插入点移动到文本区域的下一行。2）“虚拟”：在文本区域中设置自动换行。当用户输入的内容超过文本区域的右边界时，文本换行到下一行。当提交数据进行处理时，自动换行并不应用于数据。3）“实体”：在文本区域设置自动换行，当提交数据进行处理时，也对这些数据设置自动换行。“选定值”：设置在该复选框被选中时发送给服务器的值。“初始状态”：确定在浏览器中载入表单时，该复选框是否被选中。9.4创建复选框9.5插入单选按钮9.5.1插入单选按钮“单选按钮”：用来设置对象的名称，在同一选项组中的所有单选项按钮的名称必须相同，如将标签值为“男”的单选按钮名称设置有sex，则标签值为“女”的单选按钮名称也要设置为sex，才能实现在这两个选项中选择其中的一个的目的。9.5.2插入单选按钮组单个的插入单选按钮在候选项较多的时候显得比较麻烦，Dreamweaver还提供了插入单选按钮组的功能，具体操作如下。步骤1：将光标定位在需要插入表单对象的位置。步骤2：在插入栏的“表单”对象面板中单击“单选按钮组”按钮，弹出“单选按钮组”对话框，如图9.19所示。步骤3：设置“单选按钮组”的对话框，默认设置的效果如图9.20所示。各设置项如下所示。图9.19“单选按钮组”对话框图9.20单选按钮组效果“名称”：用来设置单选按钮组的名称，名称要唯一。“单选按钮”：单击“＋”，添加单选按钮，“Label”列是单选按钮的文本说明，“Value”列是单选按钮的值。单击“－”删除选择好的单选按钮。通过单击按钮来调整单选按钮的次序。“布局，使用”：用来设置单选按钮组的布局方式，选择“换行符”则使用换行符，竖项排列，否则使用表格。提示：一旦单选按钮被选择，同一组的单选按钮将始终有一个处于选中状态，除非点击重置按钮进行重新设定。比如，男女性别两个单选按钮，初始状态是两个都不选中，选中男后女不被选中，选中女后男不被选中，总有一个处于选中状态，只有重置才能回到两个都不选中的初始状态。9.6插入列表和菜单9.6.1插入列表/菜单列表和菜单菜单都属于HTML表单菜单，对应的标签为select/select。列表和菜单的区别在于：一种菜单是用户单击时下拉的，称之为下拉菜单或下拉列表；另一种菜单则显示一个列有项目的可滚动列表，用户可从该列表中选择项目，称之为滚动列表或者列表菜单。插入列表/菜单的具体操作步骤如下。步骤1：将光标定位在需要插入表单对象的位置。步骤2：在插入栏的“表单”对象面板中单击“列表菜单”按钮，即在文档中插入了一个列表/菜单，如图9.21所示。步骤3：选中列表/菜单对象，在“属性”面板可以对其属性进行设置，如9.22图所示，各选项的含义如下。“类型”：指定该菜单是单击时下拉的菜单（“菜单”选项），还是显示一个列有项目的可滚动列表（“列表”选项）。9.21插入列表/菜单图9.22列表/菜单的属性面板“高度”：用来设置列表中显示的项数，该属性值只有在“列表”类型中才有效。“选定范围”：指定用户是否可以从列表中选择多个项，该属性值只有在“列表”类型中才有效。“列表值”：单击该按钮，打开一个“列表值”对话框，如9.24图所示。单击“＋”按钮增加列表值，单击“－”按钮删除列表值。“项目标签”指用户看到的列表项目的文本，“值”指的是该项目所要传递给处理页面的信息（如网址、出身地址等）。“初始化时选定”：用来设置表单首次被载入时，该菜单/列表中哪个值将被选定。9.6.2插入跳转菜单跳转菜单实际就是一个下拉列表，其中显示当前站点的导航名称，单击某个选项，即可跳转到相应的网页上，从而实现跳转的目的。其具体操作过程如下。步骤1：将光标定位在需要插入表单对象的位置。步骤2：在插入栏的“表单”对象面板中单击“定此转菜单”按钮，弹出如图9.17所示的对话框。图9.25跳转菜单的对话框步骤3：单击“添加项”按钮添加菜单项，在“文本”文本框中为菜单项输入要在列表中显示的文本。步骤4：在“选择时，转到URL”文本框中，单击“浏览”按钮找到要打开的文件，或者在文本框中输入该文件的路径。步骤5：在“打开URL于”下拉列表框中选择文件打开的位置。步骤6：在“菜单名称”文本框中，输入菜单项的名称。步骤7：单击“确定”按钮完成操作。9.7插入按钮9.7.1插入标准按钮插入按钮的步骤如下。步骤1：将光标定位在需要插入表单对象的位置。步骤2：在插入栏的“表单”对象面板中单击“按钮”按钮，即在文档中创建了一个按钮，如图9.27所示。图9.28按钮的属性面板步骤3：选中该按钮，其属性面板如9.28图所示，各属性值的含义如下。“按钮名称”：为该按钮指定一个名称。“标签”：确定按钮上显示的文本，如果是提交按钮可以是“提交”“确认”等等，如果是重置按钮可以是“重置”“重来”“取消”等等。“动作”：确定单击该按钮时发生的操作，分别有“提交表单”、“重设表单“和“无”。若选择“提交表单”，则该按钮为提交按钮，对应的type值为submit，将当前表单域内所有数据提交到服务器处理；若选择“重设表单”，则该按钮为重置按钮，对应的type值为reset，单击后将复原所有表单对象的值；若选择“无”，则该按钮为普通按钮，对应的type值为button。9.7.2插入图像按钮可以使用图像作为按钮图标。如果使用图像来执行任务而不是提交数据，则需要将某种行为附加到表单对象。插入图像按钮的操作过程如下。步骤1：将插入点放在表单区域内。在插入栏的“表单”对象面板中单击“图像域”按钮，弹出“选择图像源文件”对话框，如图9.29所示。图9.29选择图像源文件对话框步骤2：本书在“本讲实例”目录下准备了图片submit.gif和reset.gif，分别选中图片，单击“确定”按钮，两个图像域随即出现在表单中，如图9.30所示。步骤3：选中图片域对象，从“属性”面板上可以设置其属性。“图像区域”：为该按钮指定一个名称。“提交”和“重置”是两个保留名称，如果名称为“提交”，单击时就通知表单将表单数据提交给处理页面，功能就相当于submit；如果名称为“重置”，单击时就将所有该表单域内的表单对象值重置，功能相当于重置按钮。图9.30图像按钮图9.31图像按钮属性面板“源文件”：指定要为该按钮使用的图像。“替代”：用于输入描述性文本，一旦图像在浏览器中载入失败，将显示这些文本。“对齐”：设置对象的对齐属性，分别有默认、顶端、居中、底部、左对齐和右对齐。“编辑图像”：启动默认的图像编辑器并打开该图像文件进行编辑。“类”：可以将CSS规则应用于该对象。步骤4：若要将某个JavaScript行为附加到该按钮，选择该图像，然后在“行为”面板（“窗口\行为”）中选择行为。小结表单的在网页上的应用已经相当广泛，如收发Email邮件、搜索引擎搜索数据、申请个人空间等等，都是利用表单来收集客户端的数据，并将这些提交给相应的动态网页进行数据处理，最后将结果返回给用户。可以说，表单是网页与用户之间交互的必备工具、是网站管理者与浏览者之间沟通的桥梁。因此，本讲着重介绍表单的用途，各种常用的表单对象的创建、设置和功能技巧，各种表单元素都必须在表单域中使用，所以制作表单时应首先插入表单域，然后在表单域中插入各种表单元素。但是本讲只介绍作为信息收集端的表单制作，并不介绍收集的信息的处理。