设置表单属性.doc

实验13 设置表单属性 实验要求 通过实验，掌握表单的属性设置，利用E-mail发送表单及信息，运用Dreamweaver的行为功能检测表单数据的信息。 说明 表单在Web网页中有很重要的作用，很多网页上的数据都是利用表单发送的。但HTML网页并不具备处理表单的能力，它需要将表单提交大服务器上，然后又服务器上的脚本程序进行相应的处理。在本实验中，我们将利用电子邮件的形式提交表单。 对应知识点： Form 的表单属性设置 表单检测的行为 跳转菜单的设置 对应《Macromedia Dreamweaver MX2004标准教程》第10章的内容。 实验课时：2课时 实验素材 实验12中制作好的表单页面（也可使用本书配套光盘exp12-13文件夹内的文件。） 实验步骤 1. 启动Dreamweaver MX 2004 程序，选择菜单“文件”→“打开”命令，在“打开”对话 框中选择实验12中完成的“form.htm”网页，打开此文件。如图13-1所示： 2. 使用鼠标单击页面中的红色虚线，选中时如图13-2所示。 说明 选中表单是为了设置表单属性，选中表单还有一种方法，单击视图窗口下面  状态栏上的form标签就可以选中整个表单，如图13-3所示： 图13-1 打开form网页 图13-2 选中红色虚线  图13-3单击状态栏的form标签 3. 选中Form标签后，打开属性面板，在“表单名称”下的文本框中输入theform,在“动作”文本框中输入Email地址，如mailto:webmaster@,在“方法”下拉列表中选择POST选项，在“MIME类型”下拉列表中输入text/plain。属性设置如图13-4所示： 图13-4 表单属性设置 说明 如果要将表单提交到电子邮箱中，则在动作的电子邮件前必须加mailto:,否则提交无效；在“方法”下拉列表中，POST方式是将表单内的数据放在HTTP的文件头信息中传送，GET方式是将表单内的数据直接附加在URL地址之后加“？”号传送，该方式常用于将数据传送到数据库中；MIME类型默认一般有两个选项，它们是针对服务器行为的本示例中用text/plain，是为了邮件按照表单纯文本的形式发送，这样可使传送的内容更容易阅读。 4. 完成设置后保存网页，按下F12键浏览网页测试表单，在表单中输入内容后，单击“提交”按钮，表单提示将以电子邮件的方式发送，如图13-5所示。单击“确定”按钮即可发送表单到邮件信箱中。 5. 回到网页编辑窗口，选择菜单“窗口”→“行为”命令，打开行为控制面板。 说明 上面的表单是在完全输入后提交的，如果用户没有输入任何信息，单击“发送”按钮，表单也会发送，所以，为了阻止表单在没有输入任何信息的情况下发送，需要给表单添加检测功能，以保证表单的有效性。 图13-5 表单以电子邮件的方式发送 6. 将光标放置到表单范围内，单击行为面板上的000加号按钮，在弹出的菜单中选择“检查表单”命令。如图13-6所示。 7. 打开“检查表单”对话框，在“命名的栏位”文本框中，选中第1行“文本”‘name’在表单‘theform’（R）”，然后勾选“必需的辅选框”，在“可接受”选项中单击“任何东西”单选按钮。如图13-7所示。 图13-6 行为菜单 图13-7 检查表单设置 8. 继续选择“命令的栏位”文本框中的第2行“phone”，选中“必需的”复选框，下面的“可接受”按钮选择“数字”。选中“命令的栏位”按钮文本框中“Email”行勾选“必需的”复选框，然后单击“可接受”选项中的“电子邮件地址”单选按钮，其他文本域的设置和“name”文本域完全相同。设置完成后单击“确定”按钮，在行为面板上出现了onSubmit(提交表单)事件和“检查表单”动作，如图13-8所示 9. 完成检测表单设置后，保存网页按下F12键浏览。如果用户在不填写表单内容时就单击“发送”按钮，则浏览器会提示需要输入的项目，如图13-9所示。 图13-8 添加的行为 图13-9 表单提示 10. 单击插入面板上的“HTML”选项选择“水平线”按钮，在表单下面插入分隔线。 11. 选中水平线，打开属性面板，在“水平线”下的文本框中输入名称line，“宽”文本框中输入600，“高”文本框中输入1，在“阴影”前的复选框中去掉“”，参数设置如图13-10所示。 图13-10 水平线属性设置 12. 在水平线下面输入文字“友情连接”，设置文