《网页设计与制作》课件第12章表单

学习目标：掌握表单的概念、用途掌握在网页中插入表单对象第12章表单主要内容12.1表单基础12.2表单的创建12.3实例—创建网站留言板12.1表单基础一般情况下，网页只能从服务器上读取数据并显示，如果要实现浏览者和网站之间的交互，就要建立表单。使用表单，可以帮助服务器从用户那里收集信息，服务器根据表单处理程序对这些数据进行处理。例如收集用户资料、获取用户订单。1. 表单的工作过程(1) 访问者在浏览有表单的页面时，可填写必要的信息，然后单击“提交”按钮。(2) 这些信息通过Internet传送到服务器上。(3) 服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。(4) 当数据完整无误后，服务器反馈一个输入完成信息。12.1表单基础2. 一个完整的表单包含两个部分(1) 一是在网页中进行描述的表单对象。这些信息通过Internet传送到服务器上。(2) 二是应用程序，它可以是服务器端的，也可以是客户端的，用于对客户信息进行分析处理。主要内容12.1表单基础12.2表单的创建

12.3实例—创建网站留言板

12.2表单的创建插入表单对象之前，先要插入表单，所有的表单对象放置在这个表单中。12.2.1插入表单下面介绍如何插入表单以及设置表单属性。1.插入表单将光标放置在要插入表单的位置，执行“插入”|“表单”|“表单”命令，或单击插入面板的“表单”按钮，如图所示。12.2表单的创建12.2.1插入表单插入表单后，在“设计”视图中，表单以红色的虚轮廓线指示。如果看不到这个轮廓线，执行“查看”|“可视化助理”|“不可见元素”命令。2.设置表单属性单击“表单”外框，选择表单。在属性面板中设置表单的各个属性，如图所示。表单ID：表单在网页中的标识，用于设置表单的名称，就可以使用脚本语言（如JavaScript或VBScript）引用或控制该表单。动作：设置处理表单数据的服务器端应用程序，可以直接输入应用程序路径，或者单击旁边的文件夹图标选择应用程序。12.2表单的创建12.2.1插入表单方法：选择将表单数据传输到服务器的方法。其下拉列表中有3个选项。默认、POST、GET。POST是系统的默认值，POST方法将在HTTP请求中嵌入表单数据。GET方法将值附加到请求该页面的URL中。默认方法使用浏览器的默认设置将表单数据发送到服务器。通常，默认方法为GET方法。不要使用GET方法发送长表单。URL的长度限制在8192个字符以内。如果发送的数据量太大，数据将被截断，从而会导致意外的或失败的处理结果。编码类型：用于指定表单数据提交给服务器进行处理的数据使用MIME编码类型。默认设置application/x-www-form-urlencode的通常与POST方法一起使用。如果要创建文件上传域，请指定multipart/formdataMIME类型。12.2表单的创建12.2.2插入表单对象创建表单之后，在表单中可以插入单行文本域、隐藏文本域、多行文本域、单选按钮、复选框、列表菜单、跳转菜单等多种表单对象。表单对象名称不能包含空格或特殊字符。可以使用字母数字字符和下划线（_）的任意组合。1.文本字段用户使用表单收集访问者的文本信息时，文本字段能够保存任何数量的字母字符，其操作步骤如下。光标移动到表单内，执行“插入”|“表单”|“文本域”命令，或单击表单面板中“文本字段”按钮，弹出“输入标签辅助功能属性”对话框，如图所示。输入标签文字，如用户名，单击【确定】按钮，即在表单中插入了“文本字段”对象，如图所示。12.2表单的创建12.2.2插入表单对象1.文本字段12.2表单的创建12.2.2插入表单对象1.文本字段单击“文本字段”对象，在属性面板中设置文本字段的属性。文本域：设置文本域名称，每个文本域必须有唯一的名称。字符宽度：指定文本域中最多可显示的字符数。此数字可以小于“最多字符数”，例如，如果“字符宽度”设置为20（默认值），而用户输入了100个字符，则在该文本域中只能看到其中的20个字符。虽然在该域中无法看到这些字符，但域对象可以识别它们，而且它们会被发送到服务器进行处理。12.2表单的创建12.2.2插入表单对象1.文本字段最多字符数：指定用户在单行文本域中最多可输入的字符数。如果将“最多字符数”框保留为空白，则用户可以输入任意数量的文本。如果用户的输入超过了最多字符数，表单则会发出警告声。类型：指定文本域为单行、多行还是密码域。当用户在密码文本域中键入时，输入内容显示为项目符号或星号。初始值：指定在首次加载表单时文本域中显示的值。类：可以将CSS样式应用于对象。行数：设置多行文本域的域高度。12.2表单的创建12.2.2插入表单对象2.文本区域文本区域也是用来输入文本信息的，其操作步骤如下。光标移动到表单内，执行“插入”|“表单”|“文本区域”命令，或单击表单面板中“文本区域”按钮，即在表单中插入了“文本区域”对象。当文本字段类型选择多行时，文本区域属性与文本字段属性相同，如图所示。12.2表单的创建12.2.2插入表单对象2.文本区域创建如图所示的文本域，具体步骤如下。(1) 选择“用户名：”后的文本字段，在属性面板中设置文本字段的属性，文本域名称：user，类型：单行。(2) 在第二行输入密码域的说明文字“密码：”，在文字后插入文本字段。在属性面板中设置文本字段的属性，文本域名称：passwords，类型：密码。(3) 同理在第三行输入文字“E-mail：”和文本字段。文本域名称：email，类型：单行。12.2表单的创建12.2.2插入表单对象3.复选框及复选框组按钮(1) 复选框复选框提供了多个选项供访问者选择，其操作步骤如下。光标移动到表单内，执行“插入”|“表单”|“复选框”命令，或单击表单面板中“复选框”按钮，即在表单中插入了“复选框”对象。单击“复选框”对象，在属性面板中设置复选框的属性，如图所示。12.2表单的创建12.2.2插入表单对象3.复选框及复选框组按钮(1) 复选框复选框名称：设置复选框的名称。选定值：设置在该复选框被选中时值。当用户提交这个表单时，这个值将被发送到服务器端得应用程序中。初始状态：确定在浏览器中加载表单时，该复选框是否处于选中状态。创建如图所示的复选框，具体步骤如下。12.2表单的创建12.2.2插入表单对象3.复选框及复选框组按钮创建复选框，具体步骤如下。(1) 输入复选框组的说明文字“爱好”。(2) 在爱好文字后插入复选框，同时在复选框后面输入说明性文字“体育”。(3) 单击“复选框”对象，在“属性”面板中设置复选框的属性，如图所示。(4) 同理添加“计算机”、“文学”2个复选框，复选框名称为“爱好”，选定值分别为“计算机”、“文学”。12.2表单的创建12.2.2插入表单对象3.复选框及复选框组按钮(2) 复选框组由于“复选框”通常一组有多个，因此Dreamweaver提供了“复选框组”的功能。其操作步骤如下。光标移动到表单内，执行“插入”|“表单”|“复选框组”命令，或单击表单面板中“复选框组”按钮，弹出“复选框组”对话框，在“复选框组”对话框中设置参数，如图所示，

