网络技术基础Internet和网页设计第10-10章Frontpage课件

10.10 表单10.10 表单1 表单是网页浏览者和网站管理者之间沟通的桥梁，有了表单，网站不仅仅是信息提供者，同时也可以成为信息的收集者。表单包含两个部分，一部分是具体表现在网页上的表单域，如文本框、按钮、下拉菜单等，称为前端。另一部分是处理用户在表单中输入的数据，称为后端，它可以是服务器端的应用程序或客户端的脚本等。本章主要介绍如何在网页中构建网页表单域。10.10 表单 表单是网页浏览者和网站管理者之间沟通的桥梁，有2 表单是网页中一种重要的信息收集和交流工具。表单是由表单域组成的。表单域就是表单上用以搜集信息的对象。它包括单行文本框、滚动文本框、单选按钮、复选框、按钮等。10.10.1 创建表单 表单是网页中一种重要的信息收集和交流工具。10.31 创建表单 先打开“表单”工具栏。单击“插入”菜单下“表单”命令，用鼠标将“表单”级联菜单中顶部的蓝条拖曳到网页中，10.10.1 创建表单 1 创建表单 10.10.1 创建表单 4 创建表单的方法是先创建表单，然后在表单中插入各种表单域。10.10.1 创建表单 创建表单的方法是先创建表单，然后在表单中插入各种5将光标定位在要创建表单的位置，单击“插入”菜单下“表单”级联菜单中的“表单”命令，或单击“表单”工具栏中的“表单”按钮。即可插入一个表单（虚线框），10.10.1 创建表单 将光标定位在要创建表单的位置，单击“插入”菜单下“表单”级6将光标定位在表单中（即虚框中）要插入表单域的位置，单击“插入”菜单下“表单”级联菜单中的相应表单域命令或单击“表单”工具栏中的表单域按钮，即可插入表单域。插入表单域后，还需根据实际情况修改或设置表单域的属性。下面详细介绍插入各表单域的过程。10.10.1 创建表单 将光标定位在表单中（即虚框中）要插入表单域的位置，单击“插71.2.插入单行文本框插入单行文本框 单行文本框只允许输入一行文本，通常单行文本框只允许输入一行文本，通常用于输入内容较少的情况。用于输入内容较少的情况。右键单击插入的单行文本框，在快捷右键单击插入的单行文本框，在快捷菜单中选择菜单中选择“表单域属性表单域属性”，弹出，弹出“文文本框属性本框属性”对话框，对话框，10.10.1 创建表单 2.插入单行文本框 10.10.1 创建表单 8单击单击“表单表单”工工具栏中的具栏中的“单行文单行文本框本框”按钮按钮 ，即可插入单行文本即可插入单行文本框。框。右键单击插入的右键单击插入的单行文本框，在快单行文本框，在快捷菜单中选择捷菜单中选择“表表单域属性单域属性”，弹出，弹出“文本框属性文本框属性”对对话框，话框，10.10.1 创建表单 单击“表单”工具栏中的“单行文本框”按钮 ，即可插9“文本框属性”对话框中各选项功能如下：l名称：它是文本框的识别名，是程序对其进行处理时的唯一可识别的标记。要在表单中返回信息，就必须要知道该表单元素的名称。用户可以取一个便于记忆且有意义的名称。l初始值：用来设置打开网页时单行文本框显示的内容。10.10.1 创建表单“文本框属性”对话框中各选项功能如下：10.10.1 创建10l宽度：用来设置文本框的宽度。lTab键顺序：用来设置用户输入时用Tab键作为输入表单域的顺序。l密码域：设置该文本框是否是密码域。如是密码域，则输入的内容用“”代替，否则显示输入的内容。10.10.1 创建表单 宽度：用来设置文本框的宽度。10.10.1 创建表单 11根据需要设置完后，单击“验证有效性”按钮，弹出“文本框有效性验证”对话框。用户可通过此对话框，强制访问者按要求输入内容。10.10.1 创建表单 根据需要设置完后，单击“验证有效性”按钮，弹出“文本框有12“文本框有效性验证”对话框各选项功能如下：数据类型数据类型 在下拉列表中，共有四种类型l无限制：用户可以输入任何类型的数据，如数字、文本等。l文本：用户只能输入文本型数据。当选中此项时，文本格式被激活，用户选中有效的文本格式。10.10.1 创建表单“文本框有效性验证”对话框各选项功能如下：10.10.1 13l整数：用户只能输入整数数据。当选中此项时，数值格式被激活，用户选中有效的数值格式，用户需指定“分隔数值”的内容。l数字：用户只能输入数字数据。当选中此项时，数值格式被激活，用户选中有效的数字格式。用户需指定“分隔数值”的内容和“小数点”的形式。10.10.1 创建表单 整数：用户只能输入整数数据。当选中此项时，数值格式被激活，用14数据长度：用户可以决定访问者在文本框中输入数据的长度范围。数据值：主要指定访问者在文本框中输入数值型数据时的数值范围10.10.1 创建表单 数据长度：10.10.1 创建表单 15设置完毕后，单击“确定”按钮，单行文本框就设置好了。10.10.1 创建表单 设置完毕后，单击“确定”按钮，单行文本框就设置好了。10.161.3.滚动文本框2.当输入的文本内容较多时，如简历等，就需要使用滚动文本框。单击“表单”工具栏中的“滚动文本框”按钮 ，即可插入滚动文本框。右键单击插入的滚动文本框，在快捷菜单中选择“表单域属性”，弹出“滚动文本框属性”对话框.10.10.1 创建表单 3.滚动文本框10.10.1 创建表单 1710.10.1 创建表单 10.10.1 创建表单 18该对话框各选项功能是：行数：用来设置滚动文本框中显示的文本行数。其余选项功能与单行文本框选项功能相同。10.10.1 创建表单 该对话框各选项功能是：10.10.1 创建表单 19单击“验证有效性”按钮，弹出“文本框有效性验证”对话框。设置完毕后，单击“确定”按钮，滚动文本框就设置好了。10.10.1 创建表单 单击“验证有效性”按钮，弹出“文本框有效性验证”对话框。2010.10.1 创建表单1.4.复选框复选框 2.当允许访问者选择多项内容时，如兴趣爱好等，就需要使用复选框。表示被选中，表示未被选中。10.10.1 创建表单4.复选框 2110.10.1 创建表单单击“表单”工具栏中的“复选框”按钮 ，即可插入复选框。右键单击插入的复选框，在弹出的快捷菜单中选择“表单域属性”，弹出“复选框属性”对话框。10.10.1 创建表单单击“表单”工具栏中的“复选框”2210.10.1 创建表单l值：是指访问者在提交表单时传递给其他对象的返回值。如果选中了它，返回此值，否则返回空值。l初始状态：设置网页打开时，此复选框是否被选中。l其他选项功能与单行文本框相同。10.10.1 创建表单值：是指访问者在提交表单时传递给其2310.10.1 创建表单5.单选按钮 当允许访问者在多项内容只能选择其中一项时，如性别、学历等，就需要使用单选按钮。表示被选中，表示未被选中。10.10.1 创建表单5.单选按钮 2410.10.1 创建表单单击“表单”工具栏中的“单选”按钮 ，即可插入单选按钮。右键单击插入的单选按钮，在弹出的快捷菜单中选择“表单域属性”，弹出“单选按钮属性”对话框，10.10.1 创建表单单击“表单”工具栏中的“单选”按2510.10.1 创建表单 单选按钮的名称是组名称，即多个单选按钮的名称都是一样的。10.10.1 创建表单 单选按钮的名称是组名2610.10.1 创建表单1.6.下拉菜单 2.当允许访问者在多项内容只能选择其中一项，并且被选择的项目内容较多时，用单选按钮就不太方便，此时使用下拉菜单比较合适。10.10.1 创建表单6.下拉菜单 2710.10.1 创建表单单击“表单”工具栏中的“下拉菜单”按钮，即可插入下拉菜单。右键单击插入的下拉菜单，在快捷菜单中选择“表单域属性”，弹出“下拉框属性”对话框。10.10.1 创建表单单击“表单”工具栏中的“下拉菜单2810.10.1 创建表单l添加：用来添加下拉菜单项。l修改：用来修改下拉菜单项。l删除：用来删除下拉菜单项l上移、下移：将下拉菜单项顺序上移或下移。l高度：用来设置下拉菜单的高度，单位不是像素，而是“倍”如高度为“3”，则是默认值“1”的3倍。l允许多重选项：当选择“是”时，表示可以选择选项中的多项。10.10.1 创建表单添加：用来添加下拉菜单项。2910.10.1 创建表单单击“添加”按钮，弹出“添加选项”对话框。l选项：指定要添加的选项的名称。l指定值：当选中“指定值”复选框时，可在其下的输入框中为选项设定一个值。10.10.1 创建表单单击“添加”按钮，弹出“添加选项3010.10.1 创建表单在“添加选项”对话框中，输入选项的名称，选中“指定值”复选框，输入一个指定值。单击“确定”按钮，输入的选项就被添加到下拉列表中了。10.10.1 创建表单在“添加选项”对话框中，输入选项3110.10.1 创建表单7.按钮 表单的内容创建好了后，需要提交，如果添错了还需要修改，这都需要使用按钮来完成。当添加了表单之后，系统自动添加了两个按钮，一个是“提交”按钮，另一个是“重置”按钮。10.10.1 创建表单7.按钮 3210.10.1 创建表单单击“表单”工具栏中的按钮，即可插入按钮。右键单击按钮，在快捷菜单中选择“表单域属性”，弹出“按钮属性”对话框。10.10.1 创建表单单击“表单”工具栏中的按钮，即可3310.10.1 创建表单l值/标签：设置显示在按钮上的文本。l按钮类型：从中选择按钮的类型。l注意，“提交”和“重置”按钮是系统按钮，FrontPage已经设置好了这两个按钮的功能。10.10.1 创建表单值/标签：设置显示在按钮上的文本。3410.10.1 创建表单创建好的表单 10.10.1 创建表单创建好的表单 3510.10.2 使用向导创建表单网页 FrontPage为用户提供了一个表单网页向导，利用它用户可以很方便地创建表单网页。利用表单向导创建表单网页，能创建系统提供的几种固定格式的表单网页。如联系信息、帐号信息、产品信息、订购信息、个人信息等表单网页。10.10.2 使用向导创建表单网页 Fron3610.10.2 使用向导创建表单网页单击“文件”菜单下“新建”命令，在“新建”任务窗格中的“新建网页”选项中，选择“其他网页摸板”，打开“网页摸板”对话框。10.10.2 使用向导创建表单网页单击“文件”菜单下“3710.10.2 使用向导创建表单网页选择“表单网页向导”，单击“确定”按钮，弹出“表单网页向导”提示框，在此提示框中提示用户该向导的功能。单击“下一步”。进入“表单网页向导”的第一个对话框。10.10.2 使用向导创建表单网页选择“表单网页向导”3810.10.2 使用向导创建表单网页用户可以通过单击“添加”、“修改”、“删除”、“上移”、“下移”等创建或修改表单内容。10.10.2 使用向导创建表单网页用户可以通过单击“添加3910.10.2 使用向导创建表单网页 单击“表单网页向导”对话框中的“添加”按钮，进入“表单网页向导”的第二个提示框，在该对话框中的列表框中列出了供用户选择的表单样式。选择“联系信息”后，对话框在“说明”部分提示这种表单要求用户输入哪些内容，同时在“编辑此问题的提示”文本框中给出了默认的提示信息。10.10.2 使用向导创建表单网页 单击“表4010.10.2 使用向导创建表单网页如果用户认为此信息提示不符合要求可以进行修改。单击“下一步”，进入“表单网页向导”的第三个提示框。10.10.2 使用向导创建表单网页如果用户认为此信息提4110.10.2 使用向导创建表单网页 此提示框列出了表单中可以出现的表单域，根据需要选择表单域。单击“下一步”，回到“表单网页向导”的第一个提示框，不同的是在列表框中给出了“1请提供以下联系信息”，此信息会作为表单的提示信息出现在表单的上方。如果不满意此提示信息，选中它，单击“修改”按钮，可以进行修改，或单击“删除”按钮进行删除。10.10.2 使用向导创建表单网页 此提示4210.10.2 使用向导创建表单网页单击“下一步”，进入“表单网页向导”的第五个提示框。在此对话框中，用户可以定义表单的显示格式，选择后，单击“下一步”10.10.2 使用向导创建表单网页单击“下一步”，进4310.10.2 使用向导创建表单网页进入“表单网页向导”的第六个提示框。在此提示框中，用户可以设置访问者提交表单后结果保存的位置，设置好后，单击“下一步”。10.10.2 使用向导创建表单网页进入“表单网页向导4410.10.2 使用向导创建表单网页在此提示框中，用户可以设置访问者提交表单后结果保存的位置，设置好后，单击“下一步”，弹出“表单网页向导”结束提示框。单击“完成”按钮。10.10.2 使用向导创建表单网页在此提示框中，用户可4510.10.2 使用向导创建表单网页系统就会建立一个如图所示的创建的表单。10.10.2 使用向导创建表单网页系统就会建立一个如图所4610.10.2 使用向导创建表单网页适当地修改一下表单，比如添加一个标题，让按钮居中，添加背景色，可以美化表单网页。10.10.2 使用向导创建表单网页适当地修改一下表单，4710.10.3 保存表单表单创建好后，就需要设置提交表单的保存方式。右键单击创建好的表单，在快捷菜单中选择“表单属性”命令，弹出“表单属性”对话框。10.10.3 保存表单表单创建好后，就需要设置提交表单的4810.10.3 保存表单在“表单属性”对话框中选中“发送到”选项，输入要保存的文件名或电子邮件地址，系统默认保存到当前站点的_private文件夹下，如不符合要求，单击“浏览”按纽，更改表单保存的位置。表单还可以发送到数据库或其他处理程序中。由于涉及到数据库以及一些其他的网络服务，就不再介绍了。单击“确定”即可。10.10.3 保存表单在“表单属性”对话框中选中“发送49