CH8网页表单的处理ppt课件

1、通过本章学习，应该掌握以下内容：通过本章学习，应该掌握以下内容：认识网页表单认识网页表单利用利用Dreamweaver 8创建表单的方法创建表单的方法利用利用Dreamweaver 8编辑表单的方法编辑表单的方法利用利用HTML和和FrontPage 2019处理网页表处理网页表单的方法单的方法 表单是用来收集浏览者的用户名、密码、表单是用来收集浏览者的用户名、密码、E-mail地地址、个人爱好和联系地址等用户信息的输入区域集合。址、个人爱好和联系地址等用户信息的输入区域集合。浏览者填表单的方式一般是输入文本、选择单选按钮浏览者填表单的方式一般是输入文本、选择单选按钮与复选框，以及从下拉框中选

2、择选项等。在填好表单与复选框，以及从下拉框中选择选项等。在填好表单后，浏览者应该提交所输入的数据，这些数据会根据后，浏览者应该提交所输入的数据，这些数据会根据网页设计者设置的表单处理程序，以各种不同的方式网页设计者设置的表单处理程序，以各种不同的方式进行处理。进行处理。8.1.1 创建表单创建表单 1表单概述表单概述 为了制作好复杂的表单网页，为了制作好复杂的表单网页，FrontPage 2019提供提供了文本框、文本区、单选按钮、复选框、下拉框、提了文本框、文本区、单选按钮、复选框、下拉框、提交按钮和重置按钮等丰富的表单域。这些表单域具有交按钮和重置按钮等丰富的表单域。这些表单域具有以下各自

3、不同的功能：以下各自不同的功能： （1文本框：文本框用来输入比较简单的信息，如文本框：文本框用来输入比较简单的信息，如上图网页中的上图网页中的“用户名用户名”、“密码密码”、“生日等。生日等。 （2文本区：如果需要输入建议、需求等大段文字，文本区：如果需要输入建议、需求等大段文字，使用文本框就显得力不从心了，这时通常使用带有滚使用文本框就显得力不从心了，这时通常使用带有滚动条的文本区。动条的文本区。 （3单选按钮：单选按钮常用于表示唯一的选择结单选按钮：单选按钮常用于表示唯一的选择结果。果。 （4复选框：复选框常用来表示许多项可以同时选复选框：复选框常用来表示许多项可以同时选中的事物，比如个人

4、爱好、所学科目和选购的产品种中的事物，比如个人爱好、所学科目和选购的产品种类等。类等。 （5下拉列表框：当需要选择职业、文化程度等事下拉列表框：当需要选择职业、文化程度等事项时，除了文本区以外，还可以考虑使用下拉列表框。项时，除了文本区以外，还可以考虑使用下拉列表框。 （6提交按钮和重置按钮：当用户完成了表单的填提交按钮和重置按钮：当用户完成了表单的填写后，如果需要提交数据，则可以单击表单中的提交写后，如果需要提交数据，则可以单击表单中的提交按钮；如果希望恢复表单为填写前的状态，以便重新按钮；如果希望恢复表单为填写前的状态，以便重新填写，则可以单击重置按钮填写，则可以单击重置按钮 （1使用向导

5、和模板创建表单使用向导和模板创建表单 应用向导创建表单方法比较简单，只要按照向导应用向导创建表单方法比较简单，只要按照向导提示一步一步地执行就可以，但这样创建的表单不一提示一步一步地执行就可以，但这样创建的表单不一定完全令自己满意，还需进行大量的修改工作。定完全令自己满意，还需进行大量的修改工作。 （2手动创建表单手动创建表单 手动插入表单时，手动插入表单时，FrontPage 2019会插入一个带会插入一个带虚线边框的矩形区域，其中包含一个虚线边框的矩形区域，其中包含一个“提交按钮和提交按钮和一个一个“重置按钮。在此矩形区域内，可以添加文本重置按钮。在此矩形区域内，可以添加文本框、选项按钮、

