《网页设计教程》PPT课件：第8章 网页表单的处理

第8章网页表单的处理 表单是用于实现网页浏览者与服务 器之间信息交互的一种页面元素,被广 泛用于各种信息的搜集和反馈。通过本 章学习,应该掌握以下内容 1.认识网页表单 2.创建表单的方法 3.编辑表单 4.设置表单确认页面

表单是用于实现网页浏览者与服务 器之间信息交互的一种页面元素，被广 泛用于各种信息的搜集和反馈。通过本 章学习，应该掌握以下内容： 1. 认识网页表单 2. 创建表单的方法 3. 编辑表单 4. 设置表单确认页面 第8章 网页表单的处理

81利用 FrontPage2002处理表单 81.1创建表单 1.表单概述 表单是用来收集浏览者的用户名、密码、E-mai地址、个人爱 好和联系地址等用户信息的输入区域集合。 FrontPage提供了文本框、文本区、单选按钮、复选框、下拉框 提交按钮和重置按钮等丰富的表单域。 (1)文本框:文本框用来输入比较简单的信息。 (2)文本区:如果需要输入建议、需求等大段文字,使用文本框就 显得力不从心了,这时通常使用带有滚动条的文本区。 (3)单选按钮:单选按钮常用于表示唯一的选择结果 (4)复选框:复选框常用来表示许多项可以同时选中的事物,比如 个人爱好、所学科目和选购的产品种类等

8.1 利用FrontPage 2002处理表单 8.1.1 创建表单 1 . 表单概述 表单是用来收集浏览者的用户名、密码、E-mail地址、个人爱 好和联系地址等用户信息的输入区域集合。 FrontPage提供了文本框、文本区、单选按钮、复选框、下拉框、 提交按钮和重置按钮等丰富的表单域。 （1）文本框：文本框用来输入比较简单的信息。 （2）文本区：如果需要输入建议、需求等大段文字，使用文本框就 显得力不从心了，这时通常使用带有滚动条的文本区。 （3）单选按钮：单选按钮常用于表示唯一的选择结果。 （4）复选框：复选框常用来表示许多项可以同时选中的事物，比如 个人爱好、所学科目和选购的产品种类等

(5)下拉列表框:当需要选择职业、文化程度等事项时,除了文本 区以外,还可以考虑使用下拉列表框。 (6)提交按钮和重置按钮:当用户完成了表单的填写后,如果需要 提交数据,则可以单击表单中的提交按钮。如果希望恢复表单为 填写前的状态,以便重新填写,则可以单击重置按钮。 2.创建表单 在 FrontPage2002中可以通过应用向导创建表单,也可以自 己手动创建表单 812编辑表单 修改表单 (1)删除不必要的域 如果是手动创建的表单,删除不必要的域的方法很简单,只需 将选中需要删除的域,单击 Delete键即可。如果是用表单向导创建 的表单,将鼠标指针移至要删除的行的左侧,当鼠标变成指向箭 头啼时,选择要删除的域,然后单击鼠标右键,从弹出的快捷菜 单中选择“删除单元格”命令即可

（5）下拉列表框：当需要选择职业、文化程度等事项时，除了文本 区以外，还可以考虑使用下拉列表框。 （6）提交按钮和重置按钮：当用户完成了表单的填写后，如果需要 提交数据，则可以单击表单中的提交按钮。如果希望恢复表单为 填写前的状态，以便重新填写，则可以单击重置按钮。 2．创建表单 在FrontPage 2002中可以通过应用向导创建表单，也可以自 己手动创建表单。 8.1.2 编辑表单 1．修改表单 （1）删除不必要的域 如果是手动创建的表单，删除不必要的域的方法很简单，只需 将选中需要删除的域，单击Delete键即可。如果是用表单向导创建 的表单，将鼠标指针移至要删除的行的左侧，当鼠标变成指向箭 头时，选择要删除的域，然后单击鼠标右键，从弹出的快捷菜 单中选择“删除单元格”命令即可

(2)修改文本框的宽度 在 FrontPage2002中修改文本框的宽度有以下两种方法: ①鼠标拖动法 用鼠标选中要修改文本框,选中状态下的文本框被6个小方框包 围起来,拖动其中的小方框就可以改变文本框的宽度。 ②精确设置法 用鼠标选中要修改文本框,然后单击右键,从弹出的快捷菜单 中选择“表单域属性”命令,弹出“文本框属性”对话框,在 “宽度”文本框中输入精确数值,然后单击“确定”按钮。 (3)修改域标题 在表单中修改域标题也很容易,只要用鼠标选中要更改的域标 题,然后直接输入所需的域标题即可。 2.设置表单的背景颜色 3.设置光标顺序 在填写表单时,使用键盘上的“Tab”键,就可以在各项之间进 行切换。“Tab”键顺序是在各属性对话框中设置的

（2）修改文本框的宽度 在FrontPage 2002中修改文本框的宽度有以下两种方法： ① 鼠标拖动法 用鼠标选中要修改文本框，选中状态下的文本框被6个小方框包 围起来，拖动其中的小方框就可以改变文本框的宽度。 ② 精确设置法 用鼠标选中要修改文本框，然后单击右键，从弹出的快捷菜单 中选择“表单域属性”命令，弹出“文本框属性”对话框，在 “宽度”文本框中输入精确数值，然后单击“确定”按钮。 （3）修改域标题 在表单中修改域标题也很容易，只要用鼠标选中要更改的域标 题，然后直接输入所需的域标题即可。 2．设置表单的背景颜色 3．设置光标顺序 在填写表单时，使用键盘上的“Tab”键，就可以在各项之间进 行切换。 “Tab”键顺序是在各属性对话框中设置的

