网页设计技术教程 第6章 表单

《网页设计技术教程 第6章 表单》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第6章表单本章要点：表单的功能特点表单的创建方法各种表单域的使用表单结果的保存和处理6.1表单概述如图是一个简单的表单。表单中包含单行文本框、单选按钮、复选框、提交按钮、重置按钮等项目（即下节中所说的表单域）。6.1.1创建表单1．用户自己直接创建表单具体操作步骤如下：（1）明确表单要收集哪些信息，从而确定表单需要有哪些表单域以及表单域的类型；（2）将光标放置在编辑区要插入表单的空白处，执行【插入】→【表单】→【表单】命令，插入空白表单，此时表单只包含【提交】和【重置】按钮;（3）向表单中添

2、加所需的表单域及其注释2．使用向导创建表单网页具体操作步骤如下：（1）打开【网页模板】对话框中，选择【常规】选项卡，从中选择【表单网页向导】，打开【表单网页向导】对话框，【表单网页向导】对话框中有一个进度条，指示设置整个表单的进度。（2）单击【下一步】按钮，进入对话框。在这里可以点击【添加】按钮来进入添加表单项的对话框。（3）在该对话框中，【选择此问题要收集的输入类型】列表里列出可供选择的表单域提示信息。可以根据需要多次单击【添加】按钮添加问题，也可以对这些问题直接进行编辑。（4）每添加完一个问题提

3、示，单击【下一步】按钮，进入这个表单项的属性设置对话框。设置完毕后，单击【下一步】按钮，进入【设置表单处理程序】对话框。（6）这里可以设置如何处理表单，如【将结果保存到Web页】、【将结果存为文本文件】以及【使用自定义的CGI脚本】等。（7）回到编辑窗口，会发现新建的网页上产生了一个表单。如图3．使用模板创建表单在FrontPage2002的【网页模板】对话框中，打开【常规】选项卡，可以看到系统提供的多种表单网页的模板，如“确认表单”、“搜索网页”、“意见簿”、“意见反馈表单”、“用户注册”等模板，

4、和其它网页模板一起列出。用户可以像使用表单网页模板一样来创建一个表单网页，这和使用普通模板创建网页没有什么区别。6.1.2表单域类型在执行【插入】→【表单】命令时，用户可以按住所弹出子菜单的最上方，将其拖出到编辑的窗口上，生成一个【表单】工具栏，如图：6.2表单域6.2.1单行文本框插入单行文本框的具体操作步骤如下：（1）先确定要插入单行文本框的位置，然后执行【插入】→【表单】→【文本框】命令，也可以单击【表单】工具栏中的【文本框】按钮进行插入。（2）鼠标右键单击文本框，执行弹出菜单中的【表单域属性

5、】命令，也可以直接双击文本框，打开【文本框属性】对话框，如下图所示：6.2.2文本区（滚动文本框）对文本区可进行如下操作：（1）插入一个文本区，同样有两种方法可以实现：将光标移到要插入的位置，执行【插入】→【表单】→【文本区】命令，也可以单击【表单】工具栏上的【文本区】按钮，插入文本区。（2）鼠标右键单击文本区，执行弹出菜单中的【表单域属性】命令，或直接双击文本区，打开【文本框属性】对话框。在【文本区属性】对话框中，可以设置文本区的相关属性。文本区的属性与单行文本框的属性基本相同，不同的是可以输入多

6、行的初始值，并且可以在【行数】文本框中指定文本区的行数，其默认值是2。还可以通过拖动文本区周围的控制点来改变文本区的宽度和行数。6.2.3文件上载操作步骤如下：（1）先确定要插入单行文本框的位置，然后执行【插入】→【表单】→【文件上载】命令，或者单击【表单】工具栏上的【文件上载】按钮，插入文件上载控件。（2）直接在编辑窗口中双击文件上载表单域，打开【文件上载属性】对话框。（3）在对话框中可以设置文件上载域的相关属性。（4）单击【文件夹】按钮，打开【文件夹列表】窗口。（5）单击鼠标右键，执行【新建】→

7、【文件夹】命令。（6）用鼠标右键单击表单，选择【表单属性】菜单项。6.2.4复选框操作步骤如下：（1）通过单击【表单】工具栏上的【复选框】按钮，可以插入复选框，添加文本注释。（2）双击所添加【复选框】表单域，打开【复选框属性】对话框，进行属性设置。在【名称】框中输入该表单域的名称。在【值】框中输入的文本用来描述选中后的复选框所表示的含义。若要该选项初始状态是选中的，在【初始状态】选项栏中选中【选中】单选按钮。如果一个表单上有多个复选框，每个复选框的名字可以是相同的。6.2.5选项按钮（单选按钮）使用

8、选项按钮的具体操作方法如下：（1）在编辑窗口中的确定位置，单击【表单】工具栏上的【选项】按钮，插入选项按钮。如下图所示，插入了4个选项按钮，并分别为其添加了文字内容。（2）双击编辑窗口中的选项按钮，打开【选项按钮属性】对话框，设置选项按钮的属性。6.2.6下拉框（下拉菜单）操作方法如下：（1）先确定要插入下拉框的位置，再单击【表单】工具栏上的【下拉框】按钮，插入一个空的下拉框，如图：（2）双击页面中的下拉框，打开【下拉框属性】对话框，并进行相关属性的设置。（3）单击【