人教版信息技术五下第12课制作表单网页ppt课件2

1、 12.1 交互式表单概述交互式表单概述 12.2 创建表单创建表单 12.2.1 创建表单的文本框创建表单的文本框 12.2.2 建立表单的单选按建立表单的单选按 钮和复选框钮和复选框 12.2.3 创建表单的列表框创建表单的列表框 12.2.4 创建表单的提交创建表单的提交 和重置按钮和重置按钮 12.2.5 其他表单域的应用其他表单域的应用 12.3 表单的应用实例表单的应用实例第第12章章 表单及其应用表单及其应用 表单（表单（formform）技术可以实现浏览者与技术可以实现浏览者与internetinternet服务服务器之间信息的交互传送，它是网络信息收集处理的一种重器之间信息的

2、交互传送，它是网络信息收集处理的一种重要的方式。要的方式。通过表单可以从网络的用户端收集信息，然后通过表单可以从网络的用户端收集信息，然后将收集来的信息经过服务器处理后再反馈给用户。将收集来的信息经过服务器处理后再反馈给用户。电子商务、网上调查，还是留言板、聊天室电子商务、网上调查，还是留言板、聊天室(1) 由由dreamweaver mx生成的表单的页面。生成的表单的页面。表单有两个重要的组成部分：表单有两个重要的组成部分： 12.1 交互式表单概述交互式表单概述(2) 用于处理浏览者在表单域中输入的信息的服务器用于处理浏览者在表单域中输入的信息的服务器端应用程序或客户端脚本。表单的应用必须

3、依赖于端应用程序或客户端脚本。表单的应用必须依赖于服务器端脚本才能真正发挥其功能。服务器端脚本才能真正发挥其功能。(1)将光标定位在要插入表单的位置上，选择将光标定位在要插入表单的位置上，选择【插入插入】|【表单表单】命令。命令。(2) 将光标定位在要插入表单的位置上，单击将光标定位在要插入表单的位置上，单击【插入插入】浮动面板组的浮动面板组的【表单表单】选项卡中的选项卡中的【表单表单】按钮。按钮。(3) 直接将直接将【插入插入】浮动面板组的浮动面板组的【表单表单】选项卡中的选项卡中的【表单表单】按钮按钮拖入拖入网页编辑窗口的表单插入区域。网页编辑窗口的表单插入区域。12.2 创建表单创建表单

4、 表单主要功能是接收输入的信息。浏览者输入的信息可表单主要功能是接收输入的信息。浏览者输入的信息可能多种多样，这些不同类别的信息可以由不同的表单域分别能多种多样，这些不同类别的信息可以由不同的表单域分别接收。因为每个表单域对应一个项目，所以每个表单域都要接收。因为每个表单域对应一个项目，所以每个表单域都要添加一个标识，提醒用户在这个表单域中应该输入的内容。添加一个标识，提醒用户在这个表单域中应该输入的内容。在网页中创建一个表单的方法有在网页中创建一个表单的方法有3种种: 用以上用以上3种方法创建的表单区域，在页面上用红色虚种方法创建的表单区域，在页面上用红色虚线框表示。红色虚线框确定了当前表单

5、的边框，这种红色线框表示。红色虚线框确定了当前表单的边框，这种红色边框的大小是不能被编辑的。当设计者在表单区域中插入边框的大小是不能被编辑的。当设计者在表单区域中插入对象后，表单的区域会对象后，表单的区域会自动调整其大小自动调整其大小。 在创建表单后，就可以在表单中插入各种表单域。在网在创建表单后，就可以在表单中插入各种表单域。在网页中插入表单域有两种方法：页中插入表单域有两种方法：利用网页编辑窗口的菜单命令，选择利用网页编辑窗口的菜单命令，选择【插入插入】|【表单对象表单对象】命令，在其级联菜单中选择相应的命令插入表单域；命令，在其级联菜单中选择相应的命令插入表单域；或直接单击或直接单击【插