单击【确定】按钮，即在表单

中插入了“复选框组”对象。12.2表单的创建12.2.2插入表单对象3.复选框及复选框组按钮(2) 复选框组名称：设置复选框组的名称。加号或减号按钮：向该组添加或删除一个复选框。向上或向下箭头：对这些复选框重新进行排序。标签：设置复选框组显示的文本标签。值：设置在该复选框的选定值。布局：使用换行符或表格来设置复选框组的布局。选择换行符选项，则使用换行符分开同一组复选框组，选择表格选项，则创建一个单列表格定位复选框。12.2表单的创建12.2.2插入表单对象4.单选按钮及单选组按钮(1) 单选按钮单选按钮是当用户单击某个按钮时，其它按钮会被取消，其操作步骤如下。光标移动到表单内，执行“插入”|“表单”|“单选按钮”命令，或单击表单面板中“单选按钮”按钮。在表单中插入了“单选按钮”对象。单击“单选按钮”对象，在属性面板中设置单选按钮的属性，如图所示。单选按钮：设置单选按钮的名称。选定值：设置在该单选按钮被选中时发送给服务器的值。12.2表单的创建12.2.2插入表单对象4.单选按钮及单选组按钮创建如图所示的单选按钮，具体步骤如下。(1) 输入单选按钮的说明文字“您的性别”。(2) 在“您的性别”文字后插入单选按钮，同时在单选后面输入说明性文字“男”。12.2表单的创建12.2.2插入表单对象4.单选按钮及单选组按钮创建单选按钮，具体步骤如下。(3) 单击“单选按钮”对象，在属性面板中设置单选按钮的属性，如图所示。(4) 同理添加“女”单选按钮，单选按钮名称为“sex”，选定值为“女”。12.2表单的创建12.2.2插入表单对象4.单选按钮及单选组按钮(2) 单选按钮组由于“单选按钮”通常一组有多个，因此Dreamweaver提供了“单选按钮组”的功能。其操作步骤如下。光标移动到表单内，执行“插入”|“表单”|“单选按钮组”命令，或单击表单面板中“单选按钮组”按钮，弹出“单选按钮组”对话框，在“单选按钮组”对话框中设置参数，

