HTML,JAVASCRIPT,JSP学习视频 (10)

1、Dreamweaver网页制作标准教程（CS4版）教师姓名：第10章使用表单本章简介：本章简介： 随着网络的普及，越来越多随着网络的普及，越来越多的人在网上拥有自己的个人网站。的人在网上拥有自己的个人网站。一般情况下，个人网站的设计者除一般情况下，个人网站的设计者除了想宣传自己外，还希望收到他人了想宣传自己外，还希望收到他人的反馈信息。表单为网站设计者提的反馈信息。表单为网站设计者提供了通过网络接收用户数据的平台，供了通过网络接收用户数据的平台，如注册会员页、网上订货页、检索如注册会员页、网上订货页、检索页等，都是通过表单来收集用户信页等，都是通过表单来收集用户信息。因此，表单是网站管理者与浏

2、息。因此，表单是网站管理者与浏览者间沟通的桥梁。览者间沟通的桥梁。课堂学习目标使用表单使用表单应用复选框和单选按钮应用复选框和单选按钮创建列表和菜单创建列表和菜单10.1 使用表单课堂案例课堂案例产品订单产品订单创建表单创建表单表单的属性表单的属性单行文本域单行文本域隐藏域隐藏域10.1.1课堂案例产品订单 使用使用“表单表单”按钮插入表单。使用按钮插入表单。使用“表格表格”按钮插入表格。使用按钮插入表格。使用“文本字段文本字段”按钮插入文本字段。使用按钮插入文本字段。使用“文本区域文本区域”按钮插入文本区按钮插入文本区域。使用域。使用“属性属性”面板设置表格、文本字段和文本区域的属性。面板设

3、置表格、文本字段和文本区域的属性。效果图10.1.2创建表单在文档中插入表单的具体操作步骤如下。在文档中插入表单的具体操作步骤如下。（1 1）在文档窗口中，将插入点放在希望插入表单的位置。）在文档窗口中，将插入点放在希望插入表单的位置。（2 2）启用）启用“表单表单”命令，文档窗口中出现一个红色的虚轮廓线用命令，文档窗口中出现一个红色的虚轮廓线用来指示表单域。来指示表单域。创建表单10.1.3表单的属性在文档窗口中选择表单，在文档窗口中选择表单，“属性属性”面板中出现表单属性。面板中出现表单属性。“属性”面板10.1.4单行文本域 通常使用表单的文本域来接收用户输入的信息，文本域包括单通常使用

4、表单的文本域来接收用户输入的信息，文本域包括单行文本域、多行文本域、密码文本域行文本域、多行文本域、密码文本域3 3种。一般情况下，当用户输入种。一般情况下，当用户输入较少的信息时，使用单行文本域接收；当用户输入较多的信息时，较少的信息时，使用单行文本域接收；当用户输入较多的信息时，使用多行文本域接收；当用户输入密码等保密信息时，使用密码文使用多行文本域接收；当用户输入密码等保密信息时，使用密码文本域接收。本域接收。插入单行文本域插入单行文本域插入多行文本域插入多行文本域插入密码文本域插入密码文本域文本域属性文本域属性10.1.5隐藏域 隐藏域在网页中不显示，只是将一些必要的信息存储并提交给隐

5、藏域在网页中不显示，只是将一些必要的信息存储并提交给服务器。插入隐藏域的操作类似于在高级语言中定义和初始化变量，服务器。插入隐藏域的操作类似于在高级语言中定义和初始化变量，对于初学者而言，不建议使用隐藏域。对于初学者而言，不建议使用隐藏域。 若要在表单域中插入隐藏域，先将光标放在表单轮廓内需要插若要在表单域中插入隐藏域，先将光标放在表单轮廓内需要插入隐藏域的位置，然后插入隐藏域。入隐藏域的位置，然后插入隐藏域。10.2 应用复选框和单选按钮课堂案例课堂案例留言板留言板单选按钮单选按钮单选按钮组单选按钮组复选框复选框10.2.1课堂案例留言板使用使用“单选单选”按钮插入单选按钮。使用按钮插入单选

6、按钮。使用“复选框复选框”按钮插入复按钮插入复选框。选框。效果图10.2.2单选按钮为了单选按钮的布局更加合理，通常采用逐个插入单选按钮的为了单选按钮的布局更加合理，通常采用逐个插入单选按钮的方式。若要在表单域中插入单选按钮，先将光标放在表单轮廓内需方式。若要在表单域中插入单选按钮，先将光标放在表单轮廓内需要插入单选按钮的位置，然后插入单选按钮。要插入单选按钮的位置，然后插入单选按钮。10.2.3单选按钮组先将光标放在表单轮廓内需要插入单选按钮组的位置，然后启用先将光标放在表单轮廓内需要插入单选按钮组的位置，然后启用“单选按钮组单选按钮组”对话框。对话框。启用启用“单选按钮组单选按钮组”对话框

7、有以下几种方法。对话框有以下几种方法。单击单击“插入插入”面板面板“表单表单”选项卡中的选项卡中的“单选按钮组单选按钮组”按钮。按钮。选择选择“插入插入 表单表单 单选按钮组单选按钮组”命令。命令。10.2.4复选框 为了复选框的布局更加合理，通常采用逐个插入复选框的方式。为了复选框的布局更加合理，通常采用逐个插入复选框的方式。若要在表单域中插入复选框，先将光标放在表单轮廓内需要插入复选若要在表单域中插入复选框，先将光标放在表单轮廓内需要插入复选框的位置，然后插入复选框。框的位置，然后插入复选框。10.3 创建列表和菜单课堂案例课堂案例会员注册表会员注册表创建列表和菜单创建列表和菜单创建跳转菜