6、入插入】浮动面板组的浮动面板组的【表单表单】选项卡选项卡，从中，从中选择要插入的表单域。选择要插入的表单域。文本字段：文本字段： 用来输入的文字或数字。插入的文本可显示为单用来输入的文字或数字。插入的文本可显示为单行、多行。行、多行。隐藏域：隐藏域： 表单的隐藏域在浏览时是看不到的，浏览者也不能表单的隐藏域在浏览时是看不到的，浏览者也不能执行该操作。利用隐藏域可以实现浏览器同服务器在后台不执行该操作。利用隐藏域可以实现浏览器同服务器在后台不公开地交换信息。公开地交换信息。复选框：复选框： 复选框可以单独使用，也可以成组使用，有选中与复选框可以单独使用，也可以成组使用，有选中与不选中两种状态。不

7、选中两种状态。单选按钮：单选按钮： 单选按钮常用于一组互斥选项。单选按钮常用于一组互斥选项。按钮：按钮： 表单中一般有两个按钮，一个是表单中一般有两个按钮，一个是【提交提交】按钮，单击按钮，单击此按钮可把浏览者输入的信息发送给服务器；此按钮可把浏览者输入的信息发送给服务器； 另一个是另一个是【重重置置】按钮，用来清除表单中的内容，把当前表单还原为初始按钮，用来清除表单中的内容，把当前表单还原为初始状态。状态。 列表按钮：列表按钮： 常用于提交一组可供浏览者进行选择的列表常用于提交一组可供浏览者进行选择的列表选项。其表现方式是，当单击它右侧的按钮时，弹出一个下拉选项。其表现方式是，当单击它右侧的

8、按钮时，弹出一个下拉式列表。浏览者可单击列表中某一选项。它在功能上与单选按式列表。浏览者可单击列表中某一选项。它在功能上与单选按钮相似，可以供浏览者在多个备选项中作一个选择，它占有网钮相似，可以供浏览者在多个备选项中作一个选择，它占有网页的面积比单选按钮小得多。页的面积比单选按钮小得多。图片域：图片域： 用于显示图片，也可用作确认按钮。用于显示图片，也可用作确认按钮。 跳转菜单：跳转菜单： 插入一个跳转菜单，每个菜单选项都可链接插入一个跳转菜单，每个菜单选项都可链接到一个网页或文件。到一个网页或文件。 文件域：文件域： 文件域有一个文本框和一个浏览按钮，可供浏文件域有一个文本框和一个浏览按钮，

9、可供浏览者从本地计算机上用表单向服务器上传文件。览者从本地计算机上用表单向服务器上传文件。文本字段文本字段隐藏域隐藏域复选框复选框单选按钮单选按钮按钮按钮列表按钮列表按钮图片域图片域跳转菜单跳转菜单文件域文件域下面介绍创建一个带有文本框的最基本的表单，通过创建下面介绍创建一个带有文本框的最基本的表单，通过创建这个简单的表单来了解表单创建的过程，操作步骤如下这个简单的表单来了解表单创建的过程，操作步骤如下:（1） 单击单击【插入插入】浮动面板组的浮动面板组的【表单表单】选项卡。选项卡。（2） 此时在此时在【插入插入】浮动面板组中显示浮动面板组中显示【表单表单】选项卡选项卡的各种对象。的各种对象。

10、（3） 在网页编辑窗口中，确定要插入的表单位置。在网页编辑窗口中，确定要插入的表单位置。（4） 单击单击【表单表单】选项卡中的选项卡中的【表单表单】按钮，便可在网按钮，便可在网页编辑区中生成一个表单。此时页编辑区中生成一个表单。此时表单被一个红色虚线框界表单被一个红色虚线框界定定。单击红色虚线框，可以选中表单区域。单击红色虚线框，可以选中表单区域。 在在【表单名称表单名称】输入指定表单的名称输入指定表单的名称,该名称必须惟一。该名称必须惟一。 在在【动作动作】文本框中可以输入一个文本框中可以输入一个url，用来指定处理表用来指定处理表单信息的服务器端程序。也可以输入单信息的服务器端程序。也可以