如图所示，单击【确定】按钮，

即在表单中插入了“单选按钮组”

对象。12.2表单的创建12.2.2插入表单对象4.单选按钮及单选组按钮(2) 单选按钮组名称：定义单选按钮组的名称。加号或减号按钮：向该组添加或删除一个复选框。向上或向下箭头：对这些复选框重新进行排序。标签：设置单选按钮组显示的文本标签。值：设置在该单选按钮组的选定值。布局：使用换行符或表格来设置单选按钮组的布局。选择换行符选项，则使用换行符分开同一组单选框组，选择表格选项，则创建一个单列表格定位单选框。12.2表单的创建12.2.2插入表单对象5.列表/菜单可以使用“列表/菜单”，实现在有限的空间显示多个内容项，或者要控制返回给服务器的值，其操作步骤如下。光标移动到表单内，执行“插入”|“表单”|“列表/菜单”命令，或单击表单面板中“列表/菜单”按钮，即在表单中插入了“列表/菜单”对象，单击“列表/菜单”对象，在属性面板中设置列表/菜单的属性，如图所示。12.2表单的创建12.2.2插入表单对象5.列表/菜单列表/菜单：设置“列表/菜单”的名称。类型：设置该表单对象是下拉菜单，还是滚动列表。高度：设置菜单中显示的项数（仅“列表”类型）。选定范围：指定用户是否可以从列表中选择多个项（仅“列表”类型）。初始化时选定：设置首次载入表单时，列表/菜单中默认选定的菜单项。列表值：单击“列表值”按钮，

弹出“列表值”对话框，可通过它

向表单菜单添加项，如右图所示。12.2表单的创建12.2.2插入表单对象5.列表/菜单创建如图所示的菜单，具体步骤如下。(1) 输入菜单的说明文字“您所在的城市：”，在文字后插入菜单。(2) 单击“列表/菜单”对象，在“属性”面板中单击“列表值”按钮，弹出“列表值”对话框，可通过它向表单菜单添加项。12.2表单的创建12.2.2插入表单对象6.跳转菜单在网站间建立链接、在网站页面间建立链接，跳转菜单的每个项目都链接到一个URL地址，其操作步骤如下。光标移动到表单内，执行“插入”|“表单”|“跳转菜单”命令，或单击表单面板中“跳转菜单”按钮。

弹出“插入跳转菜单”对话框，

如右图所示。在“插入跳转菜

单”对话框中设置参数，单击

【确定】按钮，即在表单中

插入了“跳转菜单”对象。12.2表单的创建12.2.2插入表单对象6.跳转菜单文本：设置该选项名称。选择时，转到URL：输入URL链接地址。打开URL于：选择该超级链接的目标框架。选项：选择“菜单之后插入前往按钮”，则添加一个提交按钮，单击该按钮后，页面跳转。12.2表单的创建12.2.2插入表单对象7.文件上传域文件上传域使用户可以选择其计算机上的文件，并将该文件上传到服务器。文件域的外观与其它文本域类似，只不过文件域还包含一个“浏览”按钮，其操作步骤如下。光标移动到表单内，执行“插入”|“表单”|“文件上传域”命令，或单击表单面板中“文件上传域”按钮，即在表单中插入了“文件上传域”对象，如图所示。12.2表单的创建12.2.2插入表单对象7.文件上传域单击“文件上传域”对象，在属性面板中设置文件上传域的属性，如图所示。文件域名称：设置文件域的名称。字符宽度：设置文件域中最多可显示的字符数。最多字符数：设置文件域中最多可容纳的字符数。如果用户通过浏览来定位文件，则文件名和路径可超过指定的“最多字符数”的值。12.2表单的创建12.2.2插入表单对象8.按钮对于HTML表单，按钮是必不可少的，使用表单按钮可以将表单中的数据提交到服务器上，在服务器上可以看到用户提交的内容，从而完成客户端与服务器之间的交互。其操作步骤如下。光标移动到表单内，执行“插入”|“表单”|“按钮”命令，或单击表单面板中“按钮”按钮，即在表单中插入了“按钮”对象，单击“按钮”对象，在属性面板中设置按钮的属性，如图所示。12.2表单的创建12.2.2插入表单对象8.按钮按钮名称：设置按钮名称。值：设置按钮上显示的文本。动作：确定单击该按钮时发生的动作。

“提交”和“重置”是两个保留名称，“提交”

通知表单将表单数据提交给处理应用程序

或脚本，而“重置”则将所有表单域重置为

其原始值。“无”指定单击该按钮时要执行

