《网页设计与制作案例教程 教学课件 ppt 作者 池同柱第9章 表单应用》由会员分享，可在线阅读，更多相关《网页设计与制作案例教程 教学课件 ppt 作者 池同柱第9章 表单应用（20页珍藏版）》请在金锄头文库上搜索。
1、第9章 表单应用,一、创建和使用表单,1.创建表单域 表单是Internet用户同服务器进行信息交流的最重要工具。通常，一个表单中会包含多个对象，有时它们也被称为控件，如用于输入文本的文本域、用于发送命令的按钮、用于选泽项目的单选按钮和复选框，以及用于显示选项列表的列表框等。 在网页中添加表单对象，首先必须创建表单。每个表单都是由一个表单域和若干表单对象组成的，所有的表单对象要放到表单域中才会有效。因此，制作表单的第一步是创建表单域。 （1）可以通过选择菜单【插入】【表单对象】来插入表单域对象，或者通过从如图9-7所示的“插入”栏的“表单”面板来插入表单域对象。,（2）用鼠标选中表单，在属性面
2、板上可以设置表单的各项属性。 “表单名称”用来设置这个表单的名称。为了正确地处理表单，一定要给表单设置一个名称。 “动作”用来设置处理这个表单的服务器端脚本的路径。如果希望该表单通过E-mail地址。在这里我们输入mailto:，表示把表单中的内容发送到作者的电子邮箱中。 “目标”下拉列表框用来设置表单被处理后，反馈网页默认的打开的方式，有4个选项“_blank”、“_parent”、“_self”、和“_top”，反馈网页默认的打开方式是在原窗口里打开。如果选择“_blank”，则反馈网页将在新开窗口里打开；如果选择“_parent”，则反馈网页将在父窗口里打开；如果选择“_self”，则反
3、馈网页将在原窗口里打开；如果选择“_top”，则反馈网页将在顶层窗口里打开。,“方法”下拉列表框用来设置将表单数据发送到服务器的方法，有3个选项“默认”、“POST”和“GET”。 如果选择“默认”或“GET”，则将以GET方法发送表单数据，把表单数据附加到请求URL中发送；如果选择“POST”，则将以POST方法发送表单数据，把表单数据嵌入到HTTP请求中发送。一般情况下应该选泽 “POST”。 2.设置表单可见属性 表单在浏览网页中属于不可见元素。在Dreamweaver CS3中插入一个表单，当页面处于“设计”视图中时，用红色的虚轮廓线指示表单。如果没有看到此轮廓线，可通过选中【查看】【
4、可视化助理】【不可见元素】来设置表单的可见属性。,二、创建文本域,1.单行文本域和密码域 在表单的文本域中，可以输入任何类型的文本、数字或字母。输入的内容可以单行显示，也可以多行显示。并且，还可以将密码以星号形式显示。 （1）将光标放置于要添加文本域的位置。 （2）在表单面板中单击【文本域】，在光标所在位置插入文本域。 选中文本域，打开属性面板，可以设置文本域的属性。 “文本域”下面的文本框用来设置所选文本框的名称。 “字符宽度”文本框用来设置所选文本框的长度，可输入数值，例如输入“30”，则文本框的长度能显示30个字节的字符，或者能显示15个汉字。,“最多字符数”文本框用来设置所选文本框能输
5、入的最大字符数，可输入数值。例如输入“10”，则文本框最多能输入10个字节的字符，或者最多能输入5个汉字。 “初始值”文本框用来设置所选文本框被显示时的初始文本。 在文本域属性面板中的“类型”后选择“密码”单选按钮，则文本框将转换成密码文本域。密码文本域中的内容在输入和显示时任何内容均以字符“*”显示。 2.多行文本域 多行文本域也称文本区域，创建多行文本域有两种方法： （1）在表单面板中单击【文本区域】，在光标所在位置插入文本区域。 （2）先在在光标所在位置插入文本域，然后在文本域属性面板中的“类型”后选择“多行”单选按钮，则文本框将转换成多行文本域。,多行文本域的属性面板可以设置以下不同的
6、项目： “行数”文本框用来设置所选文本域显示的行数，可输入数值。 “换行”下列表框用来设置文本框中输入文本的换行方式，有4个选项“默认”、“关”、“虚拟”和“实体”。 如果选择“默认”或“虚拟”，则在文本区域中设置自动换行，当访问者输入的内容超过文本区域的右边界时，文本自动换行到下一行；当提交数据进行处理时，自动换行并不应用到数据中，数据作为一个数据字符串进行提交。 如果选择“关”，则防止文本域中文本换行到下一行，当访问者输入的内容超过广西区域的右边界时，文本将向左侧滚动。 如果选择“实体”，则在文本区域中设置自动换行，当提交数据进行处理时，也对这些数据设置自动换行。,三、创建单选按钮和复选框
7、,1.单选按钮和单选按钮组 单选按钮作为一个组使用，提供彼此排斥的选项值，用来让浏览者在一组选项中进行惟一选择。 插入单选按钮的步骤如下： （1）将光标放置在要添加单选按钮的位置。 （2）在表单面板中单击【单选按钮】，在光标所在位置插入单选按钮。 选中单选按钮，打开属性面板，可以设置单选按钮的属性。 “单选按钮”下面的文本框用来设置所选单选按钮的名称。 “选定值”文本框用来设置这个单选按钮的值。 “初始状态”用来设置这个单选按钮的初始状态，有两个选项“已勾选”和“未选中”。如果选择“已勾选”，则这个单选按钮初始便处于选中状态。,另外，使用“单选按钮组”对话框，可以一次插入一组单选按钮。插入单选
8、按钮组的步骤如下： （1）将光标放置在要添加单选按钮组的位置。 （2）在表单面板中单击【单选按钮组】，弹出“单选按钮组”对话框。 在“单选按钮组”对话框中，中间的选框里列有这个单选按钮组所包含的所有单选按钮，每一行代表一个单选按钮。“标签”用来设置单选按钮的文字说明，“值”用来设置单选按钮的值。 单击“+”按钮，可以为单选按钮组添加一个新的单选按钮。 单击“-”按钮，可以删除在中间的选框里选中的那个单选按钮。 单击向上或向下的箭头按钮，可以对单选按钮组所包含的单选按钮进行排序。 “布局，使用”用来设置单选按钮的换行方式，有两个选项“换行符”和“表格”。如果选择“换行符”，则单选按钮在网页中直接
9、换行；如果选择“表格”，则Dreamweaver CS3自动插入表格来安排单选按钮的换行。 注意：同一组内的单选按钮名称（即name属性）必须相同。,2.复选框 复选框对每个单独的响应进行“关闭”和“打开”状态切换，因此，用户可以从复选框组中选择多个选项。 （1）将光标放置在要添加复选框的位置。 （2）在表单面板中单击【复选框】，在光标所在位置插入复选框。 选中复选框，打开属性面板，可以设置复选框的属性。 “复选框名称”下面的文本框用来设置所选复选框的名称。 “选定值”文本框用于设置这个复选框的值。 “初始状态”用于设置这个复选框的初始状态，有两个选项“已勾选”和“未选中”。如果选择“已勾选”
10、，则这个复选框初始便处于选中状态。如果选择“未选中”，则这个复选框初始处于未选中状态。 注意：在一个网页中，不同的复选框应该具有不同的名称。,四、 创建列表和菜单,列表和菜单的功能与复选框和单选按钮的功能相似，都可以列举很多选项供浏览者选择，其最大的好处就是可以在有限有空间内为用户提供更多的选项，非常节省版面。其中列表提供一个滚动条，它使用户可浏览许多项，并进行多重选择。下拉式菜单默认仅显示一个项，该项为活动选项，用户单击打开菜单但只能选择其中的一项。 （1）将光标放置在要添加列表的位置。 （2）在表单面板中单击【列表/菜单】，在光标所在位置插入列表/菜单。 在属性面板上的“类型”后选择“列表
11、”单选按钮，则创建的是列表。 “列表/菜单”下面的文本框用来设置所选列表的名称。,单击“列表值”按钮，弹出“列表值”对话框。在该对话框中，中间的选框里列有这个列表所包含的所有选项，每一行代表一个选项。“项目标签”用来设置每个选项所显示的文本，“值”设置的是选项的值。 单击“+”按钮，可以为列表添加一个新的选项。 单击“-”按钮，可以删除在中间的和选框里选中的那个选项。 单击向上或向下的箭头按钮，可以为列表的选项排序。 “初始化时选定”选框里可以选择列表在浏览器里显示的初始值。 “高度”广西框用来设置列表的高度，例如，填入“8”，则列表在浏览器中显示为8个选项的高度。 如果选中“允许多选”复选框
12、，则这个列表允许被多选。 如果取消对“允许多选”复选框的选择，则这个列表只允许被单选。,五、 创建文件域和图像域,1.创建文件域 在上传文件时，常常要用到文件域。文件域用于查找硬盘中的文件路径，然后通过表单将选中的文件上传。在设置电子邮件的附件、上传图片、发送文件时常常会看到这一控件。 （1）将光标放置在要添加文件域的位置。 （2）在表单面板中单击【文件域】，在光标所在位置插入文件域。 选中文件域，打开属性面板，可以设置文件域的属性。 “字符宽度”文本框用来设置所选文件域的长度，可输入数值，例如输入“30”，则文件域的长度能显示30个字节的字符，或者能显示15个汉字。 “最多字符数”文本框用来
13、设置所选文件域能输入的最大字符数，可输入数值。例如输入“10”，则文本框最多能输入10个字节的字符，或者最多能输入5个汉字。,2.创建图像域 图像域常用于创建特殊效果的按钮中，注意它实现的是提交按钮的功能，因此也常常称为“图像提交按钮”，使用图像域比提交按钮要更生动，不过它只能代替提交按钮。 （1）将光标放置在要添加图像域的位置。 （2）在表单面板中单击【图像域】，出现“选择图像源文件”对话框，选择好图像文件后单击“确定”，在光标所在位置插入图像域。 选中图像域，打开属性面板，可以设置图像域的属性。 “图像区域”下面的文本框用来设置所选图像域的名称。 “源文件”文本框用于设置图像文件的URL。
14、 “替换” 文本框用于设置图像文件替换文字。,六、创建隐藏域和按钮,1.隐藏域 隐藏域在页面中对于用户是看不见的，它用于储存一些信息，以利于被处理表单的程序所使用，所以隐藏域一般用在动态网页中。 （1）将光标放置在要添加隐藏域的位置。 （2）在表单面板中单击【隐藏域】，在光标所在位置插入隐藏域。 选中隐藏域，打开属性面板，可以设置隐藏域的属性。 “隐藏区域”下面的文本框用来设置所选隐藏域的名称。 “值”文本框用于设置隐藏域的值。,2. 插入按钮 按钮的作用是当用户单击后，执行一定的任务。常见的有提交表单、重置表单等。浏览者在网上申请E-mail、QQ、会员等注册时，常会见到这种情况。 （1）将
15、光标放置在要添加按钮的位置。 （2）在表单面板中单击【按钮】，在光标所在位置插入按钮。选中按钮，打开属性面板，可以设置按钮的属性。 “按钮名称”下面的文本框用来设置所选按钮的名称。 “动作”用来设置访问者单击按钮将产生的动作，有3个选项“提交表单”、“无”和“重设表单”。如果选择“提交表单”，则访问者单击按钮将提交这个表单；如果选择“无”，则访问者单击按钮将不产生任何动作；如果选择“重设表单”，则访问者单击按钮将重设这个表单，把表单各对象的值恢复到初始状态。 “值”文本框用来设置按钮上显示的文本。,七、 表单和表单对象的HTML标记,1.表单标记 要创建表单，需要使用和标记，在它们之间的一切都属于表单的内容。其语法格式为： 表单内容 2.表单对象标记 （1）文本框 ,（2）密码文本框 （3）多行文本框 （4）单选按钮 （5）复选框 ,（6）列表与菜单 显示内容1 显示内容2 显示内容n 注：菜单没有“size = 显示的项数” 和“multiple”属性。 （7）按钮 提交按钮： 重置按钮： 普通按钮：,（8）图像域、隐藏域和文件域 图像域： 隐藏域： 文件域： ,