11、输入“mailto： 邮件地址邮件地址”，用用e-mail方式来发送表单中的数据。方式来发送表单中的数据。 在在【方法方法】下拉式列表框中指定一个处理表单数据的方法，下拉式列表框中指定一个处理表单数据的方法，其下拉列表中的各项意义如下所述其下拉列表中的各项意义如下所述: 表单的表单的【属性属性】面板中各属性的具体意义如下面板中各属性的具体意义如下:默认：默认： 使用浏览器的默认方式，一般为使用浏览器的默认方式，一般为get方式。方式。get： 表示把表单值附加到表示把表单值附加到url，并发送给服务器一个并发送给服务器一个get请求。请求。post： 以消息方式发送表单的值，并发送给服务器一个

12、以消息方式发送表单的值，并发送给服务器一个post请求。请求。163登陆登陆 在在【目标目标】下拉式列表中指定一个窗口方式，在该窗口中下拉式列表中指定一个窗口方式，在该窗口中显示调用程序所返回的数据。显示调用程序所返回的数据。 在在【mime类型类型】下拉式列表中可以指定对提交给服务器下拉式列表中可以指定对提交给服务器进行处理的数据使用进行处理的数据使用 mime 编码类型。编码类型。（5） 将光标插入到表单内，输入标识提示文字将光标插入到表单内，输入标识提示文字“姓名：姓名： ”。（6） 单击单击【表单表单】选项卡中的选项卡中的【文本字段文本字段】按钮，就会在表按钮，就会在表 单中生成一个文

13、本框表单域。单中生成一个文本框表单域。表单元素的提示性文字表单元素的提示性文字 访问键：设置表单元素的访问热访问键：设置表单元素的访问热键。可填入数字或字母键。可填入数字或字母访问表访问表单时，先按住单时，先按住alt键，然后再按该数键，然后再按该数字或字母键（注：不区分大小写）字或字母键（注：不区分大小写） 用按用按tab键的方式访问表键的方式访问表单元素，该处数值大小决定单元素，该处数值大小决定访问次序，索引值越小越先访问次序，索引值越小越先访问。访问。编辑编辑|首选参数首选参数辅助功能辅助功能12.2.1 建立表单的文本框建立表单的文本框 表单中的文本框是网页中用得比较多的一种表单元素，

14、表单中的文本框是网页中用得比较多的一种表单元素，网页中表单的文本框包括网页中表单的文本框包括3种形式种形式。【单行文本框单行文本框】是浏览者只能输入一行信息的文本区域。是浏览者只能输入一行信息的文本区域。【多行文本框多行文本框】可由网页设计者限定文本的行数，并决定可由网页设计者限定文本的行数，并决定是否显示滚动条，浏览者可在其中输入多行文本信息。是否显示滚动条，浏览者可在其中输入多行文本信息。【密码文本框密码文本框】是一种可以让浏览者输入密码信息的文本是一种可以让浏览者输入密码信息的文本框，输入的字符都以框，输入的字符都以“*”号显示在屏幕上。号显示在屏幕上。name regist.htmll

15、iuyan.html 在在【文本域文本域】文本框中输入当前表单域的名称，系统将以此名文本框中输入当前表单域的名称，系统将以此名 称保存文本框表单域中的内容。称保存文本框表单域中的内容。 在在【字符宽度字符宽度】文本框中输入当前表单域的宽度，即设置文本文本框中输入当前表单域的宽度，即设置文本 框中每行所允许输入的字符数目。框中每行所允许输入的字符数目。 在在【最大字符数最大字符数】文本框中设置文本框表单域中最多可允许输文本框中设置文本框表单域中最多可允许输 入的字符数。入的字符数。 在在【类型类型】区域中确定文本框的类型，区域中确定文本框的类型，3个选项选择分别是个选项选择分别是 【单行单行】、