8、单创建跳转菜单课堂案例课堂案例旅游用户登录网页旅游用户登录网页创建文件域创建文件域创建图像域创建图像域提交、无、重置按钮提交、无、重置按钮10.3.1课堂案例会员注册表使用使用“列表列表/ /菜单菜单”按钮插入列表。使用按钮插入列表。使用“属性属性”面板设置列表面板设置列表属性。属性。效果图10.3.2创建列表和菜单插入下拉菜单插入下拉菜单 若要在表单域中插入下拉菜单，先将光标放在表单轮廓内需要插若要在表单域中插入下拉菜单，先将光标放在表单轮廓内需要插入菜单的位置，然后插入下拉菜单。入菜单的位置，然后插入下拉菜单。插入滚动列表插入滚动列表 若要在表单域中插入滚动列表，先将光标放在表单轮廓内需要

9、插若要在表单域中插入滚动列表，先将光标放在表单轮廓内需要插入滚动列表的位置，然后插入滚动列表。入滚动列表的位置，然后插入滚动列表。10.3.3创建跳转菜单 利用跳转菜单，设计者可将某个网页的利用跳转菜单，设计者可将某个网页的URLURL地址与菜单列表中地址与菜单列表中的选项建立关联。当用户浏览网页时，只要从跳转菜单列表中选择的选项建立关联。当用户浏览网页时，只要从跳转菜单列表中选择一菜单项，就会打开相关联的网页。一菜单项，就会打开相关联的网页。在网页中插入跳转菜单的具体操作步骤如下。在网页中插入跳转菜单的具体操作步骤如下。（1 1）将光标放在表单轮廓内需要插入跳转菜单的位置。）将光标放在表单轮

10、廓内需要插入跳转菜单的位置。（2 2）启用）启用“插入跳转菜单插入跳转菜单”命令，调出命令，调出“插入跳转菜单插入跳转菜单”对话对话框，在对话框中进行设置，单击框，在对话框中进行设置，单击“确定确定”按钮完成设置。按钮完成设置。（3 3）保存文档，在）保存文档，在IEIE浏览器中单击浏览器中单击“前往前往”按钮，网页就可以按钮，网页就可以跳转到其关联的网页上。跳转到其关联的网页上。10.3.4课堂案例旅游用户登录网页使用使用“文本字段文本字段”按钮为用户名和密码插入文本字段。使用按钮为用户名和密码插入文本字段。使用“列表列表/ /菜单菜单”按钮制作出生日期效果。使用按钮制作出生日期效果。使用“

11、图像域图像域”按钮为网页按钮为网页添加登录按钮。添加登录按钮。效果图10.3.5创建文件域 网页中要实现上传文件的功能，需要在表单中插入文件域。文网页中要实现上传文件的功能，需要在表单中插入文件域。文件域的外观与其他文本域类似，只是文件域还包含一个件域的外观与其他文本域类似，只是文件域还包含一个“浏览浏览”按按钮。用户浏览时可以手动输入要上传的文件路径，也可以使用钮。用户浏览时可以手动输入要上传的文件路径，也可以使用“浏浏览览”按钮定位并选择该文件。按钮定位并选择该文件。 若要在表单域中插入文件域，则先将光标放在表单轮廓内需要若要在表单域中插入文件域，则先将光标放在表单轮廓内需要插入文件域的位

12、置，然后插入文件域。插入文件域的位置，然后插入文件域。10.3.6创建图像域 普通的按钮很不美观，为了设计需要，常使用图像代替按钮。通普通的按钮很不美观，为了设计需要，常使用图像代替按钮。通常使用图像按钮来提交数据。常使用图像按钮来提交数据。插入图像按钮的具体操作步骤如下。插入图像按钮的具体操作步骤如下。（1 1） 将光标放在表单轮廓内需要插入的位置。将光标放在表单轮廓内需要插入的位置。（2 2）启用）启用“选择图像源文件选择图像源文件”对话框，选择作为按钮的图像文件。对话框，选择作为按钮的图像文件。（3 3）在）在“属性属性”面板中出现图像按钮的属性，可以根据需要设置面板中出现图像按钮的属性

13、，可以根据需要设置该图像按钮的各项属性。该图像按钮的各项属性。（4 4）若要将某个）若要将某个 JavaScript JavaScript 行为附加到该按钮上，则选择该图行为附加到该按钮上，则选择该图像，然后在像，然后在“行为行为”控制面板中选择相应的行为。控制面板中选择相应的行为。（5 5）完成设置后保存并预览网页。）完成设置后保存并预览网页。10.3.7提交、无、重置按钮 按钮的作用是控制表单的操作。一般情况下，表单中设有提交按按钮的作用是控制表单的操作。一般情况下，表单中设有提交按钮、重置按钮和普通按钮钮、重置按钮和普通按钮3 3种按钮。提交按钮的作用是，将表单数据提种按钮。提交按钮的作用是，将表单数据提交到表单指定的处理程序中进行处理；重置按钮的作用是，将表单的交到表单指定的处理程序中进行处