《多媒体技术与网页设计》课件第21章

第21章表单21.1表单创建及设置21.2添加表单对象表单是在网页中让浏览用户填写信息的网页元素，如用户注册、用户留言及邮箱登录等。表单通常由单选按

钮、复选框、文本框以及按钮等多种表单对象组成，如图21.1所示。通过表单可以将用户填写的内容上传到网页服务器中，网页服务器对收集的信息进行处理，并做出相应的反应。图21.1表单页面例如，用户登录表单，将用户输入的用户名和密码上传到网页服务器，网页服务器判断是否有该用户，以及密码是否正确。如果用户和密码都正确，就让用户跳转到登录后的页面，否则将拒绝登录并给出错误信息。

21.1表单创建及设置

21.1.1创建表单

制作表单页面要先创建表单，然后在表单中添加表单对象。

将插入栏切换到“表单”插入栏，如图21.2所示，其中最右侧的“表单”按钮用于在页面中载入表单，其它按钮用于在表单中添加表单对象。图21.2“表单”插入栏创建表单的具体步骤如下：

(1)将光标移到所需位置。

(2)单击“表单”插入栏中的“表单”按钮或选择“插入”→“表单”→“表单”命令，在编辑窗口中添加表单，如图21.3所示。图21.3创建表单21.1.2设置表单属性

将光标移到表单中，点击右键，弹出其“属性”面板，在该面板中可以设置表单属性，如图21.4所示。图21.4表单“属性”面板表单“属性”面板中各项参数的含义如下：

(1)表单名称：设置表单的名称。

(2)动作：用于处理表单的程序或页面的URL地址。

(3)方法：选择传送表单数据的方式。其中，GET表示将表单中的信息以追加到处理程序地址后面的方式进行传送，使用这种方式不能发送信息量大的表单，其内容不能超过8192个字符，适用于信息量小的表单；POST表示传送表单数据时它将表单信息嵌入到请求的处理程序中，理论上这种方式对表单的信息量不受限制；“默认”选项表示采用浏览器默认的设置对表单数据进行传送，一般的浏览器默认以GET方式传送。

(4)目标：打开返回信息网页的方式。

(5) MIME类型：指定提交给服务器进行处理的数据所使用的编码类型。默认为application/x-www-form-urlencoded，通常与POST方法协同使用。

21.2添加表单对象

表单对象比较多，包括文本字段、字段集、按钮、单选按钮、复选框、列表/菜单、跳转菜单、隐藏域、文

件域和图像域等，它们的作用有所不同，下面分别进行

介绍。21.2.1添加文本字段

文本字段是最常见的表单对象之一，可接受文本内容的输入，有单行、多行和密码三种类型，如图21.5所示。图21.5文本字段

1.单行文本字段的添加

由于单行文本可接受的文本内容比较少，因此通常用于用户输入姓名、地址、邮箱地址等。插入单行文本字段的步骤为：将光标移到表单中要添加文本字段的位置，在“表单”插入栏中单击按钮，在弹出的“输入标签辅助功能属性”对话框的“标签文字”文本框中输入文本字段的标签，如“用户名：”(如图21.6所示)，单击“确定”按钮即可在表单域中添加单行文本字段，如图21.7所示。图21.6“输入标签辅助功能属性”对话框图21.7插入的单行文本字段选择添加的文本字段，点击右键，弹出其“属性”面

板，在该面板中将显示单行文本域的各项参数，如图21.8所示。图21.8选择文本字段后的“属性”面板该面板中各项参数的含义如下：

(1)文本域：输入文本字段的名称，该名称可以被脚本或程序引用。

(2)字符宽度：设置文本字段的宽度。

(3)最多字符数：设置单行文本字段中所能输入的最大字符数。

(4)类型：选中不同的单选按钮可以在单行文本字

段、多行文本字段和密码字段之间进行转换。

(5)初始值：输入文本字段默认的显示内容，如“请输入用户名”，若不输入内容，文本字段默认状态将显示为空白。

2.多行文本字段的添加

多行文本字段可接受多行内容的文本，通常用做用户留言、个人介绍等。插入多行文本字段的步骤为：将光标移到表单中要添加文本字段的位置，在“表单”插入栏中单击按钮，在弹出的“输入标签辅助功能属性”对话框的“标签文字”文本框中输入文本字段的标签，如“请留言：”，单击“确定”按钮即可在表单域中添加多行文本字段，如图21.9所示。图21.9插入的多行文本字段选择添加的多行文本字段，点击右键，弹出其属性面板，该面板中将显示多行文本域的参数，如图21.10所示。图21.10选择多行文本字段后的“属性”面板该面板中各项参数的含义如下：

