目录 2
1.网页表格制作
2.网页表格装饰
3.网页元件设计
4.网页按钮
3.表格与表单 (组件 )
3 表格与表单
表格标签使用在网页中可是个重量级的角色，不要以为表格只是用
来填写格式化的 数据，其实表格最重要的功能是用来“排版”！虽
然有很多“所见即所得”的网页编辑软件提供你快速建立各种样式
表格的功能，但是在 ASP程序中却是毫无用武之处，因此，学会表
格标签的使用就显得非常重要了。
3－ 1 网页表格制作
网页表格标签：要制作网页表格必须使用到三组标签，分别是＜
TABLE＞＜ /TABLE＞、＜ TR＞与＜ TD＞＜ /TD＞，我们在纸上绘制表
格，通常都是先画表格最外围的大方框对吧，在网页表格的制作上
也是一样，我们必须先使用＜ TABLE＞＜ /TABLE＞这组网页标签来
定义表格的方框。
定义表格行数,完成表格大方框的制作后，
接着就要制定表格的行数（画横线），
要定义表格行数则必须使用＜ TR＞＜ /TR＞这组网页标签。
定义表格列数,要定义表格列数（画直线）则必须使用＜ TD＞＜
/TD＞这组网页标签。
说明
☆于网页中先定义表格的外框＜ TABLE＞＜ /TABLE＞标
签,border属线为定义表格框线的粗细，数值越大框
线越粗。
☆在＜ TABLE＞＜ /TABLE＞标签之间加入行标签＜ TR＞
＜ /TR＞，这样就可以产生我们的标题栏位，接着在＜
TR＞＜ /TR＞中加入三组＜ TD＞＜ /TD＞标签这样可将
行切成三份，然后分别在三组＜ TD＞＜ /TD＞标签中填
入数学、自动控制原理、传感器技术，这样就完成了
表格标题制作。
☆分数列请依法炮制。
☆标准的网页表格制作就是这么容易，请大家自己练
习制作一个 3× 3的表格吧！
例 1
<html>
<head>
<title>2X3网络表格
</title>
</head>
<body>
<table border="1">
<tr>
<td>高等数学 </td>
<td>自动控制原理 </td>
<td>传感器技术 </td>
</tr>
<tr>
<td>80</td>
<td>90</td>
<td>85</td>
</tr>
</table>
</body>
</html>
例 2<html>
<head>
<title>3X3网络表格 </title>
</head>
<body>
<table border="3">
<tr>
<td>高等数学 </td>
<td>自动控制原理 </td>
<td>传感器技术 </td>
</tr>
<tr>
<td>80</td>
<td>90</td>
<td>85</td>
</tr>
<tr>
<td>5学分 </td>
<td>4学分 </td>
<td>2学分 </td>
</tr>
</table>
</body>
</html>
3－ 1－ 1 合并列
制作标准网页表格（九宫格）是简易的事，但若是我们的表格并不是那么规矩时该怎么
处理？这个时就可以利用定义表格列数＜ TD＞网页标签的,COLSPAN”属性。
如果希望将数据栏位修改一下，则我们必须使用合并列的功能，格式：＜ COLSPAN＝
“合并列数”＞。
3－ 1－ 2 合并行
既然 COLSPAN属性是＜ TD＞网页标签专属的属性只能合并左右栏位，那如果要有一个
跨行的数据格该怎么办？要建立一个跨行的数据格则必须使用,ROWSPAN”属性，利用
上一个合并列的例子修改而成，我们在科目的左方再加上一个“成绩列表”的数据格，
同时这个数据必须直跨三行，我们先来看看原始代码：
在原始代码中，我们可以发现跨列的 COLSPAN属性值变成 3，为什么就成 3？因为我们加
入了一个跨越三行的数据格栏位，因此就变成每一行都有三栏之故。
接着我们在第二行中加入跨越三行的数据格栏位的标签语句＜ td rowspan=”3”＞成绩列
表＜ /td＞，其他的都没有变动。
注意
虽然我们的“成绩列表”数据格是直跨三行的，但是我们只要在第二行中加入＜ td
rowspan=”3”>标签语句就好，其余的行都不用加了，因为＜ tdrowspan=”3”＞标签语
句就代表了我们建立的数据格栏是向下跨越三行了，千万不要再画蛇添足，否则将会有
错误的情形产生。
<html> 例 3
<head><title>合并行与列 </title></head>
<body>
<table border="1"><tr>
<td colspan="3">自动化专业 2000级学生平均成绩列表
</td>
</tr>
<tr><td rowspan="3">2003年考试成绩列表 </td>
<td>高等数学 </td><td>78</td></tr>
<tr>
<td>自动控制原理 </td><td>95</td>
</tr><tr>
<td>传感器技术 </td><td>85</td></tr>
</table>
</body>
</html>
3－ 2 网页表格装饰布置
最基础的表格呈现就是它那外围的大框框，也就是＜ TABLE＞标
签的,border” 属性设置。
指定表格框线＜ TABLE BORDER＝“数值”＞
BORDER属性值越大，表格的外框线越粗，当然你也可以把它设
置为 0，这们就没有表格的外框线了。
范例
3－ 2－ 1 表格框线颜色设置
指定表格框线颜色
＜ TABLE BORDERCOLOR,颜色值”＞
BORDERCOLOR属性的颜色值大多使用 RGB16进制的颜色码来设置，
例如要设置为红色，则颜色码就是“＃ FF0000”,当然你也可
以用英文单句,RED” 来替代了。
范例
例 4 <html>
<head>
<title>表格框线设置
</title>
</head>
<body>
<table border="5">
<tr><td>高等数学
</td><td>自动控制原理
</td><td>传感器技术
</td></tr>
<tr><td>80</td><td>90
</td><td>85</td></tr>
</table>
</body>
</html>
例 5 <html>
<head>
<title>表格框线颜色设置
</title>
</head>
<body>
<table border="2"
bordercolor="#ff0000">
<tr><td>高等数学 </td><td>
自动控制原理 </td><td>传感
器技术 </td></tr>
<tr><td>80</td><td>90</td>
<td>85</td></tr>
</table>
</body>
</html>
3－ 2－ 3 表格背景图片设置
指定表格背景图片
＜ TABLE BACKGROUND＝“图片文件名”＞
注意，表格标签的 BACKGROUND属性值是链接一个图片文件，如
果图片与网页本身不是位于同一个目录下，我们就要再指定图
片文件的路径。
范例
3－ 2－ 4 表格宽度设置
＜ TABLE WIDTH＝“宽度设置”＞
表格标签的 WIDTH属性是用来设置表格宽度，其宽度的设置分为
像素或百分比，使用百分比来设置宽度，则表格的宽度会随着
显示画面的大小自动调整宽度，若使用像素为单位来设置，则
表格的宽度不会随着显示画面的大小而调整宽度。
例 6<html>
<head>
<title>表格背景颜色设置
</title>
</head>
<body>
<table border="2"
bordercolor="#ff0000"
bgcolor="yellow">
<tr><td>高等数学
</td><td>自动控制原理
</td><td>传感器技术
</td></tr>
<tr><td>80</td><td>90
</td><td>85</td></tr>
</table>
</body>
</html>
例 7 <html>
<head>
<title>表格背景图片设置
</title></head>
<body>
<table border="6"
background="0C.gif">
<tr><td>高等数学 </td><td>
自动控制原理 </td><td>传感
器技术 </td></tr>
<tr><td>80</td><td>90</td
><td>85</td></tr>
</table>
</body>
</html>
3－ 3 网页表单制作
表单无法独立于网页程序之外（例如 ASP），但是网页
程序的数据仁慈传递又非得靠表单不可，因此，网页
表单的地位在网页程序的写作上扮演着非常、非常重
要的角色。
表单只是一个统称，表单其实还包含了很多的表单组
件，例如：单行文字输入框、单选按钮等，光有表单
是没用的，表单内必须还有表单组件的存在才有意义。
在本章节中，我们将就各个表单组件做个介绍，至于
表单与网页程序的互动就留到实作演练的章节再谈吧。
3－ 3－ 1 送出与清除按钮
送出与清除按钮是最常见的表单组件，尤其是送出按
钮，一旦按下送出按钮，则浏览者在网页填写的数据
就会送交表单所指定的网页程序进行处理。清除按钮
的用处其实不大，按下清除按钮会将浏览者在表单相
关栏位中所填写的数据清除，方便浏览者重新填写数
据。
送出与清除按钮组件具有下列属性：
NAME,指定按钮组件的名称 (对于送出与清除按钮可省
略该项属性设置 )
TYPE,指定组件的类型 (送出按钮为” SUBMIT”,清除
按钮为” RESET”)
VALUE,出现在按钮组件上的文字
在表单中布置送出与清除按钮
例 8<html>
<head>
<title>表格宽度设置
</title>
</head>
<body>
<table border="2"
background="0B.gif"
width="500">
<tr><td>计算机原理
</td><td>动态网页设计
</td><td>工业总线
</td></tr>
<tr><td>80</td><td>90</t
d><td>85</td></tr>
</table>
</body>
</html>
例 9
<html>
<head>
<title>发送与清除按键
</title>
</head>
<body>
<FORM>
<INPUT TYPE="SUBMIT"
VALUE="发送 ">
<INPUT TYPE="RESET"
VALUE="清除 ">
</FORM>
</body>
3－ 3－ 2 单行文字输入框
NAME,指定单行文字输入框组件的名称 (一定要写,是与 ASP程序相
对应的变量名称 )
TYPE,指定组件的类型,将属性设定为” TEXT”,就代表加入的元件
是单行文字输入框
VALUE,默认出现的文字输入框内的文字内容,
MAXLENGTH,设置单行文字输入框内可输入的数据长度
SIZE,设置单行文字输入框外观宽度
3－ 3－ 3 密码输入栏位
NAME,指定密码输入栏位组件的名称 (一定要写,是与 ASP程序相对
应的变量名称 )
TYPE,指定组件的类型,将属性设定为” PASSWORD”,就代表加入的
元件是密码输入栏位
VALUE,默认出现的密码输入栏位的文字内容,实际出现的是” *”
星号,无意义,
MAXLENGTH,设置密码输入栏位内可输入的数据长度
SIZE,设置密码输入栏位外观宽度
例 10
<html>
<head>
<title>单行文字框
</title>
</head>
<body>
<FORM>
请你在下列栏中填写住址
<BR>
<INPUT TYPE="TEXT"
VALUE="填写数据 "
NAME="ADDRESS">
</FORM>
</body>
</html>
例 11
<html>
<head>
<title>密码输入栏
</title>
</head>
<body>
<FORM>
请输入你的密码 <BR>
<INPUT TYPE="PASSWORD"
NAME="INWORD">
</FORM>
</body>
3－ 3－ 4 多行文字输框
NAME,指定多行文字输框组件的名称 (一定要写,是与 ASP程序相
对应的变量名称 )
COLS:设置多行文字输框需要显示的列数
ROWS:设置多行文字输框需要显示的行数
3－ 3－ 5 单选式选择钮
NAME,指定单选式选择钮组件的名称 (一定要写,是与 ASP程序相
对应的变量名称,若有多个单选式选择钮,则每个单选式选择钮
的属性值都必是相同的,以便构成群组关系,)
TYPE,指定组件的类型,将属性设定为” RADIO”,就代表加入的
元件是单选式选择钮
VALUE,默认出现的单选式选择钮的数值内容,
CHECKED,设置单选式选择按钮组件是否预先核取
注意
选择钮只有单选的功能，也就是说表单中全部的选择钮栏位只
有一个能生效，不能复选，虽然名称都相同，但是表单传送出
去的选择钮“值”却是不同的。
例 12
<html>
<head>
<title>多行文字输入栏
</title></head>
<body>
<FORM>
请认真填写你的意见
<BR>
<TEXTAREA COLS="30"
ROWS="3" NAME="MEMO">
</TEXTAREA>
</FORM>
</body>
</html>
例 13
<html><head>
<title>单选式选择键 </title>
</head><body>
<FORM>
请选择你喜欢的职业 <BR>
<INPUT TYPE="RADIO"
NAME="JOB" VALUE="计算机信息
业 " CHECKED>计算机信息业
<INPUT TYPE="RADIO"
NAME="JOB" VALUE="化学工程 ">
化学工程 <INPUT TYPE="RADIO"
NAME="JOB" VALUE="信息控制工
程 ">信息控制工程
</FORM>
</body>
</html>
3-3-6 复选式核取钮
NAME,指复选式核取钮组件的名称 (一定要写,是与 ASP程序相对应的变量名称,若
有多个复选式核取钮,则每个复选式核取钮的属性值都必是相同的,以便构成群组
关系,)
TYPE,指定组件的类型,将属性设定为” CHECKBOX”,就代表加入的元件是复选式
核取钮
VALUE,默认出现的复选式核取钮的数值内容,
CHECKED,设置复选式核取钮组件是否预先核取
3－ 3－ 7 下拉式选单
“下拉式菜单”组件是在 Frontpage编辑器中称呼，一般我们都称它为“下拉式
选单”，下拉式菜单就是将所有备选的项目集中起来放在一个独立的栏位中，使
用者只能“选”，不能输入！要产生一个下拉式选单，只要利用 Html标签＜
SELECT Name=,选单名称”＞就可以创造出一个下拉式选单，但是选单内总要
有选项吧！所以我们还得利用＜ OPTION Value=,选项值”＞标签来建立备选的
项目。
NAME,指定下拉式选单项目的名称 (一定要写,是与 ASP程
序相对应的变量名称 )
VALUE,默认出现的下拉式选单的数据内容,
SIZE,设置下拉式选单的显示项目数量
例 14 <html>
<head>
<title>复式核取键 </title>
</head>
<body><FORM>
请选择你喜欢的音乐类型 <BR>
<INPUT TYPE=,CHECKBOX”
NAME=,MUSIC” VALUE=“摇
滚” >摇滚 <INPUT
TYPE="CHECKBOX"
NAME="MUSIC" VALUE="爵士 ">
爵士
<INPUT TYPE="CHECKBOX"
NAME="MUSIC" VALUE="古典 ">
古典
</FORM>
</body>
</html>
例 15<html>
<head>
<title>下拉式选单名 </title>
</head>
<body>
<form>
你所学的专业是 <p>
<select name="下拉式选单名 ">
<option value="1自动化 ">自动化
</option>
<option value="2电气工程及自动化
">电气工程及自动化 </option>
<option value="3计算机应用 ">计算
机应用 </option>
<option value="4电子信息 ">电子信
息 </option>
</select>
</form>
</body>
</html>
● 下拉式选单的变形
下拉式选单除了单栏的显示方式外（单行文字框加下拉列表按
钮），它还可变成含有上下移动列表按钮的选择区块，变形的
方法是增加下拉式选单的 Size属性设置,例如下例：
● 可复选的下拉式菜单
下拉式选单通常都是只能选取一个备选项目，但是如果题目是
可以多重选择的例如让浏览者选取他喜欢的休闲项目，那我们
该如何处理？
要让下拉式选单具有多重选取（复选）的功能，我们必须为下
拉式选单组件再加入一个 MULTIPLE属性设置！
提示
1,当 Size属性的设置与备选项目的数目相同时，则下拉式选单
就变成了, 选项列表,,例如上例中我们将 Size属性值设为 4，
而备选项目的数目刚好也是 4，所以下拉式选单就变成了选项列
表。
例 16 <html>
<head>
<title>下拉式选单变形 </title>
</head><body>
<form>
你所学的专业是,<p>
<select Size="2" name="下拉式选单
变形 ">
<option value="1自动化 ">自动化
</option>
<option value="2电气工程及自动化 ">
电气工程及自动化 </option><BR>
<option value="3计算机应用 ">计算机
应用 </option>
<option value="4电子信息 ">电子信息
</option>
<option value="4电子测量与应用 ">电
子测量与应用 </option>
</select></form>
<IMG SRC="bg.gif">
</body>
</html>
例 17<html>
<head>
<title>下拉式选单特例 </title>
</head><body>
<form>
你所喜欢的休闲活动是,<p>
<select Size="6" MULTIPLE
name="下拉式选单特例 ">
<option value="1上网聊天 ">上网聊
天 </option>
<option value="2健美操 ">健美操
</option>
<option value="3玩电子游戏 ">玩电
子游戏 </option>
<option value="4徒步旅游 ">徒步旅
游 </option>
<option value="5打扑克 ">打扑克
</option>
<option value="6看电影 ">看电影
</option></select>
</form></body>
</html>
综合练习
制作一个网页，内容如下：
1：姓名、系部、专业、
2：个人爱好。（三项以上）
3：所学课程的成绩表单。（三门以上）
4：个人喜欢的业余活动构成的下拉式选单。（三项以
上）
5：别人对你看法的单选式按键（二项）
6：插入必要的图画及艺术字。
发到 EMAIL地址为：
kalu03@vip.sina.com
kanglu04a@sina.com
操作平台 IIS与 PWS
单机上的浏览器无法打开我们所设计的动态
网页,我们必须通过有能力打开 ASP动态网页
的网络服务器模拟机构 PWS (Personal Web
Server) 或 IIS (Internet Information
Server )来建立我们 ASP动态网页设计的操
作平台。就将安装 PWS或 IIS模拟机制的软件
WINDOWS 98/95 安装 PWS4.0
WINDOWS 2000/XP 安装 IIS 5.0
1.网页表格制作
2.网页表格装饰
3.网页元件设计
4.网页按钮
3.表格与表单 (组件 )
3 表格与表单
表格标签使用在网页中可是个重量级的角色，不要以为表格只是用
来填写格式化的 数据，其实表格最重要的功能是用来“排版”！虽
然有很多“所见即所得”的网页编辑软件提供你快速建立各种样式
表格的功能，但是在 ASP程序中却是毫无用武之处，因此，学会表
格标签的使用就显得非常重要了。
3－ 1 网页表格制作
网页表格标签：要制作网页表格必须使用到三组标签，分别是＜
TABLE＞＜ /TABLE＞、＜ TR＞与＜ TD＞＜ /TD＞，我们在纸上绘制表
格，通常都是先画表格最外围的大方框对吧，在网页表格的制作上
也是一样，我们必须先使用＜ TABLE＞＜ /TABLE＞这组网页标签来
定义表格的方框。
定义表格行数,完成表格大方框的制作后，
接着就要制定表格的行数（画横线），
要定义表格行数则必须使用＜ TR＞＜ /TR＞这组网页标签。
定义表格列数,要定义表格列数（画直线）则必须使用＜ TD＞＜
/TD＞这组网页标签。
说明
☆于网页中先定义表格的外框＜ TABLE＞＜ /TABLE＞标
签,border属线为定义表格框线的粗细，数值越大框
线越粗。
☆在＜ TABLE＞＜ /TABLE＞标签之间加入行标签＜ TR＞
＜ /TR＞，这样就可以产生我们的标题栏位，接着在＜
TR＞＜ /TR＞中加入三组＜ TD＞＜ /TD＞标签这样可将
行切成三份，然后分别在三组＜ TD＞＜ /TD＞标签中填
入数学、自动控制原理、传感器技术，这样就完成了
表格标题制作。
☆分数列请依法炮制。
☆标准的网页表格制作就是这么容易，请大家自己练
习制作一个 3× 3的表格吧！
例 1
<html>
<head>
<title>2X3网络表格
</title>
</head>
<body>
<table border="1">
<tr>
<td>高等数学 </td>
<td>自动控制原理 </td>
<td>传感器技术 </td>
</tr>
<tr>
<td>80</td>
<td>90</td>
<td>85</td>
</tr>
</table>
</body>
</html>
例 2<html>
<head>
<title>3X3网络表格 </title>
</head>
<body>
<table border="3">
<tr>
<td>高等数学 </td>
<td>自动控制原理 </td>
<td>传感器技术 </td>
</tr>
<tr>
<td>80</td>
<td>90</td>
<td>85</td>
</tr>
<tr>
<td>5学分 </td>
<td>4学分 </td>
<td>2学分 </td>
</tr>
</table>
</body>
</html>
3－ 1－ 1 合并列
制作标准网页表格（九宫格）是简易的事，但若是我们的表格并不是那么规矩时该怎么
处理？这个时就可以利用定义表格列数＜ TD＞网页标签的,COLSPAN”属性。
如果希望将数据栏位修改一下，则我们必须使用合并列的功能，格式：＜ COLSPAN＝
“合并列数”＞。
3－ 1－ 2 合并行
既然 COLSPAN属性是＜ TD＞网页标签专属的属性只能合并左右栏位，那如果要有一个
跨行的数据格该怎么办？要建立一个跨行的数据格则必须使用,ROWSPAN”属性，利用
上一个合并列的例子修改而成，我们在科目的左方再加上一个“成绩列表”的数据格，
同时这个数据必须直跨三行，我们先来看看原始代码：
在原始代码中，我们可以发现跨列的 COLSPAN属性值变成 3，为什么就成 3？因为我们加
入了一个跨越三行的数据格栏位，因此就变成每一行都有三栏之故。
接着我们在第二行中加入跨越三行的数据格栏位的标签语句＜ td rowspan=”3”＞成绩列
表＜ /td＞，其他的都没有变动。
注意
虽然我们的“成绩列表”数据格是直跨三行的，但是我们只要在第二行中加入＜ td
rowspan=”3”>标签语句就好，其余的行都不用加了，因为＜ tdrowspan=”3”＞标签语
句就代表了我们建立的数据格栏是向下跨越三行了，千万不要再画蛇添足，否则将会有
错误的情形产生。
<html> 例 3
<head><title>合并行与列 </title></head>
<body>
<table border="1"><tr>
<td colspan="3">自动化专业 2000级学生平均成绩列表
</td>
</tr>
<tr><td rowspan="3">2003年考试成绩列表 </td>
<td>高等数学 </td><td>78</td></tr>
<tr>
<td>自动控制原理 </td><td>95</td>
</tr><tr>
<td>传感器技术 </td><td>85</td></tr>
</table>
</body>
</html>
3－ 2 网页表格装饰布置
最基础的表格呈现就是它那外围的大框框，也就是＜ TABLE＞标
签的,border” 属性设置。
指定表格框线＜ TABLE BORDER＝“数值”＞
BORDER属性值越大，表格的外框线越粗，当然你也可以把它设
置为 0，这们就没有表格的外框线了。
范例
3－ 2－ 1 表格框线颜色设置
指定表格框线颜色
＜ TABLE BORDERCOLOR,颜色值”＞
BORDERCOLOR属性的颜色值大多使用 RGB16进制的颜色码来设置，
例如要设置为红色，则颜色码就是“＃ FF0000”,当然你也可
以用英文单句,RED” 来替代了。
范例
例 4 <html>
<head>
<title>表格框线设置
</title>
</head>
<body>
<table border="5">
<tr><td>高等数学
</td><td>自动控制原理
</td><td>传感器技术
</td></tr>
<tr><td>80</td><td>90
</td><td>85</td></tr>
</table>
</body>
</html>
例 5 <html>
<head>
<title>表格框线颜色设置
</title>
</head>
<body>
<table border="2"
bordercolor="#ff0000">
<tr><td>高等数学 </td><td>
自动控制原理 </td><td>传感
器技术 </td></tr>
<tr><td>80</td><td>90</td>
<td>85</td></tr>
</table>
</body>
</html>
3－ 2－ 3 表格背景图片设置
指定表格背景图片
＜ TABLE BACKGROUND＝“图片文件名”＞
注意，表格标签的 BACKGROUND属性值是链接一个图片文件，如
果图片与网页本身不是位于同一个目录下，我们就要再指定图
片文件的路径。
范例
3－ 2－ 4 表格宽度设置
＜ TABLE WIDTH＝“宽度设置”＞
表格标签的 WIDTH属性是用来设置表格宽度，其宽度的设置分为
像素或百分比，使用百分比来设置宽度，则表格的宽度会随着
显示画面的大小自动调整宽度，若使用像素为单位来设置，则
表格的宽度不会随着显示画面的大小而调整宽度。
例 6<html>
<head>
<title>表格背景颜色设置
</title>
</head>
<body>
<table border="2"
bordercolor="#ff0000"
bgcolor="yellow">
<tr><td>高等数学
</td><td>自动控制原理
</td><td>传感器技术
</td></tr>
<tr><td>80</td><td>90
</td><td>85</td></tr>
</table>
</body>
</html>
例 7 <html>
<head>
<title>表格背景图片设置
</title></head>
<body>
<table border="6"
background="0C.gif">
<tr><td>高等数学 </td><td>
自动控制原理 </td><td>传感
器技术 </td></tr>
<tr><td>80</td><td>90</td
><td>85</td></tr>
</table>
</body>
</html>
3－ 3 网页表单制作
表单无法独立于网页程序之外（例如 ASP），但是网页
程序的数据仁慈传递又非得靠表单不可，因此，网页
表单的地位在网页程序的写作上扮演着非常、非常重
要的角色。
表单只是一个统称，表单其实还包含了很多的表单组
件，例如：单行文字输入框、单选按钮等，光有表单
是没用的，表单内必须还有表单组件的存在才有意义。
在本章节中，我们将就各个表单组件做个介绍，至于
表单与网页程序的互动就留到实作演练的章节再谈吧。
3－ 3－ 1 送出与清除按钮
送出与清除按钮是最常见的表单组件，尤其是送出按
钮，一旦按下送出按钮，则浏览者在网页填写的数据
就会送交表单所指定的网页程序进行处理。清除按钮
的用处其实不大，按下清除按钮会将浏览者在表单相
关栏位中所填写的数据清除，方便浏览者重新填写数
据。
送出与清除按钮组件具有下列属性：
NAME,指定按钮组件的名称 (对于送出与清除按钮可省
略该项属性设置 )
TYPE,指定组件的类型 (送出按钮为” SUBMIT”,清除
按钮为” RESET”)
VALUE,出现在按钮组件上的文字
在表单中布置送出与清除按钮
例 8<html>
<head>
<title>表格宽度设置
</title>
</head>
<body>
<table border="2"
background="0B.gif"
width="500">
<tr><td>计算机原理
</td><td>动态网页设计
</td><td>工业总线
</td></tr>
<tr><td>80</td><td>90</t
d><td>85</td></tr>
</table>
</body>
</html>
例 9
<html>
<head>
<title>发送与清除按键
</title>
</head>
<body>
<FORM>
<INPUT TYPE="SUBMIT"
VALUE="发送 ">
<INPUT TYPE="RESET"
VALUE="清除 ">
</FORM>
</body>
3－ 3－ 2 单行文字输入框
NAME,指定单行文字输入框组件的名称 (一定要写,是与 ASP程序相
对应的变量名称 )
TYPE,指定组件的类型,将属性设定为” TEXT”,就代表加入的元件
是单行文字输入框
VALUE,默认出现的文字输入框内的文字内容,
MAXLENGTH,设置单行文字输入框内可输入的数据长度
SIZE,设置单行文字输入框外观宽度
3－ 3－ 3 密码输入栏位
NAME,指定密码输入栏位组件的名称 (一定要写,是与 ASP程序相对
应的变量名称 )
TYPE,指定组件的类型,将属性设定为” PASSWORD”,就代表加入的
元件是密码输入栏位
VALUE,默认出现的密码输入栏位的文字内容,实际出现的是” *”
星号,无意义,
MAXLENGTH,设置密码输入栏位内可输入的数据长度
SIZE,设置密码输入栏位外观宽度
例 10
<html>
<head>
<title>单行文字框
</title>
</head>
<body>
<FORM>
请你在下列栏中填写住址
<BR>
<INPUT TYPE="TEXT"
VALUE="填写数据 "
NAME="ADDRESS">
</FORM>
</body>
</html>
例 11
<html>
<head>
<title>密码输入栏
</title>
</head>
<body>
<FORM>
请输入你的密码 <BR>
<INPUT TYPE="PASSWORD"
NAME="INWORD">
</FORM>
</body>
3－ 3－ 4 多行文字输框
NAME,指定多行文字输框组件的名称 (一定要写,是与 ASP程序相
对应的变量名称 )
COLS:设置多行文字输框需要显示的列数
ROWS:设置多行文字输框需要显示的行数
3－ 3－ 5 单选式选择钮
NAME,指定单选式选择钮组件的名称 (一定要写,是与 ASP程序相
对应的变量名称,若有多个单选式选择钮,则每个单选式选择钮
的属性值都必是相同的,以便构成群组关系,)
TYPE,指定组件的类型,将属性设定为” RADIO”,就代表加入的
元件是单选式选择钮
VALUE,默认出现的单选式选择钮的数值内容,
CHECKED,设置单选式选择按钮组件是否预先核取
注意
选择钮只有单选的功能，也就是说表单中全部的选择钮栏位只
有一个能生效，不能复选，虽然名称都相同，但是表单传送出
去的选择钮“值”却是不同的。
例 12
<html>
<head>
<title>多行文字输入栏
</title></head>
<body>
<FORM>
请认真填写你的意见
<BR>
<TEXTAREA COLS="30"
ROWS="3" NAME="MEMO">
</TEXTAREA>
</FORM>
</body>
</html>
例 13
<html><head>
<title>单选式选择键 </title>
</head><body>
<FORM>
请选择你喜欢的职业 <BR>
<INPUT TYPE="RADIO"
NAME="JOB" VALUE="计算机信息
业 " CHECKED>计算机信息业
<INPUT TYPE="RADIO"
NAME="JOB" VALUE="化学工程 ">
化学工程 <INPUT TYPE="RADIO"
NAME="JOB" VALUE="信息控制工
程 ">信息控制工程
</FORM>
</body>
</html>
3-3-6 复选式核取钮
NAME,指复选式核取钮组件的名称 (一定要写,是与 ASP程序相对应的变量名称,若
有多个复选式核取钮,则每个复选式核取钮的属性值都必是相同的,以便构成群组
关系,)
TYPE,指定组件的类型,将属性设定为” CHECKBOX”,就代表加入的元件是复选式
核取钮
VALUE,默认出现的复选式核取钮的数值内容,
CHECKED,设置复选式核取钮组件是否预先核取
3－ 3－ 7 下拉式选单
“下拉式菜单”组件是在 Frontpage编辑器中称呼，一般我们都称它为“下拉式
选单”，下拉式菜单就是将所有备选的项目集中起来放在一个独立的栏位中，使
用者只能“选”，不能输入！要产生一个下拉式选单，只要利用 Html标签＜
SELECT Name=,选单名称”＞就可以创造出一个下拉式选单，但是选单内总要
有选项吧！所以我们还得利用＜ OPTION Value=,选项值”＞标签来建立备选的
项目。
NAME,指定下拉式选单项目的名称 (一定要写,是与 ASP程
序相对应的变量名称 )
VALUE,默认出现的下拉式选单的数据内容,
SIZE,设置下拉式选单的显示项目数量
例 14 <html>
<head>
<title>复式核取键 </title>
</head>
<body><FORM>
请选择你喜欢的音乐类型 <BR>
<INPUT TYPE=,CHECKBOX”
NAME=,MUSIC” VALUE=“摇
滚” >摇滚 <INPUT
TYPE="CHECKBOX"
NAME="MUSIC" VALUE="爵士 ">
爵士
<INPUT TYPE="CHECKBOX"
NAME="MUSIC" VALUE="古典 ">
古典
</FORM>
</body>
</html>
例 15<html>
<head>
<title>下拉式选单名 </title>
</head>
<body>
<form>
你所学的专业是 <p>
<select name="下拉式选单名 ">
<option value="1自动化 ">自动化
</option>
<option value="2电气工程及自动化
">电气工程及自动化 </option>
<option value="3计算机应用 ">计算
机应用 </option>
<option value="4电子信息 ">电子信
息 </option>
</select>
</form>
</body>
</html>
● 下拉式选单的变形
下拉式选单除了单栏的显示方式外（单行文字框加下拉列表按
钮），它还可变成含有上下移动列表按钮的选择区块，变形的
方法是增加下拉式选单的 Size属性设置,例如下例：
● 可复选的下拉式菜单
下拉式选单通常都是只能选取一个备选项目，但是如果题目是
可以多重选择的例如让浏览者选取他喜欢的休闲项目，那我们
该如何处理？
要让下拉式选单具有多重选取（复选）的功能，我们必须为下
拉式选单组件再加入一个 MULTIPLE属性设置！
提示
1,当 Size属性的设置与备选项目的数目相同时，则下拉式选单
就变成了, 选项列表,,例如上例中我们将 Size属性值设为 4，
而备选项目的数目刚好也是 4，所以下拉式选单就变成了选项列
表。
例 16 <html>
<head>
<title>下拉式选单变形 </title>
</head><body>
<form>
你所学的专业是,<p>
<select Size="2" name="下拉式选单
变形 ">
<option value="1自动化 ">自动化
</option>
<option value="2电气工程及自动化 ">
电气工程及自动化 </option><BR>
<option value="3计算机应用 ">计算机
应用 </option>
<option value="4电子信息 ">电子信息
</option>
<option value="4电子测量与应用 ">电
子测量与应用 </option>
</select></form>
<IMG SRC="bg.gif">
</body>
</html>
例 17<html>
<head>
<title>下拉式选单特例 </title>
</head><body>
<form>
你所喜欢的休闲活动是,<p>
<select Size="6" MULTIPLE
name="下拉式选单特例 ">
<option value="1上网聊天 ">上网聊
天 </option>
<option value="2健美操 ">健美操
</option>
<option value="3玩电子游戏 ">玩电
子游戏 </option>
<option value="4徒步旅游 ">徒步旅
游 </option>
<option value="5打扑克 ">打扑克
</option>
<option value="6看电影 ">看电影
</option></select>
</form></body>
</html>
综合练习
制作一个网页，内容如下：
1：姓名、系部、专业、
2：个人爱好。（三项以上）
3：所学课程的成绩表单。（三门以上）
4：个人喜欢的业余活动构成的下拉式选单。（三项以
上）
5：别人对你看法的单选式按键（二项）
6：插入必要的图画及艺术字。
发到 EMAIL地址为：
kalu03@vip.sina.com
kanglu04a@sina.com
操作平台 IIS与 PWS
单机上的浏览器无法打开我们所设计的动态
网页,我们必须通过有能力打开 ASP动态网页
的网络服务器模拟机构 PWS (Personal Web
Server) 或 IIS (Internet Information
Server )来建立我们 ASP动态网页设计的操
作平台。就将安装 PWS或 IIS模拟机制的软件
WINDOWS 98/95 安装 PWS4.0
WINDOWS 2000/XP 安装 IIS 5.0