6、复选框和下拉列表框等。框、选项按钮、复选框和下拉列表框等。 2创建表单创建表单 1. 修改表单修改表单 删除不必要的域删除不必要的域 如果是手动创建的表单，删除不必要的域的方法很如果是手动创建的表单，删除不必要的域的方法很简单，只需将选中需要删除的域，单击简单，只需将选中需要删除的域，单击Delete键即可。键即可。 修改文本框的宽度修改文本框的宽度 在在FrontPage 2019中修改文本框的宽度有以下两种中修改文本框的宽度有以下两种方法：方法： 8.1.2 编辑表单编辑表单 鼠标拖动法鼠标拖动法 用鼠标选中要修改文本框，选中状态用鼠标选中要修改文本框，选中状态下的文本框被下的文本框被6个

7、小方框包围起来，拖动其中的小方个小方框包围起来，拖动其中的小方框就可以改变文本框的宽度。框就可以改变文本框的宽度。 精确设置法精确设置法 用鼠标选中要修改文本框，然后单击用鼠标选中要修改文本框，然后单击右键，从弹出的快捷菜单中选择右键，从弹出的快捷菜单中选择“表单域属性命表单域属性命令，弹出令，弹出“文本框属性对话框。在文本框属性对话框。在“宽度文本宽度文本框中输入精确数值，然后单击框中输入精确数值，然后单击“确定按钮。确定按钮。 2. 设置背景颜色设置背景颜色 因为表单是以表格的形式创建的，所以可以通因为表单是以表格的形式创建的，所以可以通过设置表格的背景颜色来设置表单的背景颜色。过设置表格

8、的背景颜色来设置表单的背景颜色。 3. 设置光标顺序设置光标顺序 在填写表单时，使用键盘上的在填写表单时，使用键盘上的“Tab键，键，就可以在各项之间进行切换。这里的就可以在各项之间进行切换。这里的“Tab键顺序就是给各个表单域编上序号，访问键顺序就是给各个表单域编上序号，访问者在按下者在按下“Tab键时，光标的插入点就会键时，光标的插入点就会按着按着“Tab键顺序移动。而键顺序移动。而“Tab键顺序键顺序是在各属性对话框中设置的，是在各属性对话框中设置的， 4. 设置密码域属性设置密码域属性 在填写表单时，填写的某些内容会以在填写表单时，填写的某些内容会以“*”表示，这是为了防止输入的某些重

9、要内容被表示，这是为了防止输入的某些重要内容被其他人偷看。要想为表单加上此功能，只要其他人偷看。要想为表单加上此功能，只要在在“文本框属性文本框属性对话框里的对话框里的“密码域密码域选选项组中选择项组中选择“是是按钮即可。按钮即可。 访问者填写完表单内容后发送出去，发送后的表访问者填写完表单内容后发送出去，发送后的表单结果要存放在某一位置。表单结果存放的位置是由单结果要存放在某一位置。表单结果存放的位置是由表单属性指定的。表单属性指定的。8.1.3 保存表单结果保存表单结果 利用利用HTML也可以创建表单，这样创建的表单通也可以创建表单，这样创建的表单通常由两类元素构成，一是普通的页面元素，例

10、如表格、常由两类元素构成，一是普通的页面元素，例如表格、图像、文字等，二是用于接收信息的特定页面元素，图像、文字等，二是用于接收信息的特定页面元素，也就是所谓的表单控件。控件是表单中用于接收用户也就是所谓的表单控件。控件是表单中用于接收用户输入或处理的元素，典型的控件有：文本框、复选框、输入或处理的元素，典型的控件有：文本框、复选框、单选框、选项菜单等。单选框、选项菜单等。 8.2 处理网页表单的其他方法处理网页表单的其他方法 8.2.1 利用利用HTML处理表单处理表单 HTML中表单标记符为中表单标记符为FORM，其主要作用是设，其主要作用是设定表单的起止位置，并指定处理表单数据程序的定表

