《《网页设计》——表单的使用》由会员分享，可在线阅读，更多相关《《网页设计》——表单的使用（18页珍藏版）》请在金锄头文库上搜索。
1、1,网页设计,2,9.1 表单的基本概念 9.2 表单的创建 9.3 创建文本域 9.4 创建按钮 9.5 插入单选按钮与复选框 9.6 列表与菜单 9.7 实践技能训练-制作“注册页面”,第9章 表单的使用,3,9.1 表单的基本概念,表单的应用非常广泛。例如常见的留言簿、讨论区、会员注册/登陆、在线查询等，都需要通过表单才能将数据传送到后台程序进行处理，实际上表单的作用就是收集信息和数据。如图9-1所示的即为应用表单元素的调查问卷网页。 图9-1 表单范例,4,9.2 表单的创建,一个表单通常由两部分组成，即表单域和表单对象，如图9-1所示，其中表单域相当于一个“容器”，所有的表单对象都放
2、在表单域中。表单域包含处理数据所用到的程序以及数据提交给服务器的方法。通常在Dreamweaver 8.0中表单域的范围由一个红色的虚线框来表示，如图9-2所示。 图9-2 一个空白的表单域,5,9.2 表单的创建,创建表单的第一步就是插入表单域，方法是选择“插入” 面板中的“表单” 标签，单击“表单”按钮即可在网页中插入新的表单域。然后打开属性面板，从中设置该表单的各种属性，如图9-3所示。 图9-3 表单属性,6,9.3 创建文本域,9.3.1 创建单行文本域 将光标定位在表单域的红色虚线框中，单击“表单”标签中的“文本字段”按钮，文档中会出现一个文本框，如图9-4所示。 图9-4单行文本
3、域,7,9.3 创建文本域,9.3.2 创建多行文本域 多行文本域是建立在单行文本域基础上的，其创建方法与创建单行文本域的方法基本相同，只不过选中单行文本域后，在其属性面板中将“类型” 选项设置为“多行”，就可得到多行文本域，如图9-5所示。 图9-5 多行文本域,8,9.3 创建文本域,9.3.3 创建密码文本域 密码文本域也是建立在单行文本域基础上的，选中文本域，并在其“属性”面板上将“类型”设为“密码”。通常用于用户登录时的密码文本框如图9-6所示。 图9-6 密码文本域,9,9.4 创建按钮,9.4.1 插入标准表单按钮 将插入点放在表单域内，然后单击“表单”标签中的“按钮”按钮，或者
4、选择“插入”“表单”“按钮”命令，Dreamweaver 8.0会在表单域中插入“按钮”元素，并显示“按钮”的属性面板，如图9-7所示。 9-7 标准表单按钮,10,9.4 创建按钮,9.4.2 插入图像表单 将插入点放在表单域内，然后单击“表单”标签中的“图像域”按钮，打开如图9-8所示的对话框，在其中找到按钮图像，单击“确定”按钮完成插入操作。 9-8 “选择图像源文件”,11,9.5 插入单选按钮与复选框,复选框对每个单独的响应进行“关闭”和“打开”状态切换，因此，可以从复选框组中选择多个选项。单选按钮作为一组使用，提供彼此相互排斥的选项值，在单选按钮组内只能选择一个选项。其实复选框和单
5、选框就像多选题和单选题，如图9-9所示。 图9-9 单选按钮与复选框,12,9.5 插入单选按钮与复选框,1.插入单选按钮 单击“表单”标签内的“单选按钮”按钮，Dreamweaver会自动向网页文档中插入一个单选按钮，其属性面板如图9-10所示。 图9-10 单选按钮的属性面板,13,9.5 插入单选按钮与复选框,单击“表单”标签内的“单选按钮组”按钮，会弹出如图9-11所示的对话框。 图9-11 “单选按钮组”对话框,14,9.6 列表与菜单,列表与菜单的功能与复选框和单选框的功能是差不多的，都可以列举很多选项供浏览者选择，其最大的好处就是可以在有限的空间内为用户提供更多的选择，非常节省版
6、面。其中列表提供一个滚动条，可浏览许多项，并进行多重选择。下拉式菜单默认仅显示一个项，该项为活动选项，单击打开菜单只能选择其中的一项。如图9-12所示。 图9-12 列表与菜单元素,15,9.6 列表与菜单,1、创建列表 单击“表单”标签内的“列表/菜单”按钮，Dreamweaver即会在网页中插入一个列表/菜单。其属性面板如图9-13所示。 图9-13 列表/菜单属性面板,16,9.6 列表与菜单,单击“列表值”按钮，打开如图9-14所示的对话框，在这里可以添加、设置列表中的选项值。 图 9-14“列表值”对话框,17,9.6 列表与菜单,2.创建菜单 单击“列表/菜单”后，默认插入到页面中的元素就是菜单元素，菜单元素只需要设置“列表值”和“初始化时选项”两个属性。其他列表所具有的属性，菜单元素不可选，也就是说菜单只能够完成菜单的选项。如图9-15所示。 图9-15 菜单元素的属性面板,18,9.7 实践技能训练-制作“注册页面”,本节将通过一个“注册页面”来联系前面所学的有关表单的知识和操作。本实例的最终效果如图9-16所示。 图9-16 “注册页面”效果图,
