设置表单属性

1、实验13 设置表单属性实验要求 通过实验，掌握表单的属性设置，利用E-mail发送表单及信息，运用Dreamweaver的行为功能检测表单数据的信息。说明 表单在Web网页中有很重要的作用，很多网页上的数据都是利用表单发送的。但HTML网页并不具备处理表单的能力，它需要将表单提交大服务器上，然后又服务器上的脚本程序进行相应的处理。在本实验中，我们将利用电子邮件的形式提交表单。对应知识点：l Form 的表单属性设置l 表单检测的行为l 跳转菜单的设置对应Macromedia Dreamweaver MX2004标准教程第10章的内容。实验课时：2课时实验素材l 实验12中制作好的表单页面（也可

2、使用本书配套光盘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标签后，打开属性面板，在“表单名

3、称”下的文本框中输入theform,在“动作”文本框中输入Email地址，如mailto:webmaster,在“方法”下拉列表中选择POST选项，在“MIME类型”下拉列表中输入text/plain。属性设置如图13-4所示：图13-4 表单属性设置说明 如果要将表单提交到电子邮箱中，则在动作的电子邮件前必须加mailto:,否则提交无效；在“方法”下拉列表中，POST方式是将表单内的数据放在HTTP的文件头信息中传送，GET方式是将表单内的数据直接附加在URL地址之后加“？”号传送，该方式常用于将数据传送到数据库中；MIME类型默认一般有两个选项，它们是针对服务器行为的本示例中用text/

4、plain，是为了邮件按照表单纯文本的形式发送，这样可使传送的内容更容易阅读。4. 完成设置后保存网页，按下F12键浏览网页测试表单，在表单中输入内容后，单击“提交”按钮，表单提示将以电子邮件的方式发送，如图13-5所示。单击“确定”按钮即可发送表单到邮件信箱中。5. 回到网页编辑窗口，选择菜单“窗口”“行为”命令，打开行为控制面板。说明 上面的表单是在完全输入后提交的，如果用户没有输入任何信息，单击“发送”按钮，表单也会发送，所以，为了阻止表单在没有输入任何信息的情况下发送，需要给表单添加检测功能，以保证表单的有效性。图13-5 表单以电子邮件的方式发送6. 将光标放置到表单范围内，单击行为

5、面板上的000加号按钮，在弹出的菜单中选择“检查表单”命令。如图13-6所示。7. 打开“检查表单”对话框，在“命名的栏位”文本框中，选中第1行“文本”name在表单theform（R）”，然后勾选“必需的辅选框”，在“可接受”选项中单击“任何东西”单选按钮。如图13-7所示。 图13-6 行为菜单 图13-7 检查表单设置8. 继续选择“命令的栏位”文本框中的第2行“phone”，选中“必需的”复选框，下面的“可接受”按钮选择“数字”。选中“命令的栏位”按钮文本框中“Email”行勾选“必需的”复选框，然后单击“可接受”选项中的“电子邮件地址”单选按钮，其他文本域的设置和“name”文本域完

6、全相同。设置完成后单击“确定”按钮，在行为面板上出现了onSubmit(提交表单)事件和“检查表单”动作，如图13-8所示9. 完成检测表单设置后，保存网页按下F12键浏览。如果用户在不填写表单内容时就单击“发送”按钮，则浏览器会提示需要输入的项目，如图13-9所示。 图13-8 添加的行为 图13-9 表单提示10. 单击插入面板上的“HTML”选项选择“水平线”按钮，在表单下面插入分隔线。11. 选中水平线，打开属性面板，在“水平线”下的文本框中输入名称line，“宽”文本框中输入600，“高”文本框中输入1，在“阴影”前的复选框中去掉“”，参数设置如图13-10所示。图13-10 水平线

7、属性设置12. 在水平线下面输入文字“友情连接”，设置文字居中对齐。13. 单击表单面板的“表单”按钮，在水平线下面插入表单域。14. 将光标放到表单范围内，单击表单面板的“跳转菜单”按钮，在表单域中插入跳转菜单。15. 弹出“插入跳转菜单”对话框，在“文本”的文本框中输入“新浪网”，在“选择时，转到URL”文本框中输入网址；接着单击按钮，在新浪网下面啬新项目，在“文本”文本框中输入“企业自助网”，在“选择时，转到URL”文本框中输入网址;接着以同样的方法啬其他友情网站设置。最后，在“菜单名称”中输入跳转达菜单的名称“友情连接”。完成连接设置后，单击“确定”按钮，参数设置如图13-11所示。

8、说明 跳转菜单是在菜单中选择一个项目后，打开该项目的网页，它的好处是在菜单很多的情况下节省网页空间，提高浏览效率。在“插入跳转菜单”对话框中，按钮是删除菜单项中的项目，上下箭头是调整菜单项目的上下顺序。在对话框下面的“选项”中，如果选择了“菜单之后插入前往按钮”选项，则在页面的跳转菜单右侧会加入一个000按钮，浏览选择菜单后，只有单 前往按钮，才会打开新的页面；如果选择“更改URL后选择第一个项目”，则在选择菜单后，跳转菜单会自动回到跳转菜单的第一个项目。 16. 设置完成跳转菜单之后，按Ctrl+S保存网页。按F12键浏览网页，效果如图13-12所示。 图13-11 跳转菜单设置 图13-12 跳转菜单实验作业模仿1. 打开实验13中制作完成的网页form.htm，另存为formnew.htm网页。2. 在页面中设置表单的属性，将提交表单的邮箱设置为自己的邮箱。3. 添加检测表单的行为。4. 在表单下面插入一个跳转菜单，项目为“”.“”等。创作1. 创建一个新网页，建立表单，插入表单元素。2. 设置表单属性和检查表单的动作行为。3. 设置表单提交按钮，以邮件形式发