16、【多行多行】、【密码密码】。 在在【初始值初始值】文本框中输入表单域的预先设置的值。文本框中输入表单域的预先设置的值。 在在【换行换行】中设置多行文本框表单域的换行方式。当选择中设置多行文本框表单域的换行方式。当选择 【类型类型】为为【多行多行】选项时，选项时，【换行换行】下拉式列表就被激活，下拉式列表就被激活， 可选择设置多行文本表单域中不同的换行方式。可选择设置多行文本表单域中不同的换行方式。12.2.2 建立表单的复选框和单选按钮建立表单的复选框和单选按钮1、复选框、复选框 网页表单中的复选框可以网页表单中的复选框可以单个单个出现，也可以出现，也可以成组成组出现，单个复选框可用于答案为是

17、或否的问题，成出现，单个复选框可用于答案为是或否的问题，成组的复选框可用于一个或多个选项选取的问题。一组的复选框可用于一个或多个选项选取的问题。一般情况下，般情况下，复选框组的标识文字放在复选框之前，复选框组的标识文字放在复选框之前，而每一个复选框的标识文字放到复选框的后面。而每一个复选框的标识文字放到复选框的后面。方法一：方法一：在在【复选框名称复选框名称】文本框中输入复选框的标识名；文本框中输入复选框的标识名； 在在【选定值选定值】文本框中输入数值文本框中输入数值1。方法二：方法二：在在【复选框名称复选框名称】文本框中输入复选框组的标识文字文本框中输入复选框组的标识文字 的缩写的缩写“关注

18、关注”； 在在【选定值选定值】文本框中输入的值为文本框中输入的值为 各个复选框的各个复选框的标识文字标识文字。 若在上述表单中选择的两个复选框分别是若在上述表单中选择的两个复选框分别是“篮球篮球”和和“足足球球” 。 第一种方法发送给服务器的信息是：关注第一种方法发送给服务器的信息是：关注= 1，2 第二种方法发送给服务器的信息是：关注第二种方法发送给服务器的信息是：关注=篮球，足球篮球，足球关注关注【复选框名称复选框名称】文本框中，给选中的复选框起一个名字，文本框中，给选中的复选框起一个名字，也就是选中该复选框后向服务器发送信息时所用的变量名。也就是选中该复选框后向服务器发送信息时所用的变量

19、名。【选定值选定值】文本框中：输入选中该复选框后要向服务器发文本框中：输入选中该复选框后要向服务器发送的内容。送的内容。【初始状态初始状态】选项组中，选中选项组中，选中【已勾选已勾选】单选按钮表示该单选按钮表示该复选框初始状态已被选中。选中复选框初始状态已被选中。选中【未选中未选中】单选按钮表示单选按钮表示该复选框初始状态为待选状态。该复选框初始状态为待选状态。复选框复选框【属性属性】面板设置的参数应按照服务器端程序的约面板设置的参数应按照服务器端程序的约定。定。选中该复选框，在复选框的选中该复选框，在复选框的【属性属性】面板中为其命名和赋值。面板中为其命名和赋值。1. 创建表单的单选按钮创建

20、表单的单选按钮 网页中表单的单选按钮一般都是成组出现的。在页面设网页中表单的单选按钮一般都是成组出现的。在页面设计时，既要为单选按钮组定义一个标识，也要为每一个单选计时，既要为单选按钮组定义一个标识，也要为每一个单选按钮定义一个标识。创建单选按钮的操作步骤如下。按钮定义一个标识。创建单选按钮的操作步骤如下。(1) 在表单的合适位置插入光标，并输入单选按钮组的标识在表单的合适位置插入光标，并输入单选按钮组的标识文字，例如文字，例如“性别性别”。(2) 然后单击然后单击【表单表单】选项卡中的按钮，并输入这个单选按选项卡中的按钮，并输入这个单选按钮的标识文字，例如钮的标识文字，例如“男男”。(3)

