第2章表格、表单和框架

上传人：9*** IP属地：湖北上传时间：2023-02-06 格式：PPTX 页数：97 大小：1.03MB 积分：30 举报 版权申诉

已阅读5页，还剩92页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第2章表格、表单和框架

内容提要小结2.3框架2.2表单2.1表格使用HTML，可以设计更复杂的网页元素，例如表格、表单以及框架等。表格可以使网页上显示的文字更加整齐，有条理。表格还可以实现网页的布局。表单是控件的容器，客户端提交给服务器端的信息通常放置在控件里，是设计网页必不可少的元素。框架可以将网页内容有效地进行划分，使不同的区域显示不同的内容。2.1表格一个完整的表格由一对<table>标签来定义。每个表格均有若干个单元行（由一对<tr>标签定义）组成。每个单元行由若干个单元格（由一对<td>标签定义）组成。表格内的具体信息放置在单元格中。单元格可以包含文本、图像、列表、段落、表单、水平线以及表格等。基本语法<table><tr> <th>head1</th> <th>head2</th> ……</tr><tr> <td>row1,cell1</td> <td>row1,cell2</td> ……</tr><tr> <td>row2,cell1</td> <td>row2,cell2</td> ……</tr> ……</table>例：2-1.HTML表格标题

表格标题，就是对表格内容的简单说明，用<caption>标记来定义。基本语法：<caption>表格标题</caption>语法解释：<caption>标记在表格标记范围内，表格标题一般显：示在表格上方，是对表格内容的简略说明。例：2-2.HTML划分表格结构从结构上来看，表格可以分成表头、主体和表尾三个部分，分别使用<thead>、<tbody>、<tfoot>标签来表示。表头和表尾一张表格只能有一个，而一张表格可以有多个主体。对于大型的表格来说，应该使<tfoot>出现在<tbody>的前面，这样浏览器在显示数据时，有利于加快表格的显示速度。另外，<thead>、<tbody>、<tfoot>标签内部都必须使用<tr>标签。与表格相关的元素或标签如表所示。元素说明table表格的最外层标记，代表一个表格tr单元行，由若干单元格横向排列组成td单元格，包含表格数据th单元格标题，与td作用相似，但一般作为表头行的单元格thead表头分组tfoot表尾分组tbody表格主体分组colgroup列分组caption表格标题划分表格结构使用<thead>、<tobody>、<tfoot>对表格进行结构划分的好处是可以先显示<tbody>的内容，而不必等整个表格下载完成后才能显示。无论<thead>、<tbody>、<tfoot>的顺序如何改变，<thead>的内容总是在表的最前面，<tfoot>的内容总是在表的最后面。划分表格结构

thead元素用于对HTML表格中的表头内容进行分组，tfoot元素用于对HTML表格中的总计行（页脚）内容进行分组，tbody元素用于对HTML表格中的数据主体内容进行分组。基本语法：<table><thead></thead><tfoot></tfoot><tbody></tbody></table>例2-3.HTML<table>标签的常用属性如表所示。属性说明align设置表格水平对齐方式bgcolor设置表格背景色border表格的边框的宽度，一般由CSS实现width以百分比或像素指定表格的宽度height以百分比或像素指定表格的高度cellspacing表格中相邻单元格的间距以及单元格外边沿与表格边沿之间的间距，一般由CSS实现cellpadding单元格的边沿和它的内容的间距，一般由CSS实现<table>标记属性1．设置表格水平对齐属性

在水平方向上，可以设置表格的对齐方式为：居左、居中、居右。如果没特别进行设置，则默认为居左排列。基本语法： <tablealign=””>语法解释：

属性可选的值有left、center和right，代表表格出现在窗口的左侧、中间和右侧位置。例2-4.HTML<table>标记属性2．设置表格背景色属性表格背景默认为白色，根据网页设计要求，设置bgcolor属性，可以设定表格背景颜色，以增加视觉效果。基本语法：<tablebgcolor=””>语法解释：