(1)文本域：输入文本字段的名称，该名称可以被脚本或程序所引用。

(2)字符宽度：设置文本字段的宽度。

(3)行数：设置多行文本字段中的可见行数。

(4)类型：其中包含“单行”、“多行”和“密码”三个单选按钮，选中不同的单选按钮可以在单行文本字段、多行文本字段和密码字段之间进行转换。

(5)初始值：输入文本字段默认的显示内容。

(6)换行：用于设置当文本字段中的内容超过一行时的换行方式，有“默认”、“关”、“虚拟”和“实体”四种方

式。其中，“默认”表示使用访问者浏览器默认的自动换行方式；“关”表示当编辑文本超过了文本域指定的宽度时，自动添加水平滚动条；“虚拟”表示当编辑文本超过了文本字段指定的宽度时，在排满文本域宽度时自动换行；“实体”表示编辑文本超过了文本域指定的宽度时，在排满文本域宽度时也可自动换行，而这里的自动换行是带有回车符的，即强制换行。21.2.2添加字段集

使用字段集可以在网页中显示圆角矩形方框，并在方框的右上角显示一个标题文字。这样就可以将一些相关的表单对象放置在一个字段集内，以和其它表单对象进行区分。添加字段集的具体步骤如下：

(1)单击“表单”插入栏中的按钮，在弹出的“字段集”对话框的“标签”文本框中输入字段集的标签，如“上传文件”，如图21.11所示。图21.11“字段集”对话框

(2)单击“确定”按钮插入字段集，如图21.12所示。图21.12插入字段集

(3)在字段集中添加其它表单对象，如插入一个文件域和一个按钮，如图21.13所示。按F12键预览，效果如图21.14所示。图21.13插入其它表单对象

图21.14插入的字段集效果21.2.3添加按钮

表单中的按钮有“提交”、“重置”和编写脚本才能执行相应操作三种类型。“提交”按钮用于将表单的内容提交到服务器；“重置”按钮用于将表单中的内容恢复到初始状

态；第三种按钮是需要用户编写脚本才能执行相应操作，否则单击无回应。添加按钮的具体步骤如下：

(1)将光标移到表单中要添加按钮的位置。

(2)单击“表单”插入栏中的按钮，在弹出的“输入标签辅助功能属性”对话框中单击“确定”按钮即可在表单中添加按钮，其中默认添加“提交”按钮，如图21.15所示。图21.15添加的按钮选中添加的按钮，点击右键，弹出其“属性”面板，如图21.16所示。图21.16选中按钮后的“属性”面板该面板中各项参数的含义如下：

(1)按钮名称：设置按钮的名称。

(2)值：设置显示在按钮上的文本。

(3)动作：其中“提交表单”表示单击该按钮可提交表

单；“无”表示需手动添加脚本才能执行相应操作，否则单击无回应；“重设表单”表示单击按钮可将表单中的内容恢复到默认状态。21.2.4添加单选按钮

在同一组单选按钮中只能选中一个单选按钮，当选

中其中一个单选按钮后，再选中其它单选按钮时，则先选中的单选按钮将会取消选中。因此，单选按钮常被用做性别、学历等的选择。添加单选按钮的具体步骤如下：

(1)将光标移到表单中要添加单选按钮的位置。

(2)单击“表单”插入栏中的按钮，在弹出的“输入标签辅助功能属性”对话框的“标签文字”文本框中输入单选按钮的标签，如“男”。

(3)单击“确定”按钮在表单中添加一个单选按钮，如图21.17所示。

(4)重复上面的操作，添加其它单选按钮，按F12键进行预览，这时只能选中一个单选按钮，如图21.18所示。图21.17添加的单选按钮图21.18只能选中一个单选按钮选中添加的单选按钮，点击右键，弹出如图21.19所示的“属性”面板。图21.19选中单选按钮后的“属性”面板该面板中各项参数的含义如下：

(1)单选按钮：输入单选按钮的名称。

(2)选定值：输入选中单选按钮时发送给服务器

的值。

(3)初始状态：设置在浏览器中首次载入表单时单选按钮是否处于选中状态。21.2.5添加复选框

复选框允许在一组选项中选择一个或多个选项。添加复选框的具体步骤如下：

(1)将光标移到表单中要添加复选框的位置。

(2)单击“表单”插入栏中的按钮，在弹出的“输入标签辅助功能属性”对话框中的“标签文字”文本框中输入复选框的标签，如“听音乐”。