21、选中这个单选按钮，打开单选按钮的选中这个单选按钮，打开单选按钮的【属性属性】面板。面板。2、单选按钮、单选按钮(radiobutton.html)(4) 在在【单选按钮单选按钮】文本框中输入单选按钮的名字文本框中输入单选按钮的名字“性别性别”。 并在并在【选定值选定值】文本框中给单选按钮赋值文本框中给单选按钮赋值“男男”。(5) 并为该单选按钮设置初始状态，并为该单选按钮设置初始状态，【初始状态初始状态】为为【已勾选已勾选】。(6) 用同样的方法添加另一个标识为用同样的方法添加另一个标识为“女女”的单选按钮。的单选按钮。(7) 在在【单选按钮单选按钮】文本框中输入单选按钮的名字文本框中输入单选

22、按钮的名字“性别性别”。 并在选定值文本框中给单选按钮赋值并在选定值文本框中给单选按钮赋值“女女”。(8) 为该单选按钮设置初始状态，为该单选按钮设置初始状态，【初始状态初始状态】为为【未选中未选中】。12.2.3 创建表单的列表框创建表单的列表框1）在表单的合适位置上插入光标，然后输入下拉式列在表单的合适位置上插入光标，然后输入下拉式列表框的标识文字，例如表框的标识文字，例如“您的职业：您的职业： ”。2）单击单击【表单表单】选项卡中的按钮，此时表单的光标位选项卡中的按钮，此时表单的光标位置上显示一个很小的下拉式列表框。置上显示一个很小的下拉式列表框。3）选中新建的下拉式列表框，打开其选中新

23、建的下拉式列表框，打开其【属性属性】面板。面板。 其各项参数的意义如下：其各项参数的意义如下： 【列表列表/菜单菜单】文本框中：设置下拉式列表框的名称。在此文文本框中：设置下拉式列表框的名称。在此文本框中输入下拉式列表框的名称为本框中输入下拉式列表框的名称为work。【类型类型】选项组中：设置下拉式列表框的类型为选项组中：设置下拉式列表框的类型为【菜单菜单】。当下拉式列表框的类型设置为当下拉式列表框的类型设置为【列表列表】时，时，【高度高度】文本框被文本框被激活，在其中可设置该列表框可显示的行数。激活，在其中可设置该列表框可显示的行数。【选定范围选定范围】复选框：可使下拉式列表一次选择多个选项

24、。复选框：可使下拉式列表一次选择多个选项。也可通过按也可通过按ctrl键键，再单击来选择不相邻的任意多个选项，还可，再单击来选择不相邻的任意多个选项，还可通过按通过按shift键键来选中两次单击选项之间所有连续的选项。来选中两次单击选项之间所有连续的选项。【列表值列表值】按钮：可以进行列表按钮：可以进行列表值的设置。值的设置。【初始化时选定初始化时选定】列表：会显示列表：会显示通过列表值设置的列表项目文字。通过列表值设置的列表项目文字。p 按按tab键或单击键或单击【值值】按钮，在出现的文本框中输入选项按钮，在出现的文本框中输入选项的赋值。单击的赋值。单击“+”按钮，重复步骤按钮，重复步骤,

25、添加新的列表选项。添加新的列表选项。p 如果要删除某个选项，可以在如果要删除某个选项，可以在【列表值列表值】对话框中选中该对话框中选中该项，然后单击项，然后单击“-”按钮即可。可用列表值对话框中按钮调整按钮即可。可用列表值对话框中按钮调整下拉式列表的选项次序。下拉式列表的选项次序。 网页中的表单必须添加网页中的表单必须添加【提交提交】按钮，才能将浏览者填按钮，才能将浏览者填写的信息上传到服务器。在表单中创建写的信息上传到服务器。在表单中创建【提交提交】和和【重置重置】按钮的操作步骤如下：按钮的操作步骤如下：12.2.4 创建表单的提交和重置按钮创建表单的提交和重置按钮（1） 在表单合适的位置上

26、确定插入点，然后在表单合适的位置上确定插入点，然后2次单击次单击【表单表单】选项卡中的按钮。选项卡中的按钮。 （2） 在表单中就会生成在表单中就会生成2个按钮。个按钮。（3） 选中第选中第1个按钮，在按钮的个按钮，在按钮的【属性属性】面板中设置参数。面板中设置参数。在在【按钮名称按钮名称】文本框中输入文本框中输入submit； 在在【标签标签】文本框中文本框中输入该按钮上的文字输入该按钮上的文字“提交提交”； 在在【动作动作】选项组中选择选项组中选择【提交表单提交表单】单选按钮。单选按钮。（4） 选中第选中第2个按钮，在按钮的个按钮，在按钮的【属性属性】面板中设置参数。面板中设置参数。在在【按