bgcolor属性规定表格的背景颜色。颜色描述方式为rgb(x,x,x)、#xxxxxx或colorname。例如，如果设置表格背景色为红色，可以使用的值为rgb(255,0,0)或#FF0000或red。设置形式如下。<tablebgcolor="rgb(255,0,0)"><table>标记属性3．设置表格边框宽度属性默认情况下表格边框为0，可以通过给表格添加border属性及属性值，实现为表格设置边框线宽度的目的。基本语法：<tableborder=””>语法解释：border的值为像素数，数字越大边框越宽。例如，设置表格的边框宽度为5个像素，设置形式如下。<tableborder=”5”><table>标记属性4．设置单元格间距和单元格边距属性通过cellspacing属性可以调整表格的单元格和单元格之间的间距，使得表格布局不会显得过于紧凑。单元格边距是指单元格中的内容与单元格边框的距离，通过设置cellpadding属性来调整。基本语法：<tablecellspacing=""cellpadding="">语法解释：

cellspacing属性设置单元格和单元格之间的间距，cellpadding属性设置文本与边框之间的距离，值为像素数，值越大间距越大。例如，设置表格的单元格间距为5，单元格边距为10，设置形式如下。<tablecellspacing="5"cellpadding="10"><table>标记属性5．设置表格宽度属性默认情况下，表格的宽度会根据内容自动调整。基本语法：<tablewidth=””>语法解释：表格的宽度可以是像素数也可以是百分比。例如，设置表格的宽度为600像素，设置形式如下。<tablewidth=”600”>table1.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>表格使用示例1-规则表格</title></head><body><tableborder="1"align="center"> <caption>学生信息表</caption> <thead> <tr> <th>学号</th> <th>姓名</th> <th>性别</th> </tr> </thead> <tfoot> <tr> <tdcolspan="3"align="center">这里是表尾</td> </tr> </tfoot> <tbody> <tr> <td>0001</td> <td>王明明</td> <td>男</td> </tr> … </tbody></table></body></html>table1.html的显示结果如图所示。<tr>标记属性 <tr>标记定义HTML表格中的行。通过<tr>标记属性值可以控制表格中行的显示效果，<tr>标记常用的属性及其含义如下表所示。属性描述align定义表格行的内容对齐方式。bgcolor规定表格行的背景颜色。valign规定表格行中内容的垂直对齐方式。<tr>标记属性1．设置行水平对齐方式属性基本语法：<tralign="">语法解释：

align属性规定表格行中内容的水平对齐方式。属性可选的值及其含义如下所述。left，左对齐内容（默认值）。right，右对齐内容。center，居中对齐内容（th元素的默认值）。justify，对行进行伸展，这样每行都可以有相等的长度。char，将内容对准指定字符。例2-5.HTML<tr>标记属性2．设置行背景颜色属性

bgcolor属性用来设置表格中该行单元格的背景颜色，默认为白色。基本语法：<trbgcolor="">语法解释：把个color属性规定表格行中单元格背景颜色。属性可选的值及其含义如下所述。颜色描述方式为rgb(x,x,x)、#xxxxxx或colorname。例如，如果设置行背景色为红色，可以使用的值为rgb(255,0,0)或#FF0000或red。例2-6.HTML<tr>标记属性3．设置行垂直对齐方式属性本属性用于设置表格行中内容的垂直对齐方式。基本语法：<trvalign="">语法解释：valign的值可以设置的值有top（居上）、botton（居下）和middle（居中），默认情况下是居中。例2-7.HTML

<td>标记属性

<td>标记中的属性用于设置表格中的标准单元格的一些特性。常见的属性设置如下表所示。

属性描述align规定单元格内容的水平对齐方式。bgcolor规定单元格的背景颜色。colspan规定单元格可横跨的列数。height规定表格单元格的高度。rowspan规定单元格可横跨的行数。valign规定单元格内容的垂直对齐方式。width规定表格单元格的宽度。<td>标记属性1．设置单元格跨列本属性用于设置表格中某一单元格跨几个列进行合并（横向合并）基本语法：<tdcolspan="">语法解释：colspan的值就是单元格进行横向合并时所跨的列数，例如某一个单元格和它右面两个单元格合并，colspan的值设为3。例2-8.HTML<td>标记属性2．设置单元格跨行本属性用于设置表格中某一单元格跨几个行进行合并（纵向合并）基本语法：<tdrowspan="">语法解释：

rowlspan的值就是单元格进行纵向合并时所跨的行数，例如某一个单元格和它下面两个单元格合并（若已经是最下面一格，则不能合并。数字是几就一共合并了几行），rowspan的值设为3。例2-9.HTMLtable3.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>表格使用示例3-不规则表格</title></head><body><tableborder="2"width="300"bordercolorlight="#FF9600" bordercolordark="#FF00EE"cellpadding="0"cellspacing="0"> <tr> <td>1</td> <tdrowspan="3">此单元格跨三行</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <tdcolspan="2">此单元格跨两列</td> </tr></table></body></html>table3.html的显示结果如图所示。