4.设置密码域属性 在填写表单时,填写的某些内容会以“”表示,这是为了防 止输入的某些重要内容被其他人偷看。要想为标单加上此功能, 只要在“文本框属性”对话框里的“密码域”选项组中选择“是” 按钮即可。 813保存表单结果 访问者填写完表单内容后发送出去,发送后的表单结果要存放在 某一位置。表单结果存放的位置是由表单属性指定的。 814设置表单确认页面 在测试表单时,单击“注册”按钮后,浏览器会自动调出一个 确认表单页面,其提示信息均为英文。表单的确认页面也可以自 己设置,在浏览时让浏览器将自设的确认页面调出。 1.制作确认表单 链接确认表单与表单页面

4．设置密码域属性 在填写表单时，填写的某些内容会以“*”表示，这是为了防 止输入的某些重要内容被其他人偷看。要想为标单加上此功能， 只要在“文本框属性”对话框里的“密码域”选项组中选择“是” 按钮即可。 8.1.3保存表单结果 访问者填写完表单内容后发送出去，发送后的表单结果要存放在 某一位置。表单结果存放的位置是由表单属性指定的。 8.1.4设置表单确认页面 在测试表单时，单击“注册”按钮后，浏览器会自动调出一个 确认表单页面，其提示信息均为英文。表单的确认页面也可以自 己设置，在浏览时让浏览器将自设的确认页面调出。 1．制作确认表单 2．链接确认表单与表单页面

8.2处理网页表单的其他方法 821利用HTML处理表单 利用HTML也可以创建表单,这样创建的表单通常由两类元素构 成,一是普通的页面元素,例如表格、图像、文字等,二是用于接 收信息的特定页面元素,也就是所谓的表单控件。 1.表单标记符 HTML中表单标记符为FORM,其主要作用是设定表单的起止位 置,并指定处理表单数据程序的URL地址。 2.表单输入标记符 INPUT是表单输入标记符,在表单创建中使用频繁,大部分表单 内容需要用到此标记符。 3.控件定义方法 (1)文本框和口令框 创建单行文本框的基本语法如下: <INPUT type="text"name=""value=""size=""maxlength=

8.2 处理网页表单的其他方法 8.2.1 利用HTML处理表单 利用HTML也可以创建表单，这样创建的表单通常由两类元素构 成，一是普通的页面元素，例如表格、图像、文字等，二是用于接 收信息的特定页面元素，也就是所谓的表单控件。 1．表单标记符 HTML中表单标记符为FORM，其主要作用是设定表单的起止位 置，并指定处理表单数据程序的URL地址。 2．表单输入标记符 INPUT是表单输入标记符，在表单创建中使用频繁，大部分表单 内容需要用到此标记符。 3．控件定义方法 （1）文本框和口令框 创建单行文本框的基本语法如下：

(2)复选框与单选按钮 创建复选框和单选框也是使用 INPUT标记符,语法分别如下: (3)按钮 创建提交按钮、重置按钮和自定义按钮的语法分别如下 (4)多行文本框(文本区) 利用HTML创建多行文本框应使用 TEXTAREA标记符,其使用 格式如下: 默认多行文本 (5)选项菜单 要创建选项菜单应使用 SELECT标记符,并将每个可独立选取 的项用一个 OPTION标记符标出来

（2）复选框与单选按钮 创建复选框和单选框也是使用INPUT标记符，语法分别如下： （3）按钮 创建提交按钮、重置按钮和自定义按钮的语法分别如下： （4）多行文本框（文本区） 利用HTML创建多行文本框应使用TEXTAREA标记符，其使用 格式如下： 默认多行文本 （5）选项菜单 要创建选项菜单应使用SELECT标记符，并将每个可独立选取 的项用一个OPTION标记符标出来

822利用 Dreamweaver4.0处理表单 Dreamweaver40提供了大量的表单元素。将“ Object”面板切 换到“ Forms”类下,即可看到各种表单元素。 插入文本框 (1)刨建空白表单 (2)插入文本框 ①插入单行文本框 ②插入多行文本框 ③插入密码文本框 2.设置文本框属性 3.插入单选按钮 (1)插入单选按钮 2)设置单选按钮的属性 4.插入复选框 (1)插入复选框 (2)设置复选框的属性

8.2.2 利用Dreamweaver 4.0处理表单 Dreamweaver 4.0提供了大量的表单元素。将“Object”面板切 换到“Forms”类下，即可看到各种表单元素。 1．插入文本框 （1）创建空白表单 （2）插入文本框 ① 插入单行文本框 ② 插入多行文本框 ③ 插入密码文本框 2．设置文本框属性 3．插入单选按钮 （1）插入单选按钮 （2）设置单选按钮的属性 4．插入复选框 （1）插入复选框 （2）设置复选框的属性

5.插入下拉列表框 (1)插入下拉列表框 (2)设置下拉列表框属性 6.插入按钮 (1)插入“ Submit”(提交)按钮 (2)插入“ Reset”(重置)按钮 (3)插入“ Button”按钮

5．插入下拉列表框 （1）插入下拉列表框 （2）设置下拉列表框属性 6．插入按钮 （1）插入“Submit”（提交）按钮 （2）插入“Reset”（重置）按钮 （3）插入“Button”按钮