Dreamweaver课件：第10章

第10章添加表单元素内容提要认识表单，理解表单的基本功能表单的创建表单对象的添加初步的表单处理和简单的表单处理脚本程序的编写学习目标掌握使用表单的方法掌握创建文本域、文件域和隐藏域的方法掌握创建复选框和单选钮的方法掌握创建列表和菜单的方法掌握创建表单按钮的方法10.1理解表单交互过程10.1理解表单交互过程随着网站功能的完善，用户对网页的要求不仅是获取信息，还希望要有互相的交流。表单作为浏览者交互的一种元素，被应用在网站的各个区域。其表现的形式有问卷调查、线上交易以及拍卖等活动。创建表单的基本步骤如下：①确定需要收集的信息，根据信息特点设计表单。②在表单中插入不同的表单元素。③设置表单域的属性。④设置通过表单所收集的信息的处理方式。⑤设置确认网页，确认已经接收到用户填写的信息，并请用户核对是否正确。表单只是收集浏览者输入的信息，其数据的接收、传递、处理以及反馈工作是由通用网关接口（CommonGatewayInterface）的CGI程序来完成的。如果要在网页中添加表单，就必须编写相应的CGI程序。10.2创建表单10.2.1建立表单布局Dreamweaver表单对象包括文本域、按钮、图像域、复选框、单选钮、列表/菜单、文件域以及隐藏域等。在添加表单之后，文档中将以红色虚线表示表单区域。表单对象只能插入在红色虚线内。为了更合理地安排表单元素，可以使用表格来布局表单元素。•提示：插入表格之后，所有的表单元素都可以放置在表格中。表单的属性可以通过“属性”面板进行设置。表单属性如下所示。“表单名称”：为表单设置一个名称。表单命名之后就可以用脚本语言对它进行控制。“动作”：识别处理表单信息的服务器端应用程序。“方法”：定义表单数据处理的方式：“Get”：追加表单值到URL并发送服务器GET请求。“Pos”：在消息正文中发送表单值并发送服务器POST请求。“默认”：使用浏览器默认的方法（一般为GET）。“MIME类型”：指定对提交给服务器进行处理的数据使用MIME编码类型。10.2.1建立表单布局实例（1）：建立表单布局操作步骤：网页效果（1）建立站点及创建相关网页（2）建立表单布局•提示:建立表单布局，同时可以在布局表单中插入表格安排表单元素。•提示:如果执行以上操作之后没有看到可见结果，可单击“查看”|“可视化助理”|“不可见元素”。10.2.2在表单中添加不同的对象在插入表单之后，需要在表单（红色虚线内）添加表单元素。例如文本域、单选钮、复选框以及弹出菜单等。利用“插入”栏的“表单”项可以方便的插入表单中的各个元素。1．文本域文本域是常见表单元素之一，在文本域内可输入任何文本、字母或数字类型。输入的文本可以显示为单行、多行、项目符号或星号（多用于密码保护）。要插入文本域，将光标定位后，单击“插入”工具栏“表单”分类上的“文本字段”按钮即可。2．单选按钮单选按钮只可以取其一的按钮。在一组按钮内只能选取一个按钮。要插入单选按钮，将光标定位后，单击“插入”工具栏“表单”分类上的“单选按钮”按钮。3．复选框复选框就是在一组选项中允许选取多个选项。要插入复选框，将光标定位后，单击“插入”工具栏“表单”分类上的“复选框”按钮。4．列表/菜单弹出（下拉）菜单和列表都列出了一组用户可以从中选择的值弹出菜单和列表对象是有一些区别的。弹出菜单只允许单项选择，而列表框则可选取多项。要插入列表/菜单，将光标定位后，单击“插入”工具栏“表单”分类上的“列表/菜单”。5．按钮按钮可以执行提交或重置表单的标准任务，也可以执行自定义功能。在插入时可以设置自定义按钮标签或使用预先定义的标签。要插入表单按钮，将光标定位后，单击“插入”工具栏“表单”分类上的“按钮”。10.2.2在表单中添加不同的对象10.2.2在表单中添加不同的对象实例（2）：添加表单元素操作步骤：（1）添加文字对象（2）添加文本域（3）添加单选项（4）添加列表/菜单（5）添加复选框（6）添加文本区域（7）添加按钮（8）保存网页，预览效果提示:利用表单选项可以方便的插入表单元素，但这样的表单元素还需要通过“属性”面板进行设置。效果图10.2.3设置表单元素的属性设置表单元素的属性，可以先选取表单元素，然后通过“属性”面板设置。1．文本域设置“属性”面板中“字符宽度”的值，可以限定文本域显示的宽度。设置“最大字符数”的值，可以限制用户输入的字数。文本域的“类型”可以划分为以下3种：“单行”：只允许输入单行文本。“密码”：用于输入密码，在该框中输入的字符都显示为星号。“多行”：可以输入多行文本，并且滚动显示。在所有类型的文本域中都可以输入“初始值”，即浏览者尚未输入文本、字母或数字之前所显示的提示值。2．单选按钮设置单选按钮的属性，可以在选取单选按钮之后，在“属性”面板中的“单选按钮”下的文本域中输入组名。要设置单选按钮的初始状态，可选取“已勾选”或“未勾选”。10.2.3设置表单元素的属性3．复选框设置复选框的属性，可以在选中复选框之后，在“复选框名称”下面的文本域中输入复选框的名称。注意，复选框的名称不能相同，这一点和单选按钮刚好相反。要设置复选框的初始状态，可选取“已勾选”或“未勾选”。4．列表/菜单设置列表/菜单的属性，可以在选中列表/菜单之后，在“列表/菜单”下面的文本域中输入列表/菜单的名称。要设置列表/菜单项的内容，可以通过单击“列表值”按钮添加列表/菜单的项目。5．按钮要设置按钮的属性，可以在选中按钮之后，在“按钮”下面的文本域中输入按钮的名称。•提示:通过“属性”面板可以设置不同的按钮动作和按钮的标签。10.2.3设置表单元素的属性实例（3）：设置表单元素的属性操作步骤：（1）设置文本域属性（2）设置单选按钮属性（3）设置列表/菜单属性（4）设置按钮属性（5）保存网页，预览效果•提示：本实例只是添加了表单元素及设置其属性，而表单的实际制作常常要与数据库联系起来效果图10.2.4设计表单元素样式在默认情况下，表单元素的样式是不变的。但是，在某些情况下，可能希望修改表单元素的样式。为表单元素设计样式，主要有以下两种方式：一、重新定义表单元素的标签。例如input、textarea等。二、创建自定义样式，将定义样式应用到指定表单元素上。10.2.4设计表单元素样式实例（4）:设计表单元素样式操作步骤：效果图①选取第八行第二列的多行文本域。②单击“窗口”|“CSS样式”打开CSS样式面板。③单击CSS样式面板底部的“新建样式”按钮。④在出现对话框中，选择“标签（重新定义特定标签的外观）”，然后单击“确定”。⑤在样式定义对话框的“类型”分类中，设置字体为楷体、大小为16点数、颜色为蓝色。⑥单击样式定义对话框中的“背景”类别，然后选择背景颜色“黄色”。⑦单击“确定”关闭样式定义对话框⑧保存网页，预览效果。10.3验证表单的输入结果10.3验证表单的输入结果在插入各个表单元素后，还需要设置表单的输入规则（验证表单）以及指定表单的处理程序。Dreamweaver内置的“检查表单”动作可以帮助用户对输入的结果进行验证。10.3验证表单的输入结果实例（5）:验证表单操作步骤：效果图①将光标停放在表单内，然后单击文档窗口左下角的form标签，选取整个表单。②单击“窗口”|“行为”，打开“行为”面板。③单击“行为”面板中的“+”按钮，从动作列表中选择“检查表单”。④在出现的对话框中，在“命名的栏位”中选取“yhm”，选取“必需的”，表示浏览者在用户名处必须输入字符。⑤选取“mm”，选取“必需的”，并选取“数字”单选按钮，表示浏览者必需输入数字密码。⑥选择“yx”，选取“电子邮件地址”单选按钮，表示浏览者在“Email”项中必须输入电子邮件地址形式。⑦单击“确定”关闭对话框。⑧保存网页，预览效果。10.4通过电子邮件接收表单结果10.4通过电子邮件接收表单结果表单内的信息输入完毕后，需要将该信息提供给有关的人员，通过电子邮件接收表单结果实例（6）:通过电子邮件接收表单结果操作步骤：①将光标停放在表单内，然后单击文档窗口左下角的form标签，选中整个表单。②在“属性”面板的“动作”文本域中输入表单动作“mailto:[e-mail]”，在“方法”下拉列表中选择“POST”选项。③在“MIME类型“中输入text/plain。该语句指定表单信息按纯文本方式传送。④保存网页。•提示：当站点访问者在浏览器中键入信息并提交表单时，信息就会按纯文本格式传送到预先设定的电子邮箱中。“属性”面板的设置10.5创建跳转菜单10.5创建跳转菜单Dreamweaver将跳转菜单归为表单项目之一。跳转菜单弹出的菜单选项具有跳转到其它网页的功能。10.5创建跳转菜单实例（7）：创建跳转菜单操作步骤：效果图①将光标定位在表格右侧，然后单击“插入”|“表单对象”|“跳转菜单”。②在出现的“插入跳转菜单”对话框中，修改默认的“文本”框中的“unnamed1”文本，输入所需的跳转菜单项“跳转图片”，该项目将提示用户选择一个分支页面③选取“选项”右面的“更改URL后选择第一个项目”复选框。④单击“+”号按钮，添加其他跳转菜单选项。⑤在“文本”框中输入第二个菜单选项“图片1”，然后单击“选择时，前往URL”框右面的“浏览”按钮，选取素材盘中的chapter10/materials中的图片文件“1.jpg”。⑥重复步骤4、5添加第二个菜单选项“图片2”，并将其链接至图片文件“2.jpg”。⑦单击“确定”按钮，完成跳转菜单的设置。⑧保存所作修改，预览效果。•提示：上述操作是直接跳转到图片，但也可设置直接跳转到网页文件。10.6制作留言板程序10.6制作留言板程序留言板是网页中常见的，它可以实现用户间互相交流。DreamweaverMX提供了方便的留言板制作方法。以下就是利用该程序制作一个简单的留言板。10.6.1设计留言板界面实例（8）：制作留言板界面制作这个留言板只需要两个页面，一个是浏览留言的网页，另一个是填写留言的网页。使用DreamweaverMX2004将它与数据库的内容相连结。最后将网页保存为.asp的文件格式。操作步骤：（1）建立站点（2）创建网页index.asp大致框架guestadd.asp大致框架•提示：以上只是制作了留言板的界面，但还不能使用，因为该留言板还没有和数据库相连，没有添加服务器行为。