网页是网站构成的基本元素。在设计网页时，不但要考虑色彩的搭配、文字的变化和图片的处理等，而且还要考虑另一个非常重要的因素——网页的布局。使用表格布局网页

网页是网站构成的基本元素。在设计网页时，不但要考虑色彩的搭配、文字的变化和图片的处理等，而且还要考虑另一个非常重要的因素——网页的布局。网页布局类型

2．拐角型这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。3．标题正文型这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。

网页布局类型

4．左右框架型这是一种左右分别为两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。5．上下框架型与上面类似，区别仅仅在于是一种上下分为两页的框架。网页布局类型

6．综合框架型是左右框架型和上下框架型两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“拐角型”结构的，只是采用了框架结构。7．封面型这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果处理的好，会给人带来赏心悦目的感觉。网页布局实例

程序2-10是一个利用表格嵌套进行网页布局的实例……<body><tableborder="1"width="772"align="center"><tr><tdcolspan="2"height="70">banner图片</td>……<tablewidth="100%"height="100%"border="1"cellspacing="0"cellpadding="0"><tr>……</table> ……</table></body>表格布局网页实例<htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>无标题文档</title></head><body><tablewidth="500"border="0"><tr><tdcolspan="2"style="background-color:#FFA500;"><h1>MainTitleofWebPage</h1></td></tr><tr><tdstyle="background-color:#FFD700;width:100px;"><b>Menu</b><br>HTML<br>CSS<br>JavaScript</td><tdstyle="background-color:#eeeeee;height:200px;width:400px;">Contentgoeshere</td></tr><tr><tdcolspan="2"style="background-color:#FFA500;text-align:center;">Copyright©W3CSchool.cc</td></tr></table></body></html>2.3框架使用框架技术可以将一个浏览器窗口划分成多个区域，每个区域就是一个框架，每个框架可以单独引用一个源文件，这样可以实现在一个浏览器窗口显示多个源文件。源文件之间是相互独立的，互不影响。当其中一个源文件的内容发生变化时，其它的源文件不受影响。多个框架看成一个整体称为框架集。利用框架集可以实现网页的布局。使用框架既有优点也有缺点，其优点主要有：加载页面时不需要加载整个页面，只需要加载页面中的一个框架页，减少了数据传输，网页下载速度较快；方便制作导航栏，可以在框架集中使用框架来实现一些分栏布局；方便实现页面的重复利用；一个页面中的各个框架之间可以互相关联，方便实现局部刷新；其缺点主要有：会产生较多的引用页，管理不方便；框架的滚动条不好控制；无法使用浏览器的后退按钮；无法被搜索引擎搜索；多框架的页面会增加对服务器的HTTP请求；2.3.1定义框架

框架的基本结构主要分为框架集和框架两个部分。它是利用<frameset>标记与<frame>标记来定义。其中<frameset>标记用于定义框架集，而<frame>标记则用于定义框架。基本语法：<html><frameset……><frame……/><frame……/><frame……/></frameset><noframe></noframe>

</html>2.3.1定义框架

语法解释：<frameset>标记和<frame>标记中的省略号表示这两个标记中的具体属性，常用的属性将结合具体实例进行详细讲解。<frameset>标记不可以和<body>标记一起使用，否则将出现显示异常。<frameset>标记在使用时直接包含在<html>标记中即可。<frame>标记主要用来定义框架，用来控制所代表的窗口框架。<noframe></noframe>之间放置不支持Frame功能的浏览器显示的文本提示。2.3.2利用框架分割窗口

常见的窗口分割方式包括：水平分割、垂直分割和嵌套分割。具体采用哪种分割方式，取决于实际需要，可用<frameset>标记中的rows（水平分割）或cols（垂直分割）属性来进行分割。2.3.2利用框架分割窗口1．水平分割窗口rows属性可以定义窗口的水平分割。基本语法：<framesetrows="高度1，高度2,…,*"><frame><frame>…</frameset>2.3.2利用框架分割窗口语法解释：（1）rows属性的值代表各子窗口的高度，第一个子窗口高为高度1，第二个子窗口高为高度2，依此类推，而最后一个*，则代表最后一个子窗口的高度，值为其他子窗口高度分配后所剩余的高度。（2）设置高度数值的方式有两种：采用整数设置，单位为像素（px），语法如下：<framesetrows="100，200，*">用百分比设置，语法如下：<framesetrows="20％，50％，*">例2-11.HTML2.3.2利用框架分割窗口2．垂直分割窗口cols属性可以定义窗口的垂直分割。基本语法：<framesetcols="宽度1，宽度2,…,*"><frame><frame>…</frameset>语法解释：窗口垂直分割的宽度设置与水平设置时高度设置方式相同。例2-12.HTML2.3.3框架的嵌套

