第4章 表单和框架

1、第4章 表单和框架烟台职业学院孙俊琳本章学习目标u能够熟练使用表单收集各种用户反馈信息u能够熟练使用框架技术实现网页的布局4.1 表单u表单容器标签u 输入域标签u多行文本输入框u下拉列表框u标注标签u分组标签u按钮标签4.1.1 表单容器标签 标记元素用于为用户创建XHTML表单。表单是包含表单元素的一个区域，表单中可以包含标记元素、标记元素、标记元素、标记元素、标记元素等表单元素，通常在页面上表单是不可见的，但可以看到表单中的表单元素。4.1.1 表单容器标签 1.基本用法 表单元素注意：（1）用于创建基本表单，设置属性可以使浏览器知道如何处理表单数据。（2）标记元素对内定义包括的表单元素

2、，创建输入控件。属属 性性取取 值值功能说明功能说明id/namename设置表单的id/名称id/名称actionURL设置表单提交时，接收处理表单数据的文件methodget、post、post设置表单提交方式enctypeMIME_type设置表单发送到服务器之前对数据进行编码类型acceptMIME_type设置表单提交的文件内容的类型accept-charsetcharset设置表单提交的文件字符集的类型target_blank、_parent、_self、_top、framename、_parent、_self、_top、framename设置打开表单提交跳转页面URL的位置URL

3、的位置4.1.2 输入域标签 标记元素是非成对的，它嵌套在表单标记元素中使用，用来定义一个输入项。1.主要属性标记元素的主要属性及其取值和功能说明如表4.3所示。属属 性性取取 值值功能说明功能说明typetype设置输入项的类型nametext设置输入项变量名sizenumber设置输入项的长度valuetext设置输入项中预设的文本内容maxlengthnumber设置输入项允许输入的最大字符数checkedchecked设置输入项首次加载时被选中状态disableddisabled设置输入项加载时禁用状态readonlyreadonly设置输入项为只读状态4.1.2 输入域标签 2.ty

4、pe属性取值标记元素的type属性及其说明如表4.4所示。typetype属性属性说说 明明text单行文本输入框password密码输入框radio单选按钮checkbox复选按钮hidden隐藏元素image图像域file文件选择submit提交按钮reset重置按钮button自定义按钮4.1.2 输入域标签 3.类型实例（1）单行文本、密码输入框例4.1 实现用户登录。用户名： 密 & n b s p ; & n b s p ; 码 ： 4.1.2 输入域标签3.类型实例（2）单选、复选按钮例4.2 在表单中选择性别和爱好。您的性别：男女请选择爱好：看书旅游运动上网购物4.1.2 输入

5、域标签（3）提交按钮、重置按钮、自定义按钮u当输入项类型“type=submit”设为提交按钮时；u当输入项类型“type=reset”设为重置按钮时；u当输入项类型“type=button”设为自定义按钮时，则可以设定按钮上的标题，但单击没有任何动作发生，一般常用于设定单击后执行JavaScript程序。例4.3 在表单中增加按钮。4.1.2 输入域标签（4） 图像域 当输入项类型“type=image”设为图像时，可以在表单中添加图像，也可以设置为图像按钮。图像按钮以加载的图像按钮显示在页面中，图像的加载是通过src属性来设置的，单击图像形式的提交按钮浏览器会将表单的输入信息传送给服务器。

6、例如，在表单中选择头像，通过图像按钮进行提交。（5）隐藏元素在表单提交时有些值是不需要显示出来的，而隐藏在页面里。这时可以将输入项类型“type”设置为hidden，通常这类数据将被作为辅助数据随表单提交，在服务器端可以被处理。例如：（6）文件选择将输入项类型“type”设为file，即文件选择类型，会弹出文件打开对话框，选择本地计算机里的一个文件可以将其提交到服务器。例如：4.1.3 多行文本输入框u和标记元素之间的内容可以设定显示在文本输入框中的初始信息；ucols 和 rows 属性分别代表多行文本输入框列数和行数，当输入的文本超过该数目时，自动出现下拉滚动条以满足更多行输入；udisa

7、bled属性可用来设置多行文本框是否可用；ureadonly属性可用来设置多行文本框中的内容是否是只读的例4.4 使用 标记实现多行文本区域。请留言：该文本框设定8行高度，每行40字符宽度4.1.4 下拉列表框u在表单中使用标记元素定义下拉列表框；u标记元素定义下拉列表框中的一个选项，位于内，标记元素必须与标记元素结合使用；u使用标记元素将相关下拉列表选项组合在一起，对选项分组。1.标签的主要属性属属 性性取取 值值功能说明功能说明nametext设置下拉列表选择框名sizenumber设置下拉列表框可见选项的数目disableddisabled设置下拉列表框加载时禁用状态multiplemu