27、钮名称按钮名称】文本框中输入文本框中输入reset； 在在【标签标签】文本框中输文本框中输入该按钮上的文字入该按钮上的文字“重置重置”； 在在【动作动作】选项组中选择选项组中选择【重重设表单设表单】单选按钮。单选按钮。在表单中，插入表单隐藏域的操作步骤如下：在表单中，插入表单隐藏域的操作步骤如下： （1） 在表单合适的位置上确定插入点，然后单击在表单合适的位置上确定插入点，然后单击【表单表单】选项卡中的按钮。选项卡中的按钮。（2） 在网页编辑窗口的插入点处可看到一个图标。在网页编辑窗口的插入点处可看到一个图标。（3） 双击图标，选中表单隐藏域，在表单隐藏域的双击图标，选中表单隐藏域，在表单隐藏

28、域的【属属性性】面板中可以设置表单隐藏域的属性。面板中可以设置表单隐藏域的属性。2. 表单隐藏域表单隐藏域 隐藏域是一种在浏览器上看不到的表单域，也不用对其隐藏域是一种在浏览器上看不到的表单域，也不用对其执行操作，利用隐藏域可以实现浏览器同服务器在后台交换执行操作，利用隐藏域可以实现浏览器同服务器在后台交换信息。由于它是不可见的，所以也不需要为它添加标识文字。信息。由于它是不可见的，所以也不需要为它添加标识文字。 利用表单文件域可以从本地计算机向服务器上传文利用表单文件域可以从本地计算机向服务器上传文件。表单文件域包括一个文本框和一个浏览按钮。在浏件。表单文件域包括一个文本框和一个浏览按钮。在

29、浏览器中单击览器中单击【浏览浏览】按钮，打开按钮，打开【选择文件选择文件】对话框，对话框，在对话框中选择相应的文件，然后单击表单中的在对话框中选择相应的文件，然后单击表单中的【提交提交】按钮便可将文件发送到服务器上。按钮便可将文件发送到服务器上。【值值】:文本框中输入文本框中输入表单隐藏域的初始值。表单隐藏域的初始值。表单隐藏域的名称表单隐藏域的名称3. 表单文件域表单文件域（1） 在表单合适的位置上确定插入点，然后单击在表单合适的位置上确定插入点，然后单击【表单表单】 选项卡中的按钮。选项卡中的按钮。（2） 在网页编辑窗口的插入点处可以创建一个文本框和在网页编辑窗口的插入点处可以创建一个文本

30、框和 【浏览浏览】按钮。按钮。（3） 选中表单文件域，在表单文件域的选中表单文件域，在表单文件域的【属性属性】面板面板中可以设置表单文件域的属性。中可以设置表单文件域的属性。表单文件域的表单文件域的【属性属性】面板的基本参数意义：面板的基本参数意义：在在【文件域名称文件域名称】文本框中输入表单文件域的名称。文本框中输入表单文件域的名称。在在【字符宽度字符宽度】文本框中输入文件域的最大字符宽度。文本框中输入文件域的最大字符宽度。在在【最多字符数最多字符数】文本框中输入文件域的最多字符数。文本框中输入文件域的最多字符数。 html表单是html页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。 在html里，我们可以定义表单，并且使表单与cgi或asp等服务器端的表单处理程序配合。我们在网页设计课程中不会涉及程序编制。表单表单(form)标记标记 表单是网页上的一个特定区域，是由一对表单是网页上的一个特定区域，是由一对元素定义的。元素定义的。元素属性元素属性action：用来定义表单处理程序（一个用来定义表单处理程序（一个asp、cgi等程序）的等程序）的位置位置(相对地址或绝对地址相