如果进行网页布局时需要创建同时包含横向和纵向的框架，那么就需要利用框架的嵌套创建复杂的框架集。进行框架嵌套时，就是在一个框架集中包含了另外一个框架集。也就是在一个框架集中原来应该为<frame>标记的位置由框架集标记代替。例2-13.HTML实验三1、用表格布局网页的应用，网页布局呈“国”字形，如图所示。2.3.4框架的初始化

框架初始化是指为各个框架指定初始显示的页面，也就是在<frame>标记中使用src属性指定框架中最初显示的页面。指定页面可以使用相对路径也可以使用绝对路径。基本语法：<framesetcols="宽度1，宽度2,…,*"><framesrc="url"><framesrc="url">…</frameset>语法解释：例2-14.HTML<frame>的src属性值设置为初始显示页面的路径。2.3.5创建浮动框架

在浏览网页的时候会看到在浏览器窗口含有孤立的子窗口，那么这就是浮动框架，插入浮动框架要使用成对的标记<iframe></iframe>，同样，需用src属性来设置框架中显示文件的路径。基本语法：<iframesrc="url"></iframe>语法解释：在<iframe>的src属性中设置显示页面的路径。与框架不同，浮动框架标记可以包含在<body>标记范围内。例2-15.HTML2.3.5创建浮动框架<iframe>标记中常见的属性如下表所示。属性描述align规定框架的水平对齐方式。width规定浮动框架窗口的宽度。height规定浮动框架窗口的高度。src规定显示网页文件的路径。name规定框架的名称。noresize规定框架尺寸是否可以调整。scrolling规定框架滚动条。frameborder规定框架边框。2.3.6框架控制

本节将详细介绍通过设置<frame>标记和<frameset>标记中的各种属性，来控制框架的显示效果。<frameset>标签的常用属性如表所示。属性说明colspixels,%,*,定义框架集中列的数目和尺寸rowspixels,%,*,定义框架集中行的数目和尺寸frameborder0或1，隐藏或显示边框，默认值为1framespacing边框宽度，以像素为单位bordercolor边框颜色scrollingyes,no,auto，是否显示滚动条noresize不需要赋值，禁止用户调整框架大小

控制框架边框

1．框架的隐藏基本语法：<frameframeborder=””>或<framesetframeborder=””>语法解释：<frame>标记中的frameborder属性可以控制框架的边框。属性可选的值为0或1，值为0时没有边框，值为1时生成3D边框（此为默认值）。只有将所有相邻的框架的边框都设置为0是，才能隐藏边框。<frameset>标记中的frameborder属性可以控制框架集中所有子窗口的边框。例2-16.HTML

控制框架边框2．框架的边框基本语法：<framesetborder=””>语法解释：<frameset>标记中的border属性可以控制框架边框的宽度，单位为像素。例2-17.HTML设置框架的边框宽度

控制框架边框3．框架滚动条和不可移动性基本语法：<framescrolling=””noresize>语法解释：<frame>标记中的scrolling属性值为yes、no或auto。当值为yes时，强制为框架添加滚动条。当值为no时，框架内不加滚动条。当值为auto时根据内容的多少，需要时自动添加滚动条（默认值）。当把鼠标滑到框架边框时，可以通过拖动调整框架大小，noresize属性可以固定框架的位置和大小。例2-18.HTML

控制框架子窗口

1．定义子窗口名称基本语法：<framename=””>语法解释：<frame>标记中的name属性用来指定框架的名称。指定框架名称后可以指定超链接的target属性值为框架名称，当单击超链接时，在指定框架内显示超链接目标。例2-19.HTML

控制框架子窗口2．设置子窗口边距基本语法：<framemarginwidth=””marginheight=””>语法解释：