11、单的起止位置，并指定处理表单数据程序的URL地址。其基本语法结构如下：地址。其基本语法结构如下： FORM action= URL method= GET/POST 其中其中Action用于设定处理表单数据程序用于设定处理表单数据程序URL的地址。的地址。 method指定数据传送到服务器的方式。有两种主要的指定数据传送到服务器的方式。有两种主要的方式，当方式，当method=GET时，将输入数据加在时，将输入数据加在action指定的地址后面传送到服务器；当指定的地址后面传送到服务器；当method=POST时则将输入数据按照时则将输入数据按照HTTP输送协议中的输送协议中的POST传输传输

12、方式传送到服务器。方式传送到服务器。 1. 表单标记符表单标记符 INPUT是表单输入标记符，在表单创建中使用频是表单输入标记符，在表单创建中使用频繁，大部分表单内容需要用到此标记符。其语法如下：繁，大部分表单内容需要用到此标记符。其语法如下：各项的意义是：各项的意义是：type：text表示输入单行文本。表示输入单行文本。type：textarea表示输入多行文本。表示输入多行文本。type：password表示输入数据为密码，用表示输入数据为密码，用“*”表示。表示。2. 表单输入标记符表单输入标记符 type：checkbox表示复选框。表示复选框。type：radio表示单选框。表示单

13、选框。type：submit表示提交按钮，数据将被送到服务器。表示提交按钮，数据将被送到服务器。type：reset表示清除表单数据，以利于重新输入。表示清除表单数据，以利于重新输入。type：file表示插入一个文件。表示插入一个文件。type：hidden表示隐藏按钮。表示隐藏按钮。type：image表示插入一个图像。表示插入一个图像。type：button表示普通按钮。表示普通按钮。 创建单行文本框的基本语法如下：创建单行文本框的基本语法如下： 其中其中name属性指定了控件的名称；属性指定了控件的名称；value属性指定了属性指定了控件的初始值；控件的初始值；size属性指定了文本框

14、的宽度；属性指定了文本框的宽度；maxlength属性指定了在文本框中可以输入的最长文属性指定了在文本框中可以输入的最长文本数。本数。 3. 控件定义方法控件定义方法 （1文本框和口令框文本框和口令框 创建复选框和单选框也是使用创建复选框和单选框也是使用INPUT标记符，语标记符，语法分别如下：法分别如下： type属性为属性为checkbox，说明该控件是一个复选框，说明该控件是一个复选框，type属性为属性为radio，说明该控件是一个单选框；，说明该控件是一个单选框；name属性和属性和value属性的值都是程序处理表单数据属性的值都是程序处理表单数据时需要的；时需要的；checked属

15、性是可选的，属性是可选的， （2复选框与单选按钮复选框与单选按钮 创建提交按钮、重置按钮和自定义按钮的语法分别创建提交按钮、重置按钮和自定义按钮的语法分别如下：如下： （3按钮按钮 利用利用HTML创建多行文本框应使用创建多行文本框应使用TEXTAREA标标记符，其使用格式如下：记符，其使用格式如下：默认多行文默认多行文本本 其中其中name属性用于指定控件名；属性用于指定控件名；rows属性用于设置多属性用于设置多行文本框的行数用户的输入可以多于这个行数，超行文本框的行数用户的输入可以多于这个行数，超过可视区域的内容可以用滚动条进行控制操作）；过可视区域的内容可以用滚动条进行控制操作）；co

16、ls属性用于设置多行文本框的列数属性用于设置多行文本框的列数 。（4多行文本框文本区）多行文本框文本区） 要创建选项菜单应使用要创建选项菜单应使用SELECT标记符，并将每标记符，并将每个可独立选取的项用一个个可独立选取的项用一个OPTION标记符标出来。创标记符标出来。创建选项菜单的语法如下：建选项菜单的语法如下：选项选项1内容内容选项选项2内容内容（5选项菜单选项菜单 其中，其中，SELECTSELECT标记符的标记符的namename属性用于指定控件名；属性用于指定控件名；sizesize属性用于指定选项菜单中一次显示多少行默认属性用于指定选项菜单中一次显示多少行默认值为值为1 1）；）