的动作。效果如右图所示。12.2表单的创建12.2.2插入表单对象9.图像域可以使用图像作为按钮图标。如果使用图像来执行任务而不是提交数据，则需要将某种行为附加到表单对象。其操作步骤如下。光标移动到表单内，执行“插入”|“表单”|“图像域”命令，或单击表单面板中“图像域”按钮，即在表单中插入了“图像域”对象，单击“图像域”对象，在属性面板中设置图像域的属性，如图所示。12.2表单的创建12.2.2插入表单对象9.图像域图像区域：设置按钮名称。源文件：设置选定图像的路径和文件名。替换：用于输入描述性文本，一旦图像在浏览器中加载失败，将显示这些文本。对齐：设置对象的对齐属性。编辑图像：启动默认的图像编辑器，并打开该图像文件以进行编辑。12.2表单的创建12.2.2插入表单对象10. 隐藏域可以使用图像作为按钮图标。如果使用图像来执行任务而不是提交数据，则需要将某种行为附加到表单对象。其操作步骤如下。光标移动到表单内，执行“插入”|“表单”|“隐藏域”命令，或单击表单面板中“图像域”按钮，即在表单中插入了“隐藏域”对象，单击“隐藏域”对象，在属性面板中设置隐藏域的属性，如图所示。值：为域指定一个值。该值将在提交表单时传递给服务器。隐藏域：设置该域的名称。12.2表单的创建12.2.3验证表单利用Dreamweaver中“检查表单”的内部行为，可以检查用户在填写表单对象的内容是否合适，当用户在单击提交按钮时，对表单对象行进检查。检查如图所示表单，具体步骤如下。12.2表单的创建12.2.3验证表单检查表单，具体步骤如下。(1) 执行“窗口”|“行为”命令，打开“行为”面板。(2) 选择该表单，在“行为”面板中单击按钮，然后从列表中选择“检查表单”行为，弹出“检查表单”对话框，如图所示。(3) input“user”，值：选择“必需的”复选框，可接受：任何东西。(4) input“passwords”，值：选择“必需的”复选框，可接受：任何东西。(5)input“email”，

值：选择“必需的”复选框，

可接受：电子邮件地址，单

击【确定】按钮。12.2表单的创建12.2.3验证表单检查表单，具体步骤如下。(6) 行为面板上事件为OnSubmit，保存网页，按F12键预览。单击“提交”按钮，出现提示，如图所示。主要内容12.1表单基础12.2表单的创建12.3实例—创建网站留言板

12.3实例—创建网站留言板创建如图所示的用户注册页面。

12.3实例—创建网站留言板创建如图所示的用户注册页面，具体步骤如下。(1) 打开Dreamweaver，创建一个空白网页。(2) 在空白网页上，插入表格。

12.3实例—创建网站留言板创建如图所示的用户注册页面，具体步骤如下。(3) 合并第1行单元格，插入图片为“bbs/images/banner2.jpg”。(4) 合并第3行单元格，并输入文字“用户注册帮助”。(5) 光标放置在第5行第1列的单元格中，单元格宽度：157。设置该单元格的背景图像为“bbs/images/beijing2.jpg”。在单元格中插入图片为“bbs/images/kfsw-1.jpg”。(6) 光标放置在第5行第3列的单元格中，插入图片为“bbs/images/youbiantiao.jpg”。(7) 合并第6行单元格，单元格背景色为#0099ff，合并第7行单元格，单元格背景色为#dcedf9输入文字，效果如图。

12.3实例—创建网站留言板创建如图所示的用户注册页面，具体步骤如下。(8) 最终效果如图所示。

12.3实例—创建网站留言板创建如图所示的用户注册页面，具体步骤如下。(9) 光标放置在第5行第2列的单元格中，插入表单。(10)光标放置表单中，插入表格，参数如图所示。

12.3实例—创建网站留言板创建如图所示的用户注册页面，具体步骤如下。(11)合并第1行单元格，输入“用户注册”文字。(12)在第2行第1列的单元格中输入文字“用户名：*”，在第2行第2列的单元格中执行“插入”|“表单”|“文本域”命令，或单击表单面板中“文本字段”按钮，插入文本字段。文本域：user，字符宽度：20，最多字符数：20，类型：单行。(13)在第3行第1列的单元格中，输入文字“密码：*”，文本域：password，字符宽度：20，最多字符数：20，类型：密码，在第3行第2列的单元格中插入文本字段。字符宽度：20，最多字符数：20，类型：密码。(14)在第4行第1列的单元格中输入文字“再次输入密码：*”，在第4行第2列的单元格中插入文本字段，文本域：password1，字符宽度：20，最多字符数：20，类型：密码。

12.3实例—创建网站留言板创建如图所示的用户注册页面，具体步骤如下。(15)在第5行第1列的单元格中，输入文字“性别：”，在第