marginwidth属性可以控制框架内容和框架左右边框之间的距离，marginheight属性则控制框架内容和框架上下边框之间的距离。这两属性的取值单位都是像素。例2-20.HTML2.3.7使用框架布局网页实例

程序2-21是一个利用框架布局网页的实例，这个程序运用了框架嵌套实现了一个类似于程序2-10的网页布局<html><framesetrows="70,300,40"><framesrc=“2-21top.html"><framesetcols="172,600"><framesrc=“2-21left.html"marginheight="0"marginwidth="0"><framesrc=“2-21right.html"name="right"></frameset><framesrc=“2-21bottom.html"></frameset></html>2.3.7使用框架布局网页实例

程序2-21外层框架设置了三个水平分割的子窗口，3个子窗口的高度分别是70像素、300像素和40像素，第2个子窗口又被垂直分割成两个子窗口宽度分别为172像素和600像素。顶部初始化网页为程序2-21top，程序2-21bottom和程序2-21right内容与它内容相似。<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>banner图片</title></head><body><palign="center">banner图片</p></body></html>2.3.7使用框架布局网页实例

左侧导航栏初始化程序为程序2-21left，注意程序中链接的target属性值为右侧框架名称“right”。<html>……<tdheight="25%"><ahref="#"target="right">栏目1导航</a></td>

……<tdheight="25%"><ahref="#"target="right">栏目2导航</a></td>

……

……</tr></table></body></html>下面的实例为一个混合框架，先垂直划分，然后水平划分，当单击左侧框架的超级链接时，在右侧框架中显示资源文件。frameset.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><framesetrows="20%,*"><framename="top"src="top.html"/><framesetcols="40%,*"><framename="left"src="left.html"/><framename="right"src="ch1.html"/></frameset></frameset></html>top.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>top</title></head><bodybgcolor="#FFBFFF"><h3align="center">这是TOP</h3></body></html>left.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>left</title></head><bodybgcolor="#A3D1D1"><ul><li><ahref="ch1.html"target="right">第1章</a></li><li><ahref="ch2.html"target="right">第2章</a></li><li><ahref="ch3.html"target="right">第3章</a></li></ul></body></html>ch1.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>ch1</title></head><bodybgcolor="#FFDCB9"><h3>这是第1章的内容</h3></body></html>ch2.html,ch3.html的源代码与ch1.html类似。请求frameset.html的显示结果如图所示。单击左边框架中的“第3章”，显示结果如图所示。实验32、用框架布局网页的应用，页面显示如下。2.2表单表单是一个容器，用来收集客户端要提交到服务器端的信息。客户端将信息填写在表单中的控件中。当单击表单中的提交按钮时，表单中包含的控件的信息就会被提交给表单的action属性所指定的处理程序。表单的使用非常广泛，是网页上用于输入信息的区域，例如向文本框中输入文字，在选项框里进行选择等。从表单的设计到服务器返回处理结果的流程包括：通过表单控件来设计表单；通过浏览器将表单呈现给客户端；客户端填写相关的信息，并单击表单中的提交按钮，将表单提交给处理程序；服务器处理完表单后，将生成的结果返回给客户端浏览器；什么是表单

表单实质上就是用于实现网页浏览者和服务器端之间信息交换的一种页面元素，在WWW上被广泛用于各种信息的搜集和反馈。在web应用中，与表单工作相关的有两个重要组成部分：一是描述表单的HTML源代码；二是用于处理用户在表单域中输入信息的服务器端应用程序，如ASP、JSP等。表单控件的类型