17、；multiplemultiple属性用于设置允许用户选择多个属性用于设置允许用户选择多个选项如果不设置此属性，则仅允许选择一个选项）。选项如果不设置此属性，则仅允许选择一个选项）。OPTIONOPTION标记符的标记符的labellabel属性可以为选项指定一个标记属性可以为选项指定一个标记符，当使用此属性时，浏览器将采用此属性的值而非符，当使用此属性时，浏览器将采用此属性的值而非OPTIONOPTION标记符中的内容作为选项标记符；标记符中的内容作为选项标记符；selected selected 属性用于设置当前选项为预先选中状态；属性用于设置当前选项为预先选中状态；valuevalue属

18、性属性指定了控件的初始值。指定了控件的初始值。 Dreamweaver 8提供了大量的表单元素。将插入提供了大量的表单元素。将插入面板切换到面板切换到“表单类下，翻开表单类下，翻开“表单插入面板，表单插入面板，即可看到各种表单元素，如图即可看到各种表单元素，如图8-19所示。所示。8.2.2 利用利用Dreamweaver 8处理表单处理表单 图图8-19 “表单表单” 插入面板插入面板 1. 插入文本框插入文本框 文本框是一个接受文本信息的空白框。在文本框文本框是一个接受文本信息的空白框。在文本框中几乎可以容纳任何类型的文本数据。利用它可以中几乎可以容纳任何类型的文本数据。利用它可以使网页设

19、计师不必限制访问者提交的内容。在网页使网页设计师不必限制访问者提交的内容。在网页中，常见的文本框有中，常见的文本框有3种形式：种形式： （1单行文本框单行文本框 只能用来输入一行的信息。只能用来输入一行的信息。 （2多行文本框多行文本框 可以由设计者限定行数，并决定可以由设计者限定行数，并决定是否出现滚动条。该文本框可以输入多行信息。是否出现滚动条。该文本框可以输入多行信息。 （3密码文本框密码文本框 在该文本框中输入的信息，都会在该文本框中输入的信息，都会以以“*”显示在屏幕上。显示在屏幕上。 （1创建空白表单创建空白表单 因为在发送表单时是以整个表单发送的，所以因为在发送表单时是以整个表单

20、发送的，所以在插入表单元素前，先要在网页中插入空白的表单，在插入表单元素前，先要在网页中插入空白的表单，然后才能在表单中插入表单元素如文本框、按钮、然后才能在表单中插入表单元素如文本框、按钮、列表列表/ /菜单、图片等），以达到整体发送的效果。菜单、图片等），以达到整体发送的效果。演示创建空白表单的过程演示创建空白表单的过程 。2. 插入文本域插入文本域 （1插入单行文本域插入单行文本域 先输入提示信息，然后单击先输入提示信息，然后单击“表单表单插入面插入面板上的图标板上的图标 ，或选择，或选择“插入插入”|“表单表单”|“文文本域本域命令。此时会在表单中插入一个单行文命令。此时会在表单中插入

21、一个单行文本域。本域。 （2插入多行文本域插入多行文本域 先输入提示信息，然后单击先输入提示信息，然后单击“表单表单插入面插入面板上的图标板上的图标 ，或选择，或选择“插入插入”|“表单表单”|“文文本区域本区域命令。此时会在表单中插入一个单行命令。此时会在表单中插入一个单行文本框。文本框。 （3插入密码文本域插入密码文本域 先输入提示信息，然后选择先输入提示信息，然后选择“插入插入”|“表表单单”|“文本域文本域命令。此时会在表单中插入一命令。此时会在表单中插入一个单行文本域。用鼠标单击此单行文本域，在个单行文本域。用鼠标单击此单行文本域，在属性面板上的属性面板上的“类型类型下单击下单击“密

22、码密码单选按单选按钮如图钮如图8-23所示所示 ），则单行文本域变成了密），则单行文本域变成了密码文本域。码文本域。图图8-23 文本域的属性面板文本域的属性面板 2设置文本域属性设置文本域属性 在表单中插入文本域后，选择所插入的在表单中插入文本域后，选择所插入的文本域，打开属性面板设置文本域属性。文本域，打开属性面板设置文本域属性。 3. 单选按钮单选按钮 （1插入单选按钮插入单选按钮 要在表单中插入单选按钮，首先将光标置于表单要在表单中插入单选按钮，首先将光标置于表单中的相应位置，输入提示信息，然后单击插入中的相应位置，输入提示信息，然后单击插入“表单表单面板上的图标面板上的图标 ，或选择

