《网页制作项目13使用表单制作注册网页》由会员分享，可在线阅读，更多相关《网页制作项目13使用表单制作注册网页（16页珍藏版）》请在金锄头文库上搜索。
1、主主讲讲：网页设计与制作Dreamweaver 8项目十三 使用表单制作注册网页任务一 创建表单任务二 验证表单项目十三：项目十三： 使用表单制作注册网使用表单制作注册网页页网 页 设 计 与 制 作Dreamweaver 8任务三 测试表单任务一小 结任务二实 训任务一 创建表单 本任务主要介绍插入表单及文本域、文本区域、单选按钮、复本任务主要介绍插入表单及文本域、文本区域、单选按钮、复选框、列表选框、列表/ /菜单、隐藏域、按钮及其属性设置的基本方法。菜单、隐藏域、按钮及其属性设置的基本方法。通过通过本任务的学习，掌握的内容主要有：本任务的学习，掌握的内容主要有： 1、表单的工作过程、表单
2、的工作过程 （1）访问者在浏览表单页面时，可填写必要的信息，然）访问者在浏览表单页面时，可填写必要的信息，然后进行后进行“提交提交”。 （2）这些信息通过）这些信息通过Internet传送到服务器上。传送到服务器上。 （3）服务器上专门的程序对这些数据进行处理，如果有）服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。错误会返回错误信息，并要求纠正错误。 （4）当数据完整无误后，服务器反馈一个输入完成信息。）当数据完整无误后，服务器反馈一个输入完成信息。Dreamweaver 8网 页 设 计 与 制 作项目十三：项目十三： 使用表单制作注册网使用表单制作注册网页
3、页创建表单操作动画创建表单操作动画任务一小 结任务二实 训 2、一个完整的表单包含两个部分、一个完整的表单包含两个部分 （1）一是在网页中进行描述的表单对象，主要用来收集信息。）一是在网页中进行描述的表单对象，主要用来收集信息。 （2）二是应用程序，它可以是服务器端的，也可以是客户端的，用）二是应用程序，它可以是服务器端的，也可以是客户端的，用于对客户信息进行分析处理。于对客户信息进行分析处理。 3、插入表单对象的方法、插入表单对象的方法 在在Dreamweaver 8中，表单输入类型称为表单对象。可以通过在主中，表单输入类型称为表单对象。可以通过在主菜单中选择菜单中选择【插入插入】【表单表单
4、】命令来插入表单对象或者在命令来插入表单对象或者在【插入插入】【表单表单】面板中单击相应的按钮插入表单对象。面板中单击相应的按钮插入表单对象。Dreamweaver 8网 页 设 计 与 制 作任务一 创建表单项目十三：项目十三： 使用表单制作注册网使用表单制作注册网页页任务一小 结任务二实 训 4 4、表单及表单对象属性设置的基本方法、表单及表单对象属性设置的基本方法 表单及文本域、文本区域、单选按钮、复选框、列表表单及文本域、文本区域、单选按钮、复选框、列表/ /菜单、菜单、隐藏域、按钮及其属性设置的基本方法。隐藏域、按钮及其属性设置的基本方法。Dreamweaver 8网 页 设 计 与
5、 制 作任务一 创建表单（1）文本域）文本域【属性属性】面板面板 项目十三：项目十三： 使用表单制作注册网使用表单制作注册网页页任务一小 结任务二实 训Dreamweaver 8网 页 设 计 与 制 作任务一 创建表单（2）单选按钮）单选按钮【属性属性】面板面板 单选按钮一般以两个或者两个以上的形式出现，它的作用是让用户单选按钮一般以两个或者两个以上的形式出现，它的作用是让用户在两个或者多个选项中选择一项。既然单选按钮的名称都是一样的，那在两个或者多个选项中选择一项。既然单选按钮的名称都是一样的，那么依靠什么来判断哪个按钮被选定呢？因为单选按钮是具有惟一性的，么依靠什么来判断哪个按钮被选定呢
6、？因为单选按钮是具有惟一性的，即多个单选按钮只能有一个被选定，所以即多个单选按钮只能有一个被选定，所以【选定值选定值】选项就是判断的惟选项就是判断的惟一依据。每个单选按钮的一依据。每个单选按钮的【选定值选定值】选项被设置为不同的数值，如性别选项被设置为不同的数值，如性别“男男”的单选按钮的的单选按钮的【选定值选定值】选项被设置为选项被设置为“1 1”，性别，性别“女女”的单选的单选按钮的按钮的【选定值选定值】选项被设置为选项被设置为“0 0”，那么当判断单选按钮为，那么当判断单选按钮为“1 1”时，时，说明性别为说明性别为“男男”，否则的话，性别为，否则的话，性别为“女女”。项目十三：项目十三
7、： 使用表单制作注册网使用表单制作注册网页页任务一小 结任务二实 训 当在当在【列表列表/菜单菜单】域的域的【属性属性】面板中将面板中将【类型类型】选项设选项设置为置为【菜单菜单】时，时，【高度高度】和和【选定范围选定范围】选项为不可选，在选项为不可选，在【初始化时选定初始化时选定】列表框中只能选择一个初始选项，文档窗口的下列表框中只能选择一个初始选项，文档窗口的下拉菜单中只显示一个选择的条目，而不是显示整个条目表。拉菜单中只显示一个选择的条目，而不是显示整个条目表。 将将【列表列表/菜单菜单】域的域的【属性属性】面板中的面板中的【类型类型】选项设置选项设置为为【列表列表】时，时，【高度高度】
8、选项和选项和【选定范围选定范围】选项为可选。其中选项为可选。其中的的【高度高度】选项是列表框中文档的高度，选项是列表框中文档的高度，“1”表示在列表中显表示在列表中显示一个选项。示一个选项。【选定范围选定范围】选项用于设置是否允许多项选择，勾选项用于设置是否允许多项选择，勾选表示允许，否则为不允许。选表示允许，否则为不允许。Dreamweaver 8网 页 设 计 与 制 作任务一 创建表单（3）列表）列表/菜单菜单【属性属性】面板面板 项目十三：项目十三： 使用表单制作注册网使用表单制作注册网页页任务一小 结任务二实 训 由于复选框在表单中一般都不单独出现，而是多个复选框同由于复选框在表单中
9、一般都不单独出现，而是多个复选框同时使用，因此其时使用，因此其【选定值选定值】就显得格外重要。另外，复选框的名就显得格外重要。另外，复选框的名称最好与其说明性文字发生联系，这样在表单脚本程序的编制中称最好与其说明性文字发生联系，这样在表单脚本程序的编制中将会节省许多时间和精力。例如，代表将会节省许多时间和精力。例如，代表“小说小说”的的【复选框名称复选框名称】可以是可以是“novelnovel”，【选定值选定值】设为设为“Y Y”；“上网上网”的复选框的复选框名称可以是名称可以是“InternetInternet”，【选定值选定值】设为设为“Y Y”等。由于复选等。由于复选框的框的【复选框名称
10、复选框名称】不同，不同，【选定值选定值】可以取相同的值。可以取相同的值。Dreamweaver 8网 页 设 计 与 制 作任务一 创建表单（4）复选框）复选框【属性属性】面板面板 项目十三：项目十三： 使用表单制作注册网使用表单制作注册网页页任务一小 结任务二实 训Dreamweaver 8网 页 设 计 与 制 作任务一 创建表单（5）文本区域）文本区域【属性属性】面板面板 项目十三：项目十三： 使用表单制作注册网使用表单制作注册网页页任务一小 结任务二实 训 通常用隐藏域来传递一些特殊的信息，如注册时间、认证号等，通常用隐藏域来传递一些特殊的信息，如注册时间、认证号等，这些都需要使用这些
11、都需要使用JavaScript、ASP等源代码来编写，隐藏域在网页中等源代码来编写，隐藏域在网页中一般不显现。一般不显现。 隐藏域的隐藏域的【值值】文本框内是一段文本框内是一段ASP代码，其中代码，其中“”是是ASP代码的开始、结束标志，而代码的开始、结束标志，而“Date()”表示当前的系统日期表示当前的系统日期（2007-10-30），如果换成），如果换成“Now()”则表示当前的系统日期和时间则表示当前的系统日期和时间（2007-10-30 10:16:44），而），而“Time()”则表示当前的系统时间则表示当前的系统时间（10:16:44）。）。Dreamweaver 8网 页 设
12、计 与 制 作任务一 创建表单（6）隐藏域）隐藏域【属性属性】面板面板 项目十三：项目十三： 使用表单制作注册网使用表单制作注册网页页任务一小 结任务二实 训 按钮的作用在于发送信息、执行脚本程序、重置表单，这按钮的作用在于发送信息、执行脚本程序、重置表单，这是表单页收尾的工作。是表单页收尾的工作。 在主菜单中选择在主菜单中选择【插入插入】【表单表单】【图像域图像域】命令，命令，可以插入一个图像域。图像域的作用就是用一幅图像来替代按可以插入一个图像域。图像域的作用就是用一幅图像来替代按钮的工作，用它来发送表单或者执行脚本程序。钮的工作，用它来发送表单或者执行脚本程序。Dreamweaver 8
13、网 页 设 计 与 制 作任务一 创建表单（7）按钮）按钮【属性属性】面板面板 项目十三：项目十三： 使用表单制作注册网使用表单制作注册网页页任务一小 结任务二实 训 表单在提交到服务器端以前，必须进行验证，这是非表单在提交到服务器端以前，必须进行验证，这是非常重要的一步，如果忽略了这一步，那么很可能将错误的信常重要的一步，如果忽略了这一步，那么很可能将错误的信息直接发送到服务器端，不但浪费时间，而且也有一定的危息直接发送到服务器端，不但浪费时间，而且也有一定的危险性，最起码要做到的是防止空白表单被提交至服务器端。险性，最起码要做到的是防止空白表单被提交至服务器端。 通过本任务的学习，主要掌握
14、表单验证的方法：通过本任务的学习，主要掌握表单验证的方法： （1）通过）通过【检查表单检查表单】对话框的设置进行验证对话框的设置进行验证Dreamweaver 8网 页 设 计 与 制 作任务二 验证表单项目十三：项目十三： 使用表单制作注册网使用表单制作注册网页页验证表单操作动画验证表单操作动画任务一小 结任务二实 训 （2 2）通过简单的）通过简单的JavaScriptJavaScript来验证来验证 打开打开【标签编辑器标签编辑器】对话框，在对话框中选中对话框，在对话框中选中“onClickonClick”事件，然后在右侧的文本框中输入代码。事件，然后在右侧的文本框中输入代码。Dream
15、weaver 8网 页 设 计 与 制 作任务二 验证表单项目十三：项目十三： 使用表单制作注册网使用表单制作注册网页页任务一小 结任务二实 训实训 制作在线调查表单网页 本本项目着重介目着重介绍了插入表了插入表单对象及其属性象及其属性设置以及置以及验证表表单和和测试表表单的基本方法。的基本方法。实训将创建如图所示表单网页，以实训将创建如图所示表单网页，以进一步巩固进一步巩固表表单网网页的相关知的相关知识。 Dreamweaver 8网 页 设 计 与 制 作项目十三：项目十三： 使用表单制作注册网使用表单制作注册网页页实训结果文件见实训结果文件见“项目结果项目结果”文件夹中的文件夹中的“sh
16、ixun.htm”。【实训目的实训目的】l进一步巩固插入常用表单对象的方法。进一步巩固插入常用表单对象的方法。 l进一步巩固表单及表单对象属性的设置方法。进一步巩固表单及表单对象属性的设置方法。 l进一步巩固使用进一步巩固使用“检查表单检查表单”行为验证表单的基本方法。行为验证表单的基本方法。 任务一小 结任务二实 训实训 制作在线调查表单网页Dreamweaver 8网 页 设 计 与 制 作项目十三：项目十三： 使用表单制作注册网使用表单制作注册网页页任务一小 结任务二实 训小结 本项目通过制作用户注册网页介绍了制作表本项目通过制作用户注册网页介绍了制作表单网页的基本知识，包括插入表单对象及其属性设单网页的基本知识，包括插入表单对象及其属性设置、利用置、利用“检查表单检查表单”行为验证表单的方法以及测行为验证表单的方法以及测试表单的方法等。希望通过本项目的学习，能使读试表单的方法等。希望通过本项目的学习，能使读者对各个表单对象的作用有一个清楚的认识，并能者对各个表单对象的作用有一个清楚的认识，并能够在操作中熟练运用。够在操作中熟练运用。Dreamweaver 8网 页 设 计 与 制 作项目十三：项目十三： 使用表单制作注册网使用表单制作注册网页页任务一小 结任务二实 训