表单中通常包含两类元素，一种是普通的页面元素如文本、图像、表格等，另一种是用于收集信息的特定页面元素，即表单控件如按钮、文本框、密码框等。表单中的每个控件都有特定的名称，这个名称有效范围是所在表单。每个控件都有初始值和当前值，初始值是由网页设计者预先指定的，当前值是由用户与表单控件交互操作决定的，当提交表单时，会把控件中的当前值提交到服务器端。表单控件对于客户端用户和服务器端处理程序交互起着中间数据载体的作用。1．<form>标签在HTML中使用一对<form>标签来设计表单，其格式如下：<formname=“…”action=“…”method=“post/get”target=“…”enctype=“…”onsubmit=“…”onreset=“…”accept=“…”accept-charset=“…”>表单中包含的控件或文字</form>其中：name指的是表单的名字。action指的是处理表单或者接收表单信息的url。method指的是表单提交的方法，默认值为get。target指的是目标窗口。enctype属性可选，指的是提交数据的格式，可以指定客户端提交到服务器端的数据的编码类型。onsubmit指的是表单提交时调用的脚本语句或函数。onreset指的是表单重置时调用的脚本语句或函数。2．<input>标签表单中可以包含很多控件，其中，用<input>标签定义的控件有单行文本框、密码框、提交按钮、重置按钮、普通按钮、单选按钮、复选框以及上传文件按钮等。这些控件是表单的核心控件，在表单设计中被频繁地使用。（1）单行文本框单行文本框指的是表单中可以输入一行文本的输入框，通过设置<input>标签的type属性为text来指定。其格式如下：<inputtype=“text”name=“…”value=“…”size=“…”maxlength=“…”onchange=“…”onselect=“…”onfocus=“…”/>其中：name指的是单行文本框的名称；value指的是单行文本框的默认的初始值；size指的是单行文本框的显示宽度；maxlength指的是单行文本框允许用户输入的最大的字符数；onchange指的是当文本框内文本发行改变时调用的脚本语句或函数；onselect指的是当文本框内的文本被选中时调用的脚本语句或函数；onfocus指的是当文本框获得焦点时调用的脚本语句或函数；例2-22.HTML（2）密码框密码框通过指定<input>标签的type属性值为password来实现。在密码框中输入字符时，显示的都是*或者实心圆点，密码框的用法和单行文本框的用法基本相同，其格式如下：<inputtype=“password”name=“…”value=“…”size=“…”maxlength=“…”onchange=“…”onselect=“…”onfocus=“…”/>例2-23.HTML（3）隐藏域表单中的隐藏域在浏览器中是不可见的，因此用户不能借助隐藏域进行交互操作。一般通过隐藏域来传递一些为开发者服务的信息，例如动态方法的调用、Session会话跟踪等。隐藏域通过指定<input>标签的type属性值为hidden来实现，其格式如下：<inputtype=“hidden”value=“…”name=“…”/>（4）提交按钮提交按钮通过指定<input>标签的type属性值为submit来实现。单击了提交按钮后，提交按钮所在的表单的内容会被提交到表单标签中action属性所指的处理程序。提交按钮的使用格式如下：<inputtype=“submit”value=“…”/>其中，value指的是提交按钮上显示的提示文字，一般为“Submit”或者“提交”。（5）重置按钮重置按钮通过指定<input>标签的type属性值为reset来实现。当单击重置按钮时，重置按钮所在的表单中的所有控件的内容将会被清除，回到控件的默认的初始值，可以重新在控件中输入数据。重置按钮的使用格式如下：<inputtype=“reset”value=“…”/>其中，value指的是重置按钮上显示的提示文字，一般为“Reset”或者“重置”。例2-24.HTML（6）图像按钮有时候为了达到比较好的视觉效果，有人会使用图片代替按钮来提交或者重置表单数据。类型为图片(type="image")的按钮，其默认操作是提交表单。基本语法：<form><inputname=""type="image"src=""></form>语法解释：单击该按钮时，浏览器就会将表单的输入信息传送给服务器。image类型中的src属性是必需的，它用于设置图像文件的路径。例2-25.HTML（7）单选按钮单选按钮通过指定<input>标签的type属性值为radio实现，其格式如下：<inputtype=“radio”name=“…”value=“…”onclick=“…”onfocus=“…”checked/>其中：name指的是单选按钮的名称，多个单选按钮属于同一个选项组，必须具有相同的name值；value指的是单选按钮的值；checked属性项可选，如果单选按钮的默认状态为被选中，则将checked写在其属性列内；如果不将checked写在其属性列内，则单选按钮的默认状态为未选中；onclick指的是当单击单选按钮时执行的脚本语句或脚本函数；onfocus指的是当单选按钮获得焦点时执行的脚本语句或脚本函数；（8）复选按钮复选按钮通过指定<input>标签的type属性值为checkbox来实现。其使用格式如下：<inputtype=“checkbox”name=“…”value=“…”onclick=“…”onfocus=“…”checked/>复选按钮默认的选中状态也通过checked指定，多个复选按钮是否处于同一个选项组也通过name属性指定。其属性可参照单选按钮的属性说明。例2-26.HTML（9）普通按钮除了以上提交按钮和重置按钮之外，还可以使用普通按钮。通过设置<input>标签的type属性值为button来实现。在表单中使用普通按钮，必须使用onclick调用处理脚本或脚本函数，使用格式如下：<inputtype=“button”name=“…”value=“…”onclick=“…”onfocus=“…”/>其中：name指的是普通按钮的名字；value指的是普通按钮上的提示文字；onclick指的是当单击普通按钮时执行的脚本语句或函数；onfocus指的是当普通按钮获得焦点时执行的脚本语句或函数；（10）上传文件域上传文件域通过指定<input>标签的type属性值为file来实现。它包括一个文本框和一个按钮。其格式如下：<inputtype=“file”name=“…”value=“…”/>其中：name指的是上传文件域的名称；value指的是上传文件域中的按钮的提示文字，一般为“选择文件”或“浏览……”。例2-27.HTML实验四1、用表单实现用户注册的应用，页面显示如图所示。form1.html中的表单提交给form1_ok.jsp处理，form1_ok.jsp显示用户填写的信息。form1.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>表单使用示例1</title></head><body><formname="form1"action="form1_ok.jsp"method="post"><tableborder="1"width="300"cellpadding="0"cellspacing="0"> <tr> <tdalign="left">姓名</td> <tdalign="left"><inputtype="text"name="name"size="10"/></td> </tr> <tr> <tdalign="left">密码</td> <tdalign="left"><inputtype="password"name="password"size="10"/></td> </tr> <tr> <tdalign="left">性别</td> <tdalign="left"><inputtype="radio"name="gender"value="male" checked/>男<inputtype="radio"name="gender"value="female"/>女</td> </tr> <tr> <tdalign="left">爱好</td> <tdalign="left"><inputtype="checkbox"name="hobby" value="swimming"/>游泳<br/> <inputtype="checkbox"name="hobby"value="reading"/>读书<br/> <inputtype="checkbox"name="hobby"value="music"/>音乐</td> </tr> <tr> <tdalign="center"colspan="2"><inputtype="submit"value="提交"/> <inputtype="reset"value="重置"/></td> </tr></table></form></body></html>form1_ok.jsp:<%@pagelanguage="java"contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>表单使用示例1-显示表单内控件的值</title></head><body><% Stringname=request.getParameter("name"); Stringpassword=request.getParameter("password"); Stringgender=request.getParameter("gender"); String[]hobby=request.getParameterValues("hobby"); out.print("name:"+name+"<br/>"); out.print("password:"+password+"<br/>"); out.print("gender:"+gender+"<br/>"); if(hobby!=null){ out.print("hobby:"); for(inti=0;i<hobby.length;i++){ out.print(hobby[i]+""); } }%></body></html>验证form1.html及form1_ok.jsp的显示结果，需要将其部署到JavaWeb服务器上，在浏览器的地址栏里输入http://localhost:8080/ch02/form1.html，填写完相应的信息后的显示结果如图所示。提交以后的结果如图所示。3．<select>标签在表单中有时会用到下拉列表，在下拉列表中既可以实现单选，也可以实现多选。表单提交之后，服务器可以获取下拉列表中选中的项目对应的value值，或者收集用逗号分隔的多个选项，将其合并成一个单独的参数列表。下拉列表使用一对<select>标签来实现，其格式如下：<selectname=“…”size=“…”onfocus=“…”onblur=“…”onchange=“…”multiple><optionvalue=“…”selected=“selected”>选项1提示信息</option><optionvalue=”…”>选项2提示信息</option></select>其中：name指的是下拉列表的名称；size指的是下拉列表中可见选项的数目；onfocus指的是当下拉列表获得焦点时调用的语句或脚本函数；onblur指的是当下拉列表失去焦点时调用的语句或脚本函数；onchange指的是当下拉列表的选中项发生变化时调用的语句或脚本函数；multiple指的是允许下拉列表选择多项，如果没有此属性，则下拉列表只能选择单项；如果设置此属性，下拉列表会显示成平铺状态。例2-28.HTML4．<textarea>标签在HTML中，使用一对<textarea>标签来实现多行文本框。其格式如下：<textareaname=“…”cols=“…”rows=“…”wrap=“off/virtual/physical”readonly=“readonly”onfocus=“…”onblur=“…”onchange=“…”>…</textarea>其中：name指的是

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

第2章表格、表单和框架

文档简介

温馨提示

最新文档

评论

第2章表格、表单和框架

文档简介

温馨提示

最新文档

评论

相关文档