8、ltiple设置下拉列表框是否可多选4.1.4 下拉列表框2.标签的主要属性例4.5 下拉菜单的定义。 请选择您的出生地： 请选择 北京 上海 烟台 大连 其他 属属 性性取取 值值功能说明功能说明labeltext设置下拉列表框选项的标签selectednumber设置下拉列表框选项是否为选中状态disableddisabled设置下拉列表框选项首次加载时被禁用valuetext设置下拉列表框项选中向服务器传递的值4.1.4 下拉列表框3.标记元素的主要属性标记元素的主要属性及其取值和功能说明如表4.7所示。例4.6 运用下拉列表选择多项内容。属属 性性取取 值值功能说明功能说明labelt

9、ext设置下拉列表框选项组的标签disableddisabled设置下拉列表框选项组被禁用4.1.5 标注标签 作用是向控件定义标注。该标签和特定的标记元素绑定，为其定义标签，显示文本信息。同时，如果在标记元素内单击文本，浏览器就会自动将焦点转到和该标签相关的表单元素上。通过标记元素的for属性与相关表单元素的id属性来实现绑定。例如： Male Female4.1.6 分组标签 使用标记元素可将表单内的相关元素分组，当一组表单元素放到标签内时，浏览器会给它们加上特殊的边界来显示它们，或者可创建一个子表单来处理这些元素。标签元素为表单元素分组定义标题。例4.7 运用分组标签界定信息类型。 个人

10、爱好 上网 读书 体育 音乐 绘画 4.1.7 按钮标签 控件 与 相比，提供了更为强大的功能和更丰富的内容。 与 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。标记元素的主要属性及其取值和功能说明如表4.8所示。属属 性性取取 值值功能说明功能说明nametext设置按钮的名称typebutton、submit、reset、submit、reset设置按钮的类型disableddisabled设置按钮被禁用valuetext设置按钮的初始值4.1.8 制作注册表单例4.8 制作注册表单。4.2 框架u框架的基本结构主要分为框架集和框架两部分。u它是利用

11、标记元素与标记元素来定义的，其中标记元素用于定义框架集，即定义大窗口；标记元素用于定义框架，即定义窗口中的小窗口。u在XHTML包含框架的页面中，应将DOCTYPE设置为Frameset DTD。u不能将标记元素与标记元素一起使用，而是用标记元素来代替标记元素，在标记元素中嵌套标记元素，用来指定小窗口的显示内容，在XHTML中，标记元素必须被正确地关闭。4.2.1 框架的结构1.框架的基本结构框架的基本结构如下： 框架的结构 4.2.1 框架的结构2. 常见的对窗口的分割包括水平分割、垂直分割和混合分割。根据实际需要进行分割时，可以通过设置标记元素中的rows（水平分割）或cols（垂直分割）

12、属性来进行分割。标记元素的主要属性及其功能描述如表4.9所示。cols属性可用于定义一个垂直分割的窗口框架，基本语法如下： rows属性可定义一个水平分割的窗口框架，基本语法如下： 4.2.1 框架的结构3. 在各小窗口中设置相应页面，进行初始化可以通过设置src属性来链接相应的文件，并对子窗口进行设置。标记元素的主要属性及其功能描述如表4.10所示。属属 性性值值功能描述功能描述frameborder0，1，1设置是否显示框架周围的边框namename设置框架的名称noresizenoresize设置框架的大小（无法调整）scrollingyes、no、auto、no、auto 设置是否在框

13、架中显示滚动条srcURL设置在框架中显示的文档的 URLURLmarginwidthpixels设置窗口显示内容与窗口左右边距marginheightpixels设置窗口显示内容与窗口上下边距4.2.1 框架的结构4 在那些不支持框架的浏览器中使用标记元素就可显示设置的相应文本。标记元素位于标记元素内部，要显示的提示文本则在标记元素对中。基本格式如下： 显示的提示信息 4.2.2 框架的应用设置1.设置垂直框架 使用框架可将浏览器窗口垂直分割为两个小窗口，假设左边窗口为left.html，右边窗口为right.html。实现代码如下： 4.2.2 框架的应用设置2.设置混合框架 假设我们要对

14、页面先进行上下分割，再对下面的页面进行左右分割。上面部分页面为top.html ，左边部分页面为left.html，右边部分页面为 maim.html。实现方法是通过在框架标签内嵌套框架标签。需要注意的是，设置上下分割线后页面宽度不可调整，即上半部分是固定的。例4.9 邮箱界面设计。4.2.2 框架的应用设置3.设置导航框架 需要用到“target”属性。在建立导航框架时，要灵活运用标记元素的name属性和标记元素的target属性。标记元素的name属性用来指定窗口的名称，标记元素的target属性用来指定被链接内容被放置的窗口。当定义子窗口名后，可通过超链接指定网页显示的子窗口。例4.10 将例4.9中的“写邮件”、“收邮件”、“草稿箱”的链接实现。4.2.2 框架的应用设置4.设置框架锚点跳转 将框架的应用与锚的设置相结合，在一个混合框架的页面左侧的框架中设置一个链接列表，链接内容是右侧框架中的文档内容，导航框架指向文档内容不同的节区，即要在右侧文档中设置锚点，左侧的链接跳转到不同锚点，完成页面内容的变换浏览。例4.11 运用锚实现框架内的跳转。4.2.2 框架的应用设置5.设置内联框架 将一个页面直接嵌入到另一个页面中显示，这种技术称为浮动窗口。