网站设计与开发技术教程 第5章 表单.ppt

创建表单 表单的作用是可以与站点的访问者进行交互，或从他们那里收集信息，然后提交至服务器进行处理，表单可以包含允许用户进行交互的各种对象，如文本域、列表菜单、复选框和单选按钮等。表单中插入的主要是表单对象，表单在HTML代码中对应的标签是form，表单内所有的元素都包含在和之间。实例:创建表单一、建立一个表单的步骤如下：n（1）将光标至于文档中，选择“插入”“表单”“表单”命令，或将“常用”插入栏切换到“表单”插入栏 n（2）在“表单”插入栏中单击“表单”按钮 ，可以插入表单，在设计视图出现一个红色的虚线框。n（3）在“属性”面板中可以指定处理该表单的动态页或脚本的路径 n 表单属性面板主要有以下参数：n“表单名称”：设置表单的名称。n“动作”：设置处理表单的服务器端脚本。n“方法”：设置将表单数据发送到服务器的方法。选择“默认”或GET，表单数据将以GET方法发送，发送时把表单数据附加到URL中；选择POST，表单数据将以POST方法发送，发送时把表单数据嵌入到HTTP请求中。通常选择POST。n“MIME类型”：用来设置发送数据的MIME编码类型。“application/x-www-form-urlencode”通常对应POST方法。当“MIME类型”为“multipart/form-data”时，表示以二进制数据形式进行传递，一般当表单中包含多媒体数据时，必须设置为“multipart/form-data”。n“目标”：用来设置表单被处理后，反馈页面打开的方式。二、添加表单元素：一般在表格当中插入多个表单元素 n打开文件“formtest.asp”，首先在表单内插入11行2列表格，第一行合并单元格，并添加“用户信息”字样和其他文字信息。1文本域n文本域主要应用于单行信息的输入，如登录帐号、联系电话、邮政编码等。n选择“插入”“表单”“文本域”，即可在文档中插入一个文本域 n 在在“属性属性”面板中可以设置文本域的相应属性面板中可以设置文本域的相应属性（1）“文本域”：输入文本域的名称。（2）“字符宽度”：用于设置文本域的宽度。（3）“最多字符宽度”：设置单行文本域中最多可输入的字符数。（4）”文本域的类型”：包括单行、多行、密码3个选项。（5）“初始值”：指定在首次载入表单时文本域中显示的内容。n例：在第2行插入文本域，并设置属性2.单选按钮和单选按钮组n要在网页中插入单选按钮，选择“插入”“表单”“单选按钮”命令，插入单选按钮 n 在在“属性属性”面板中设置单选按钮的相应属性面板中设置单选按钮的相应属性（1）“单选按钮”：用来设置复选框的名称。（2）“选定值”：用来设定在复选框被选中时发送给服务器的值。（3）“初始状态”：用来设置复选框的初始状态是选中还是未选中。n也可以在网页中插入单选按钮组，选择“插入”“表单”“单选按钮组”命令，打开单选按钮组对话框 3复选框复选框提供多个选项，可以任意选择。在网页中插入复选框，选择“插入”“表单”“复选框”命令，即可插入复选框 n 在在“属性属性”面板中可以设置复选框的相应属性面板中可以设置复选框的相应属性（1）“复选框名称”：用来设置复选框的名称。（2）“选定值”：用来设定在复选框被选中时发送给服务器的值。（3）“初始状态”：用来设置复选框的初始状态是选中还是未选中。4列表/菜单n列表菜单的功能与复选框和单选框的功能差不多，都可以列举很多选项供浏览者选择（1）列表提供一个滚动条，通过拖动滚动条可以浏览很多项，并允许多重选择。（2）下拉菜单默认仅显示一项，该项为活动选项，用户单击打开菜单但只能选择其中的一项。n插入列表/菜单的方法如下：n（1）将光标置于页面中需要插入列表/菜单的位置。n（2）选择“插入”“表单”“列表/菜单”命令，则在光标所在位置插入列表/菜单，n 在“属性”面板中可以设置列表/菜单的相应属性“列表/菜单”文本框：设置所选列表的名称。“类别”选项：设置列表还是菜单的显示形式。n选择“菜单”项，则浏览者点击时会产生展开的下拉式菜单的效果。n选择“列表”项，则显示为一列可滚动的列表效果。“初始化时选定”列表框：可以选择列表或菜单在浏览器里显示的初始值。“列表值”按钮：单击该按钮可以打开“列表值”对话框。在“列表值”对话框中，可以添加选项或删除选项，也可以调整所选列表项目的位置。n如果以列表形式显示，在属性面板中的“类型”中选择“列表”，还可以设置以下两项：n（1）“高度”文本框：设置列表的高度，如输入3，则列表框在浏览器中显示为3个选项的高度，如果实际的项目数多于“高度”的项目数，那么列表菜单中的右侧将显示滚动条，通过滚动条显示。n（2）“选定范围”复选框：如果选择该复选框，则这个列表允许被多选，选择时要结合Shift或Ctrl键进行操作。如果取消该复选框选项，则这个列表只允许单选。n浏览器运行效果 5.多行文本域多行文本域可以提供一个较大的区域，供浏览者输入，用户可以设置访问者最多输入的行数以及文本区域的字符宽度。选择“插入”“表单”“文本区域”命令，即可插入多行文本域。（1）“行数”：设置所选文本域显示的行数，可输入数值。可用于输入较多内容的栏目，如反馈表、留言簿等。（2）“换行”：设置文本框中输入文本的换行方式，有以下四种方式：n“默认”：设置自动换行。当浏览者输入的内容超过文本区域的右边界时，文本换到下一行。当提交数据进行处理时，不设置这些数据自动换行。数据作为一个数据字符串进行提交。和“虚拟”项功能相同。n“关”：防止文本换行到下一行。当浏览者输入的内容超过多行文本域的右边界时，文本将向左侧滚动。按Enter键才能将插入点文本区域的下一行。n“虚拟”：设置自动换行。当浏览者输入的内容超过文本区域的右边界时，文本换到下一行。当提交数据进行处理时，不设置这些数据自动换行。数据作为一个数据字符串进行提交。n“实体”：设置自动换行。当提交数据进行处理时，也设置这些数据自动换行。6插入文件域n文件域可以允许用户在域的内部输入本地硬盘中的文件，如word文档、图片和程序等，然后通过表单将这些文件上传到服务器。文件域由一个文本框和一个“浏览”按钮组成。访问者可以通过表单的文件域来上传指定的文件。访问者可以在文件域的文本框中输入一个文件的路径，也可以单击“浏览”按钮来选择一个文件，当访问者提交表单时，这个文件就被上传。插入文件域的具体操作步骤如下：n（1）将光标置于页面中需要插入文件域的位置。n（2）选择“插入”“表单”“文件域”命令，即可在网页中插入一个文本域和一个“浏览”按钮 n 在属性面板中设置文件域属性。在属性面板中设置文件域属性。n选中按钮，打开属性面板可以设置文件域的属性，其中：“文件域名称”文本框用来设置所选文件域的名称；“字符宽度”文本框是设置文件域里文本框的宽度的；“最多字符数”文本框可以设置文件域里文本框可输入的最多字符数量。7插入跳转菜单 跳转菜单是超链接的一种形式，使用跳转菜单要比其他形式链接节省更多的页面空间。跳转菜单从菜单发展而来，浏览者单击并选择下列菜单项时会自动跳转到目标网页。n插入跳转菜单的步骤如下：（1）将光标置于要添加跳转菜单的位置。（2）选择“插入”“菜单”“跳转菜单”命令，打开跳转菜单对话框。（3）可以通过“+”、“-”按钮添加和删除菜单项。n在浏览器中运行 8按钮 要在网页中插入按钮，选择“插入”“表单”“按钮”命令，插入按钮 n 在属性面板中可以设置按钮的相应属性（1）“按钮名称”：在文本框中设置按钮的名称，如果想对按钮添加功能效果，则必须命名然后采用脚本语言来控制执行。（2）“值”：在值文本框中输入文本，为按钮上显示的文本内容，默认值为“提交”。（3）“动作”：分别是提交表单、重设表单、无。l“提交表单”表示单击该按钮将提交表单数据内容到服务器。l“重设表单”表示单击该按钮将清除表单中的所有内容。l“无”表示指定单击该按钮时不执行操作，可以通过添加按钮行为执行另外的特殊操作