23、，或选择“插入插入”|“表单表单”|“单选单选按钮命令，插入单选按钮。按钮命令，插入单选按钮。 （2设置单选按钮的属性设置单选按钮的属性 在表单中选择单选按钮后，属性面板将变为如在表单中选择单选按钮后，属性面板将变为如图所示。图所示。 面板中各项的含义为：面板中各项的含义为：（1单选按钮：给单选按钮命名。同一组的单选按单选按钮：给单选按钮命名。同一组的单选按钮的名称必须相同，这一点非常重要。钮的名称必须相同，这一点非常重要。（2选定值：设置单选按钮被选时的取值。当用户选定值：设置单选按钮被选时的取值。当用户提交表单时，该值被传送给处理程序如提交表单时，该值被传送给处理程序如CGI脚脚本），应赋

24、给同组的每个单选按钮不同的值。本），应赋给同组的每个单选按钮不同的值。 （3初始状态：指定首次载入表单时单选按钮是初始状态：指定首次载入表单时单选按钮是“已勾选还是已勾选还是“未勾选未勾选”。一组单选按钮中，。一组单选按钮中，只能有一个按钮的初始状态被设为选中。只能有一个按钮的初始状态被设为选中。 （1插入复选框插入复选框4. 复选框复选框 将光标置于表单中适当位置，输入提示信息将光标置于表单中适当位置，输入提示信息“兴趣兴趣”，再给复选框添加说明性语言，再给复选框添加说明性语言“读书读书”、“旅游旅游”、“体育和体育和“音乐音乐”；然后单击插入；然后单击插入“表单面板上的图标表单面板上的图标

25、 ，或选择，或选择“插入插入”|“表表单单”|“复选框命令，在选项的合适位置加入复选复选框命令，在选项的合适位置加入复选框。框。 在表单中选择复选框后，其属性面板的显示与在表单中选择复选框后，其属性面板的显示与单选按钮属性面板基本相同只是图标不同）。但单选按钮属性面板基本相同只是图标不同）。但在给复选框命名时，要注意复选框与单选按钮命名在给复选框命名时，要注意复选框与单选按钮命名的区别。单选按钮是以的区别。单选按钮是以“组为单位的，而复选框组为单位的，而复选框则是以则是以“个为单位的，所以每一个复选框的名称个为单位的，所以每一个复选框的名称都不应该相同。都不应该相同。 （2设置复选框的属性设置

26、复选框的属性 5. 下拉列表框下拉列表框 （1插入下拉列表框插入下拉列表框 要在表单中插入下拉列表框，应按如下步骤进行：要在表单中插入下拉列表框，应按如下步骤进行： 1将光标定位在表单中适当位置，输入提示信息。将光标定位在表单中适当位置，输入提示信息。 2单击插入单击插入“表单面板上的图标表单面板上的图标 ，或选择，或选择“插入插入”|“表单表单”|“列表列表/菜单命令，则在表单中菜单命令，则在表单中出现下拉列表框的框架；选中该下拉列表框，属性出现下拉列表框的框架；选中该下拉列表框，属性面板变成下拉列表属性面板，如下图；面板变成下拉列表属性面板，如下图； 3选择选择“类型为类型为“列表列表”，单击属性面板上的，单击属性面板上的“列表值按钮确保下拉列表框处于选择状态），列表值按钮确保下拉列表框处于选择状态），弹出弹出“列表值对话框，如下图。列表值对话框，如下图。 4在在“列表值对话框的列表值对话框的“项目标签下输入要项目标签下输入要在列表框中显示的内容，在在列表框中显示的内容，在“值下输入与显示内值下输入与显示内容相应的值传送到服务器中的即为该值），即可容相应的值传送到服务器中的即为该值），即可为列表框加入显示的内容。为列表框加入显示的内容。 在表单中插入下拉列表框后，选择所插入的下在表单中插入下拉列表框后，选择所插入的下拉列表框