(3)单击“确定”按钮，可以在表单中添加一个复选框，如图21.20所示。

(4)重复上面的操作，添加其它复选框，按F12键进行预览，用户可以同时选中多个复选框，如图21.21所示。图21.20添加的复选框图21.21多个复选框选中添加的复选框，点击右键，弹出其“属性”面板，如图21.22所示。图21.22选中复选框后的“属性”面板该面板中各项参数的含义如下：

(1)复选框名称：输入复选框名称。

(2)选定值：输入该复选框被选中时发送给服务器

的值。

(3)初始状态：设置浏览器首次载入表单时复选框是否处于选中状态。21.2.6添加列表/菜单

列表/菜单以列表框或下拉列表框的形式提供了多个选项。在列表中可以选择多个选项，而菜单只允许选择一项。添加列表/菜单的具体步骤如下：

(1)将光标移到表单中要添加列表或菜单的位置。

(2)单击“表单”插入栏中的按钮，在弹出的“输入标签辅助功能属性”对话框的“标签文字”文本框中输入列表/菜单的标签，如“软件分类”。

(3)单击“确定”按钮在表单中添加一个菜单，如图21.23所示。图21.23添加的菜单

(4)选择添加的列表或菜单，点击右键，弹出其“属性”面板，单击其中的“列表值”按钮，弹出“列表值”对话框，如图21.24所示。图21.24“列表值”对话框

(5)在该对话框中可添加项目标签及相应的值。在列表框的“项目标签”栏中输入项目名称，单击“+”按钮添加下一条项目标签。重复操作直至完成整个项目标签的设置，最后单击“确定”按钮关闭对话框，完成菜单对象的添加。

(6)按F12键进行预览，效果如图21.25所示。图21.25设置后的列表选择插入的列表/菜单，显示其“属性”面板，如图21.26所示。图21.26选择列表/菜单后的“属性”面板该面板中各项参数的含义如下：

(1)列表/菜单：输入菜单对象的名称。

(2)类型：用于在列表和菜单之间进行转换。

(3)初始化时选定：用于选择在菜单对象中显示的初始项。

如果在“属性”面板的“类型”栏中选中“列表”单选按

钮，可以将菜单转换为列表，同时“属性”面板中的“高度”文本框和“允许多选”复选框被激活，如图21.27所示。图21.27选中“列表”单选按钮在“高度”文本框中可设置在列表中显示的选项的行

数；选中“允许多选”复选框则允许用户选择多个选项。设置后的列表如图21.28所示。图21.28列表21.2.7添加跳转菜单

跳转菜单是一个特殊的菜单，每一个选项都有一个超级链接与之相对应。使用跳转菜单可以创建Web站点内文档的链接、其它Web站点上文档的链接、电子邮件链接以及图形链接等。添加跳转菜单的具体步骤如下：

(1)将光标移到页面中需要添加跳转菜单的位置。

(2)单击“表单”插入栏中的按钮，弹出“插入跳转菜单”对话框，如图21.29所示。

(3)在“文本”中输入菜单项的名称。

(4)在“选择时，转到URL”中为跳转菜单添加超级链

接。

(5)在“打开URL于”选择打开链接的方式，在“菜单名称”文本框中输入该菜单项的名称。

(6)单击“+”按钮添加一个菜单项，用同样的方法设置其它菜单项。

(7)单击“确定”按钮关闭对话框，即可在页面中添加一个跳转菜单，按F12键进行预览，效果如图21.30所示。图21.29“插入跳转菜单”对话框图21.30跳转菜单21.2.8添加隐藏域

隐藏域用于存储需要向服务器提交的信息，但不在页面上显示，如保存一些状态信息，当用户下一次访问该网页时，自动对上一次访问的状态进行显示。添加隐藏域的具体步骤如下：

(1)将光标移到要添加隐藏域的位置。

(2)单击“表单”插入栏中的按钮即可在插入点处添加隐藏域，显示为图标，如图21.31所示。图21.31添加的隐藏域选择添加的隐藏域图标，点击右键，弹出其“属性”面板，如图21.32所示。

该面板中各项参数的含义如下：

(1)隐藏区域：输入隐藏域的名称，该名称可以被脚本或程序所引用。

(2)值：输入隐藏域的值。图21.32选择隐藏域后的“属性”面板21.2.9添加文件域

文件域可使访问者浏览本地电脑上的某个文件，实现上传文件的功能。添加文件域的具体步骤如下：

(1)将光标移