第 6章 HTML表单与 ASP
ASP动态网页设计教程
2
第 6章 HTML表单与 ASP
前面笔者介绍了 HTML与 ASP相关的概念之后，我们已经了解到 HTML只能制作静态网页，至于动态网页的部分则必须借助于 CGI应用程序完成，而在本章，
我们将为读者介绍如何利用 HTML表单，搭配 ASP来开发动态网站应用程序，制作出功能强大的各种 Web应用程序。
3
第 6章 HTML表单与 ASP
6.1 HTML表单
6.2 会员登录范例
6.3 Server与 ASP应用程序
6.4 各种 HTML表单控件
6.5 房贷本息平均偿还试算范例
4
6.1 HTML表单
HTML制作静态网页非常擅长，对于动态的网页制作则必须通过应用程序完成。在 HTML
提供的 <form> 标记中，我们可以定义各式各样的表单对象，例如,CheckBox,RadioButton、
ComboBox,ListBox 及 Button 等，通过这些对象可以完成网页的用户界面，并完成与应用程序之间的沟通。
5
6.1 HTML表单
6.1.1 HTML表单的定义
6.1.2 表单对象的定义
6.1.3 提交按钮的配置
6
6.1 HTML表单
6.1.1 HTML表单的定义
HTML表单是以 <form>标记来定义，它内置的属性中以 Action 和 Method 为最重要。其中 Action 定义
Server 端执行的应用程序名称； Method 则用以定义
Server 与应用程序数据的传递方式。 <form> 标记的语法如下。
<FORM ACTION="login.asp" METHOD="post">
：
</FORM>
7
6.1 HTML表单
6.1.2 表单对象的定义在图形化的用户界面中，系统提供许多内置的标准用户界面，例如 CheckBox,RadioButton,TextBox、
ComboBox,ListBox及 Button等，让表单提供比静态网页更丰富和更具亲和力的用户界面，如下图所示。
8
6.1 HTML表单
6.1.3 提交按钮的配置
HTML表单至少会含有一个“提交”按钮，让用户在输入各项字段的内容后，提交数据至 Server端的应用程序。在 HTML表单中，通常我们在网站上至少会看到两种按钮，一种是提交 (Submit) 按钮，另一种则是重置 (Reset)按钮，其语法如下：
<input type="submit" name="send" value="提交 ">
<input type="reset" name="clear" value="重置 ">
9
6.2 会员登录范例为了让读者了解 HTML表单的应用，我们以会员登录表单 (login.htm)为例，示范 HTML表单的编写方式。
会员登录表单的 HTML源代码 (ch6-2.htm)如下：
<HTML>
<HEAD>
<TITLE>会员登录 </TITLE>
<STYLE TYPE="text/css">
<!--
p {font-family,宋体 ; font-size,11pt }
td,input {font-family,宋体 ; font-size,11pt }
//-->
</STYLE>
</HEAD>
<BODY>
<P>ASP程序设计讨论区 ─ [会员登录 ]</P>
<FORM ACTION="Login.asp" METHOD="post">
<TABLE>
10
6.2 会员登录范例会员登录表单的 HTML源代码 (ch6-2.htm)续：
<TR>
<TD ALIGN="right">用户,</TD>
<TD><input name="uid" type="text" size="10" maxlength="8“
VALUE=""></TD>
</TR>
<TR>
<TD ALIGN="right">密码,</TD>
<TD><INPUT TYPE="password" NAME="pwd" SIZE=10
MAXLENGTH=8 VALUE=""></TD>
</TR>
<TR>
<TD ALIGN="right"><INPUT TYPE="submit" NAME="send“
VALUE="提交 "></TD>
<TD ALIGN="left"><INPUT TYPE="reset" NAME="clear“
VALUE="重置 "></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
11
6.2 会员登录范例上述会员登录的 HTML表单，我们若以浏览器
Internet Explorer来浏览，显示的画面如下图所示。
在这个 HTML表单中，除了 HTML表单的基本控件之外，另外我们也看到几个较特殊的参数设定值，
比如 Action参数,Method参数等。这些设定值的说明见下页：
12
6.2 会员登录范例
● <form>标记中的 Action参数参数值为 login.asp，表示按下“提交”按钮后，告知 Server启动应用程序 login.asp来处理此 HTML输入表单。
● <form>标记的 Method参数此参数的值可以为 post或 get，用以告知 Server启动程序时，数据传输的途径。由于当初 CGI接口 (即
Common Gateway Interface——通用网关接口 )规则的定义是以 Unix为参考标准，因此有许多数据传递的方式是参考 Unix系统的做法来说明，因此将 Post和 get的差异分述如下：
■ post用以告知 Server将 Client的表单数据置于
stdin(Unix操作系统的标准输入设备 )，并将置于 stdin中的数据长度放在环境变量 CONTENT_LENGTH中。
13
6.2 会员登录范例最后启动对应的应用程序，由应用程序根据环境变量 CONTENT_LENGTH取得数据长度，然后由 stdin
中读取环境变量 CONTENT_LENGTH所指定的数据长度，取得 Client端的数据做进一步的处理。
■ get与 post方法不同，它告知 Server将数据长度及数据均置于环境变量 CONTENT_LENGTH及
QUERY_STRING中。在 Server启动 CGI应用程序后，
由应用程序自上述的环境变量取得 Client端的数据，以便进一步的处理。
● <input>标记的参数会员登录的画面共有两个文本框，用以输入用户和密码两个字段，这两个字段差异分述如下：
14
6.2 会员登录范例
■ 用户：用户输入表单的控件为文本框 (TextBox)，
如下面的 HTML所示。 HTML的标记为 <input>，其中参数 type 的值为 text，表示输入的表单控件为文本框，
name是文本框的字段名称,size是文本框在浏览器中显示的宽度,value 是该字段的初值 (在此为空白 ) 。至于
maxlength则用于指定字段最大可输入的长度。
<INPUT TYPE="text" NAME="uid" SIZE=10
MAXLENGTH=8 VALUE="">
■ 密码：密码输入表单控件，其中参数 type 的值为
password，如下面的 HTML 所示，表示此表单控件为输入密码的文本框，文本框在输入文字时字符以,·”或,*”
字符代替，以达到保护密码不被他人窥视的目的。
<INPUT TYPE="password" NAME="pwd" SIZE=10
MAXLENGTH=8 VALUE="">
15
6.2 会员登录范例
● <input>标记与提交按钮在 HTML的表单的中，至少会安排一个“提交”按钮，供用户将输入的数据，提交至 Server上的应用程序，提交按钮同样使用 <input> 标记，惟有参数 type的值为,submit”，这是与文本框最大的差别之处。至于提交按钮上的文字，是以 Value指定 (本例为“提交” )，提交按钮的 HTML语法如下：
<INPUT TYPE="submit" NAME="send" VALUE="提交 ">
● <input>标记与重置按钮许多的 HTML表单在“提交”按钮之外，另外会安排“重置”
按钮 (Reset)，当用户按下此按钮时，表单中所有的字段内容会自动被清除。“重置”按钮参数 type的值为,reset”是重置的意思。
重置有清除输入内容之意，故在本例中我们命名为 clear。重置按钮的 HTML语法如下：
<INPUT TYPE="reset" NAME="clear" VALUE="重置 ">
16
6.2 会员登录范例当 Client端浏览器的用户输入会员登录所需的信息后 (例如用户为 hlfjob，密码为 123456)，如下图所示：
输入信息后按下“提交”按钮，浏览器将依照表单输入字段和用户的输入内容，自动编辑 Client端要求 (Request)的信息格式。
信息格式如下：
uid=hlfjob&pwd=123456
在上述的信息格式中,uid及 pwd为表单的字段名称，而 hlfjob
和 123456为用户输入的值。字段名称与输入值之间以,=”为分隔字符，字段与字段之间则以,&”字符分隔。
17
6.3 Server与 ASP应用程序当 Server端收到来自 Client端的要求信息时,Server
看应用程序所采用的接口规则 (CGI,ISAPI,或 NSAPI等 )，
将数据置于特定位置 (如前所述的环境变量,stdin或
ISAPI/NSAPI等所指定的区域 )，然后启动对应的应用程序来处理。为了简化应用程序的复杂程度，我们将会员登录后执行的 ASP程序，改为将用户输入的字段值显示于画面上，让读者了解 ASP的运作原理。会员登录的
Login.asp的 ASP程序代码如下。
<HTML>
<HEAD>
<TITLE>会员登录 </TITLE>
<STYLE TYPE="text/css">
<!—
18
6.3 Server与 ASP应用程序会员登录的 Login.asp的 ASP程序代码 (续 ):
p {font-family,宋体 ; font-size,11pt }
td,input {font-family,宋体 ; font-size,9pt }
//-->
</STYLE>
</HEAD>
<BODY>
<P><center>ASP程序设计 —─ [会员登录 ]</center></P>
<p>
您登录的信息如下,<br>
<%
Response.Write("用户,"+Request("uid")+"<br>")
Response.Write("密码,"+Request("pwd")+"<br>")
%>
</p>
</BODY>
</HTML>
19
6.3 Server与 ASP应用程序应用程序取得来自 Server交付的 Client端信息后,ASP将 Client
端要求的信息解析后存在 Request对象，供后续的 ASP程序代码处理。在本例中我们使用 Request(“uid”)取得用户输入值，
Request(“pwd”)取得用户密码。利用 Response对象的 Write方法，将响应信息 (处理结果 )以 HTML格式传回 Client 端，由浏览器在收到响应信息时，解析 HTML后输出至画面上。 Login.asp执行结果如下图所示。
20
6.3 Server与 ASP应用程序看完上述的说明后，我们将整个交易流程绘成流程图，如下图所示。
21
6.4 各种 HTML表单控件
HTML提供许多与表单搭配的控件，例如
CheckBox,RadioButton,TextBox,ComboBox及
ListBox等，让网页的用户界面增添许多的专业性和亲和力。虽然它提供的功能相当简单，却足以应付绝大部分的需求。接着我们将针对各种表单输入控件，做更为详细的介绍。
22
6.4 各种 HTML表单控件
6.4.1 文本输入控件
6.4.2 下拉式列表框
6.4.3 复选框
6.4.4 单选框
6.4.5 隐藏字段
23
6.4 各种 HTML表单控件
6.4.1 文本输入控件在 HTML中，有 4种文本输入控件可以使用，它们分别是：
● 文本输入框
● 密码输入框
● 多行文本输入框
● 文件输入框
● 文本输入框供一般的文字输入使用，只能输入单行文字，文字输入的长度可由 maxlength设定。
<input type="text" name="uid" value="" Size=10
maxlength=8>用户界面：
说明,maxlength与数据库字段长度设为一致，可避免输入的数据长度大于数据库字段长度，造成程序丢失的危险。
24
6.4 各种 HTML表单控件
6.4.1 文本输入控件
● 密码输入框供文字密码字段输入使用，输入的文字以,●,或,*”显示于输入区，以避免密码遭他人窥视。
<input type="password" name="pwd"
value="" size=10 maxlength=8>
● 多行文本输入框此控件为输入大量文字时使用，它可以设定输入区的大小 (宽及高 )。当输入的文字超过行的长度时数据会自动换行，数据长度大于输入区的高度时，控件右边滚动条 (ScrollBar)的功能会自动启动。
<textarea name=“textarea” cols=“26” rows=“3”>文本输入框
(Memo)</textarea>
25
6.4 各种 HTML表单控件
6.4.1 文本输入控件说明,rows用以指定文本框可显示的行数,cols则是指定每行可输入的最大字符数。当输入字符超过 cols的设置值时，文字会自动换行 (自动跳至下一行了 )。
● 文件输入框用于处理上传文件至 Server端的工作。例如，求职者的履历表已经以记事本 (NotePad)打好，用户可通过此控件以 Windows打开旧文件对话框选取文件，上传此文件至 Server处理 (例如：更新网页、
修改参数文件、设置电子报采用的版面等文件 )。
<input type="file" name="template" size="20">
说明：要拥有文件输入框的功能，必须将 <input>标记中的
Type指定为 file即可，其用户界面有两个，一个是输入框，另一个为浏览的按钮。
26
6.4 各种 HTML表单控件
6.4.2 下拉式列表框下拉式列表框 (ComboBox) 提供像菜单一样的用户界面，如下图所示，它设计的主要目的是想在有限的画面中，摆放更多的用户输入控件。由于它占用的空间极小，因此广为程序设计员采用。下面是下拉式列表框的 HTML语法范例：
<select name="city" size="1">
<option value="1">北京 </option>
<option value="2">上海 </option>
<option value="3">天津 </option>
</select>
在上述的语法中，下拉式列表框的标记为 <select>…</select>,
其中 name 为控件的名称,size可指定画面显示列数。当 size=1时，
为下拉式列表框 (ComboBox)，若其值大于 1时则为 ListBox界面。至于 <option>…</option> 标记间的文字，则用于定义下拉式列表框的项目内容。至于 <option>标记的 value 属性，则可设置选项对应的代码 (code)。
27
6.4 各种 HTML表单控件
6.4.2 下拉式列表框范例 ch6-3.htm,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>表单控件 </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<p><center>海河电器公司招聘人才 </center></p>
<form name="form1" method="post" action="invite.asp">
<p>职位：项目经理 </p>
<p> 学历：大学以上学历，五年以上工作经验 <br>
年龄,35岁以下 </p>
<p>工作地点：北京、上海、天津 </p>
<p>电子邮件：
<input type="text" name="email" size="20" value=""> <br>
履 历 表：
<input type="file" name="resume" size="20">
28
6.4 各种 HTML表单控件
6.4.2 下拉式列表框范例 ch6-3.htm (续 )：
<br>
</p>
<p>希望工作地点：
<select name="city" size="1" id="city">
<option value="1">北京 </option>
<option value="2">上海 </option>
<option value="3">天津 </option>
</select>
</p>
<p>
<input type="submit" name="send" value="送出应聘履历表 ">
</p>
</form>
</body>
</html>
29
6.4 各种 HTML表单控件
6.4.2 下拉式列表框执行结果如下图所示。
下拉式列表框控件
30
6.4 各种 HTML表单控件
6.4.2 下拉式列表框当我们把下拉式列表框控件的 Size改为大于 1的值，则下拉式列表框控件将变为项目列表控件，例如我们将 Size改为 3，则浏览器显示该控件的效果如 下 图所示。
项目列表控件
31
6.4 各种 HTML表单控件
6.4.3 复选框复选框 (CheckBox)可提供多条件选项的复选功能，用户界面如下图所示。
复选框
32
6.4 各种 HTML表单控件
6.4.3 复选框它主要的设计理念是提供多重条件供用户选择，用户可选择
0 或多个选项，因此像问卷调查等类的表单均经常使用。复选框的 HTML语法范例：
<input type="checkbox" name="city1" value="1" checked>北京
<input type="checkbox" name="city2" value="2">上海
<input type="checkbox" name="city3" value="3">天津在上述的语法中，复选框的 type为 CheckBox,name用来指定字段名称,value则是点选该条件后的变量值，至于第一项后面的
Checked代表本项为已预选项目 (自动勾选 )。
下面是沿用前面网页画面，我们将希望工作地点改为可工作地点，修改后的网页的 HTML源代码如下。
33
6.4 各种 HTML表单控件
6.4.3 复选框范例 ch6-4.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>表单控件 </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<p><center>海河电器公司招聘人才 </center></p>
<form name="form1" method="post" action="invite.asp">
<p>职位：项目经理 </p>
<p> 学历：大学以上学历，五年以上工作经验 <br>
年龄,35岁以下 </p>
<p>工作地点：北京、上海、天津 </p>
<p>电子邮件：
<input type="text" name="email" size="20" value="">
<br>
34
6.4 各种 HTML表单控件
6.4.3 复选框范例 ch6-4.htm(续 )
履 历 表：
<input type="file" name="resume" size="20">
<br>
</p>
<p>可工作地点：
<input type="checkbox" name="city1" value="1" checked>北京
<input type="checkbox" name="city2" value="2">上海
<input type="checkbox" name="city3" value="3">天津
</p>
<p>
<input type="submit" name="send" value="送出应聘履历表 ">
</p>
</form>
</body>
</html>
35
6.4 各种 HTML表单控件
6.4.3 复选框执行结果如右图所示。
说明：多个条件的
CheckBox选项，其字段名称均应不同，例如本例的北京 (city1)、上海
(city2)、天津 (city3)，否则会导致出现类似
RadioButton控件仅有单选的功能。
可工作地点
36
6.4 各种 HTML表单控件
6.4.4 单选框单选框 (RadioButton)与复选框 (CheckBox)非常相似。单选框是多选一的界面，而复选框则是多选多的界面。通常单选框适用于多选一的条件，但是由于 HTML设计方式的关系，若各单选框的字段名称均不相同，就常会做出类似复选框界面的单选框 (也可多选多 )。下面是单选框的 HTML语法格式：
<input type="radio" name="sex" value="0">女
<input type="radio" name="sex" value="1">男要注意的是,<input>标记中的 type必须设为 radio才是单选框，
且在多选一的选项中，控件的字段名称必须一致，方能产生正确的结果。另外我们也可使用 checked属性，设定单选框的默认值
(例如 <input type="radio" name="sex" value="0" checked>女 )。若我们将上述例子的字段名称设为不同，则单选框也会变成多选多功能：
<input type="radio" name="female" value="0">女
<input type="radio" name="male" value="1">男
37
6.4 各种 HTML表单控件
6.4.4 单选框若我们将单选框的范例，应用至美国总统大选的问卷调查上，
拿来调查各年龄层的选民、及男性与女性选民对总统候选人的爱好，则我们可将问卷调查表，设计为下面的样式，其 HTML原始程序代码如下。
范例 ch6-5.htm
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>表单控件 (单选框 )</title>
</head>
<body>
<p><strong><center>美国总统大选问卷调查 </center></strong></p>
<form name="form1" method="post" action="ch6-1.asp">
候选人：
<input name="radiobutton" type="radio" value="radiobutton1" checked>布什
<input type="radio" name="radiobutton" value="radiobutton2">克里 <br>
38
6.4 各种 HTML表单控件
6.4.4 单选框范例 ch6-5.htm(续 )
年龄：
<input name="age" type="radio" value="1" checked> 21~30
<input type="radio" name="age" value="2">31~40
<input type="radio" name="age" value="3">41~50
<input type="radio" name="age" value="4">51~60
<input type="radio" name="age" value="5"> 61以上 <br>
性别：
<input name="sex" type="radio" value="0" checked>女
<input type="radio" name="sex" value="1">男
<p>
<input type="submit" name="send" value="送出问卷 ">
</p>
</form>
</body>
</html>
39
6.4 各种 HTML表单控件
6.4.4 单选框执行结果如下图所示。
40
6.4 各种 HTML表单控件
6.4.5 隐藏字段除了上述提及的控件以外，在 <input>标记的类型定义中，若有 hidden 选项的隐藏字段类型的控件，此控件的内容不会出现在网页上，主要为提供表单内其字段的常数值。该数值在用户单击“提交”按钮的同时，也会提交至 Server 端处理。例如，我们将每一个动态网页均赋予一个编号，称为 PageNo，则网页中的隐藏字段可写成如下的 HTML源代码：
<input type="hidden" name="PageNo" value="1010">
在 Web Server上，每一个网页均是一个独立的事件，
因此我们若要制作像微软的安装向导画面 (上一步、下一步与完成 )，则每一个网页均必须以隐藏字段控制上下页，及相关变量的传递，完成不可能的任务。
41
6.5 房贷本息平均偿还试算范例房屋贷款的偿还方式一般有两种，一种是本金平均偿还法，另一种则是本息平均偿还法，两种计算的方式不同。其中本息平均偿还法式最为常用，贷款人需按月平均偿还本息的。它的计算公式如下：
每月偿还金额 =( p * r * ((1+r)^n)) / ((1+r)^n - 1)
在上述的计算公式中,p为贷款金额,r为利率 (月利率 ),n为贷款期限 (以月为单位 )，所以决定偿还金额的大小，其条件分别是贷款金额、利率及贷款期限的长短。下面我们将以此为范例，为读者介绍房贷本息偿还试算的范例。
42
6.5 房贷本息平均偿还试算范例系统开发的步骤银行要开发此套查询系统，首先程序设计员必须了解银行提供房贷本息偿还试算的目的、了解客户的需求 (查询所得的信息为何 )、据以得知用户输入的项目，然后制作查询的网页。因此我们制定的系统开发步骤如下：
● 确定客户查询的需求 (画面输出的内容 )
● 制作房贷本息平均偿还试算网页
● 取得计算公式
● 编写计算房贷本息平均偿还的程序
43
6.5 房贷本息平均偿还试算范例
1,确定客户查询的需求根据访谈银行承办人员的结果，假设客户上网进行“房贷本息平均偿还”试算时，他所要得到的输出信息为贷款金额、利率、贷款期限及每月偿还金额等共
4 个字段。根据上述的需求，程序设计员先勾画出输出画面的雏形，供放款承办人员确认。经确认后的画面输出格式如下图所示。
44
6.5 房贷本息平均偿还试算范例
2,制作房贷本息平均偿还试算网页程序设计员根据上面输出的要求，分析出网页上至少需要客户姓名、性别、贷款金额
、利率、贷款期限等 5个字段，
并据此制作查询的网页，网页的文件名称我们将它命名为
ch6-6.htm，并在 HTML中指定
<form>标记执行的 ASP程序为
ch6-6.asp。网页如右图所示。
45
6.5 房贷本息平均偿还试算范例网页 ch6-6.htm的源代码下。
<html>
<head>
<title>房贷本息平均偿还试算 </title>
</head>
<body>
<font color=“#FF0000” size=“4”><center>☆ 房贷本息平均偿还试算
☆ </center></font><br>
<center>,先计算一下偿还能力再买房子,</center>
<p>
您想贷款吗？您知道向银行贷款每月要还多少金额吗？本程序提供您贷款还款金额试算的功能，让您在贷款之前先试算一下您每个月须偿还的金额，提供您评估偿还能力的参考。 <br>
</p>
<form name="action" method="post" action="ch6-6.asp">
姓 名：
<input name="name" type="text" size="8" >
<br>
46
6.5 房贷本息平均偿还试算范例网页 ch6-6.htm的源代码下 (续 )
性 别：
<input type="radio" name="sex" value="1">
男
<input type="radio" name="sex" value="0">
女 <br>
贷款金额：
<input name="p" type="text" size="8">
万元 <br>
利 率：
<input name="r" type="text" size="8">
年利率（ %） <br>
贷款期限：
<input name="n" type="text" size="8">
年 <br>
<input type="submit" name="Submit2" value="试算 ">
</form>
</body>
</html>
47
6.5 房贷本息平均偿还试算范例在上面的源代码中，变量名称的命名原则如下：
● 姓名 (name)
● 性别 (sex)
● 贷款金额 (p)
● 利率 (r)
● 贷款期限 (n)
其中为简化客户的输入，贷款金额以万元为单位，
利率为年利率，贷款期限以年为计算。另外，在 ASP 程序代码中,<%= name %>是在此以变量 name的内容取代的意思，在本例中 name的值为“高琪”。
48
6.5 房贷本息平均偿还试算范例
3,取得计算公式经过放款承办人员的协助，程序设计员取得本息平均偿还法的计算公式如下：
每月偿还金额 = (p * r * ((1+r)^n)) / ((1+r)^n - 1)
说明,ASP的,^”符号代表几次方的意思，例如 3^2
代表 3的 2次方。
在上述的计算公式中,p为贷款金额 (以元为单位 )，
r为月利率,n为贷款年限，这三个字段与输入字段的单位均不相同，因此必须经过转换后才可以正确的计算出结果。换算方式如下：
● 本金以万元为单位，故须以 10000来计算。
p = 输入的本金 * 10000
49
6.5 房贷本息平均偿还试算范例例如客户输入 50(万元 )，则换算方式如下：
p = 50 * 10000
● 利率 (%)以年为单位，故需先除以 100，再除以 12换算为月利率
r = 输入的利率（ %） / 100 / 12
例如客户输入 8(代表 8%)，则换算方式如下：
r = 8 / 100 / 12 = 0.08 / 12
● 期限以年为单位，故需先乘以 12，换算总共须偿还多少个月
n = 输入的贷款期限（年） * 12
例如客户输入 20(年 )，则换算方式如下：
r = 20 * 12 = 240 期（每期为一个月）
50
6.5 房贷本息平均偿还试算范例
4,编写计算房贷本息平均偿还的程序当上面的准备事项均完成以后，我们就可以根据上面的需求来开发 ASP程序。经开发完成的 ASP程序 (ch6-6.asp)如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>房贷本息平均偿还试算 </title>
</head>
<%
dim name
dim sex
dim p
dim r
dim n
dim ss
name=request("name")
sex=request.Form("sex")
51
6.5 房贷本息平均偿还试算范例
ch6-6.asp (续 ),
if sex=0 then sex1="女士 "
if sex=1 then sex1="先生 "
p=request.Form("p")
r=request.Form("r")
n=request.Form("n")
ss=(p*10000 * r/100/12 * ((1+r/100/12)^(n*12))) / ((1+r/100/12)^(n*12) - 1)
%>
<body>
<p><font color="#0000FF" size="4">[房贷本息平均偿还试算 ]</font> </p>
<p><font size="2">贷款试算结果如下,<br>
<%=name%><%=sex1%> 您好,<br>
假如您向银行贷款 <%=p%>万元 <br>
利率为 <%=r%>%<br>
贷款期限为 <%=n%>年 </font></p>
<p><font size="2">则您每个月须付给银行本息 <%=ss%>元。 </font></p>
<p><font size=“2”>,本试算仅供参考，详细内容以银行实际计算之数据为准。,</font><br></p>
</body>
</html>
52
6.5 房贷本息平均偿还试算范例当客户连至银行网站执行本程序时，输入姓名、性别、贷款金额、利率、贷款期限后，最后按下试算按钮执行试算工作。 ch6-6.asp程序试算出客户每月须偿还的金额，如下图所示。
53
第 6章 HTML表单与 ASP
本章为读者介绍了如何利用 HTML表单，搭配
ASP来开发动态网站应用程序，制作出功能强大的各种 Web应用程序。
ASP动态网页设计教程
2
第 6章 HTML表单与 ASP
前面笔者介绍了 HTML与 ASP相关的概念之后，我们已经了解到 HTML只能制作静态网页，至于动态网页的部分则必须借助于 CGI应用程序完成，而在本章，
我们将为读者介绍如何利用 HTML表单，搭配 ASP来开发动态网站应用程序，制作出功能强大的各种 Web应用程序。
3
第 6章 HTML表单与 ASP
6.1 HTML表单
6.2 会员登录范例
6.3 Server与 ASP应用程序
6.4 各种 HTML表单控件
6.5 房贷本息平均偿还试算范例
4
6.1 HTML表单
HTML制作静态网页非常擅长，对于动态的网页制作则必须通过应用程序完成。在 HTML
提供的 <form> 标记中，我们可以定义各式各样的表单对象，例如,CheckBox,RadioButton、
ComboBox,ListBox 及 Button 等，通过这些对象可以完成网页的用户界面，并完成与应用程序之间的沟通。
5
6.1 HTML表单
6.1.1 HTML表单的定义
6.1.2 表单对象的定义
6.1.3 提交按钮的配置
6
6.1 HTML表单
6.1.1 HTML表单的定义
HTML表单是以 <form>标记来定义，它内置的属性中以 Action 和 Method 为最重要。其中 Action 定义
Server 端执行的应用程序名称； Method 则用以定义
Server 与应用程序数据的传递方式。 <form> 标记的语法如下。
<FORM ACTION="login.asp" METHOD="post">
：
</FORM>
7
6.1 HTML表单
6.1.2 表单对象的定义在图形化的用户界面中，系统提供许多内置的标准用户界面，例如 CheckBox,RadioButton,TextBox、
ComboBox,ListBox及 Button等，让表单提供比静态网页更丰富和更具亲和力的用户界面，如下图所示。
8
6.1 HTML表单
6.1.3 提交按钮的配置
HTML表单至少会含有一个“提交”按钮，让用户在输入各项字段的内容后，提交数据至 Server端的应用程序。在 HTML表单中，通常我们在网站上至少会看到两种按钮，一种是提交 (Submit) 按钮，另一种则是重置 (Reset)按钮，其语法如下：
<input type="submit" name="send" value="提交 ">
<input type="reset" name="clear" value="重置 ">
9
6.2 会员登录范例为了让读者了解 HTML表单的应用，我们以会员登录表单 (login.htm)为例，示范 HTML表单的编写方式。
会员登录表单的 HTML源代码 (ch6-2.htm)如下：
<HTML>
<HEAD>
<TITLE>会员登录 </TITLE>
<STYLE TYPE="text/css">
<!--
p {font-family,宋体 ; font-size,11pt }
td,input {font-family,宋体 ; font-size,11pt }
//-->
</STYLE>
</HEAD>
<BODY>
<P>ASP程序设计讨论区 ─ [会员登录 ]</P>
<FORM ACTION="Login.asp" METHOD="post">
<TABLE>
10
6.2 会员登录范例会员登录表单的 HTML源代码 (ch6-2.htm)续：
<TR>
<TD ALIGN="right">用户,</TD>
<TD><input name="uid" type="text" size="10" maxlength="8“
VALUE=""></TD>
</TR>
<TR>
<TD ALIGN="right">密码,</TD>
<TD><INPUT TYPE="password" NAME="pwd" SIZE=10
MAXLENGTH=8 VALUE=""></TD>
</TR>
<TR>
<TD ALIGN="right"><INPUT TYPE="submit" NAME="send“
VALUE="提交 "></TD>
<TD ALIGN="left"><INPUT TYPE="reset" NAME="clear“
VALUE="重置 "></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
11
6.2 会员登录范例上述会员登录的 HTML表单，我们若以浏览器
Internet Explorer来浏览，显示的画面如下图所示。
在这个 HTML表单中，除了 HTML表单的基本控件之外，另外我们也看到几个较特殊的参数设定值，
比如 Action参数,Method参数等。这些设定值的说明见下页：
12
6.2 会员登录范例
● <form>标记中的 Action参数参数值为 login.asp，表示按下“提交”按钮后，告知 Server启动应用程序 login.asp来处理此 HTML输入表单。
● <form>标记的 Method参数此参数的值可以为 post或 get，用以告知 Server启动程序时，数据传输的途径。由于当初 CGI接口 (即
Common Gateway Interface——通用网关接口 )规则的定义是以 Unix为参考标准，因此有许多数据传递的方式是参考 Unix系统的做法来说明，因此将 Post和 get的差异分述如下：
■ post用以告知 Server将 Client的表单数据置于
stdin(Unix操作系统的标准输入设备 )，并将置于 stdin中的数据长度放在环境变量 CONTENT_LENGTH中。
13
6.2 会员登录范例最后启动对应的应用程序，由应用程序根据环境变量 CONTENT_LENGTH取得数据长度，然后由 stdin
中读取环境变量 CONTENT_LENGTH所指定的数据长度，取得 Client端的数据做进一步的处理。
■ get与 post方法不同，它告知 Server将数据长度及数据均置于环境变量 CONTENT_LENGTH及
QUERY_STRING中。在 Server启动 CGI应用程序后，
由应用程序自上述的环境变量取得 Client端的数据，以便进一步的处理。
● <input>标记的参数会员登录的画面共有两个文本框，用以输入用户和密码两个字段，这两个字段差异分述如下：
14
6.2 会员登录范例
■ 用户：用户输入表单的控件为文本框 (TextBox)，
如下面的 HTML所示。 HTML的标记为 <input>，其中参数 type 的值为 text，表示输入的表单控件为文本框，
name是文本框的字段名称,size是文本框在浏览器中显示的宽度,value 是该字段的初值 (在此为空白 ) 。至于
maxlength则用于指定字段最大可输入的长度。
<INPUT TYPE="text" NAME="uid" SIZE=10
MAXLENGTH=8 VALUE="">
■ 密码：密码输入表单控件，其中参数 type 的值为
password，如下面的 HTML 所示，表示此表单控件为输入密码的文本框，文本框在输入文字时字符以,·”或,*”
字符代替，以达到保护密码不被他人窥视的目的。
<INPUT TYPE="password" NAME="pwd" SIZE=10
MAXLENGTH=8 VALUE="">
15
6.2 会员登录范例
● <input>标记与提交按钮在 HTML的表单的中，至少会安排一个“提交”按钮，供用户将输入的数据，提交至 Server上的应用程序，提交按钮同样使用 <input> 标记，惟有参数 type的值为,submit”，这是与文本框最大的差别之处。至于提交按钮上的文字，是以 Value指定 (本例为“提交” )，提交按钮的 HTML语法如下：
<INPUT TYPE="submit" NAME="send" VALUE="提交 ">
● <input>标记与重置按钮许多的 HTML表单在“提交”按钮之外，另外会安排“重置”
按钮 (Reset)，当用户按下此按钮时，表单中所有的字段内容会自动被清除。“重置”按钮参数 type的值为,reset”是重置的意思。
重置有清除输入内容之意，故在本例中我们命名为 clear。重置按钮的 HTML语法如下：
<INPUT TYPE="reset" NAME="clear" VALUE="重置 ">
16
6.2 会员登录范例当 Client端浏览器的用户输入会员登录所需的信息后 (例如用户为 hlfjob，密码为 123456)，如下图所示：
输入信息后按下“提交”按钮，浏览器将依照表单输入字段和用户的输入内容，自动编辑 Client端要求 (Request)的信息格式。
信息格式如下：
uid=hlfjob&pwd=123456
在上述的信息格式中,uid及 pwd为表单的字段名称，而 hlfjob
和 123456为用户输入的值。字段名称与输入值之间以,=”为分隔字符，字段与字段之间则以,&”字符分隔。
17
6.3 Server与 ASP应用程序当 Server端收到来自 Client端的要求信息时,Server
看应用程序所采用的接口规则 (CGI,ISAPI,或 NSAPI等 )，
将数据置于特定位置 (如前所述的环境变量,stdin或
ISAPI/NSAPI等所指定的区域 )，然后启动对应的应用程序来处理。为了简化应用程序的复杂程度，我们将会员登录后执行的 ASP程序，改为将用户输入的字段值显示于画面上，让读者了解 ASP的运作原理。会员登录的
Login.asp的 ASP程序代码如下。
<HTML>
<HEAD>
<TITLE>会员登录 </TITLE>
<STYLE TYPE="text/css">
<!—
18
6.3 Server与 ASP应用程序会员登录的 Login.asp的 ASP程序代码 (续 ):
p {font-family,宋体 ; font-size,11pt }
td,input {font-family,宋体 ; font-size,9pt }
//-->
</STYLE>
</HEAD>
<BODY>
<P><center>ASP程序设计 —─ [会员登录 ]</center></P>
<p>
您登录的信息如下,<br>
<%
Response.Write("用户,"+Request("uid")+"<br>")
Response.Write("密码,"+Request("pwd")+"<br>")
%>
</p>
</BODY>
</HTML>
19
6.3 Server与 ASP应用程序应用程序取得来自 Server交付的 Client端信息后,ASP将 Client
端要求的信息解析后存在 Request对象，供后续的 ASP程序代码处理。在本例中我们使用 Request(“uid”)取得用户输入值，
Request(“pwd”)取得用户密码。利用 Response对象的 Write方法，将响应信息 (处理结果 )以 HTML格式传回 Client 端，由浏览器在收到响应信息时，解析 HTML后输出至画面上。 Login.asp执行结果如下图所示。
20
6.3 Server与 ASP应用程序看完上述的说明后，我们将整个交易流程绘成流程图，如下图所示。
21
6.4 各种 HTML表单控件
HTML提供许多与表单搭配的控件，例如
CheckBox,RadioButton,TextBox,ComboBox及
ListBox等，让网页的用户界面增添许多的专业性和亲和力。虽然它提供的功能相当简单，却足以应付绝大部分的需求。接着我们将针对各种表单输入控件，做更为详细的介绍。
22
6.4 各种 HTML表单控件
6.4.1 文本输入控件
6.4.2 下拉式列表框
6.4.3 复选框
6.4.4 单选框
6.4.5 隐藏字段
23
6.4 各种 HTML表单控件
6.4.1 文本输入控件在 HTML中，有 4种文本输入控件可以使用，它们分别是：
● 文本输入框
● 密码输入框
● 多行文本输入框
● 文件输入框
● 文本输入框供一般的文字输入使用，只能输入单行文字，文字输入的长度可由 maxlength设定。
<input type="text" name="uid" value="" Size=10
maxlength=8>用户界面：
说明,maxlength与数据库字段长度设为一致，可避免输入的数据长度大于数据库字段长度，造成程序丢失的危险。
24
6.4 各种 HTML表单控件
6.4.1 文本输入控件
● 密码输入框供文字密码字段输入使用，输入的文字以,●,或,*”显示于输入区，以避免密码遭他人窥视。
<input type="password" name="pwd"
value="" size=10 maxlength=8>
● 多行文本输入框此控件为输入大量文字时使用，它可以设定输入区的大小 (宽及高 )。当输入的文字超过行的长度时数据会自动换行，数据长度大于输入区的高度时，控件右边滚动条 (ScrollBar)的功能会自动启动。
<textarea name=“textarea” cols=“26” rows=“3”>文本输入框
(Memo)</textarea>
25
6.4 各种 HTML表单控件
6.4.1 文本输入控件说明,rows用以指定文本框可显示的行数,cols则是指定每行可输入的最大字符数。当输入字符超过 cols的设置值时，文字会自动换行 (自动跳至下一行了 )。
● 文件输入框用于处理上传文件至 Server端的工作。例如，求职者的履历表已经以记事本 (NotePad)打好，用户可通过此控件以 Windows打开旧文件对话框选取文件，上传此文件至 Server处理 (例如：更新网页、
修改参数文件、设置电子报采用的版面等文件 )。
<input type="file" name="template" size="20">
说明：要拥有文件输入框的功能，必须将 <input>标记中的
Type指定为 file即可，其用户界面有两个，一个是输入框，另一个为浏览的按钮。
26
6.4 各种 HTML表单控件
6.4.2 下拉式列表框下拉式列表框 (ComboBox) 提供像菜单一样的用户界面，如下图所示，它设计的主要目的是想在有限的画面中，摆放更多的用户输入控件。由于它占用的空间极小，因此广为程序设计员采用。下面是下拉式列表框的 HTML语法范例：
<select name="city" size="1">
<option value="1">北京 </option>
<option value="2">上海 </option>
<option value="3">天津 </option>
</select>
在上述的语法中，下拉式列表框的标记为 <select>…</select>,
其中 name 为控件的名称,size可指定画面显示列数。当 size=1时，
为下拉式列表框 (ComboBox)，若其值大于 1时则为 ListBox界面。至于 <option>…</option> 标记间的文字，则用于定义下拉式列表框的项目内容。至于 <option>标记的 value 属性，则可设置选项对应的代码 (code)。
27
6.4 各种 HTML表单控件
6.4.2 下拉式列表框范例 ch6-3.htm,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>表单控件 </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<p><center>海河电器公司招聘人才 </center></p>
<form name="form1" method="post" action="invite.asp">
<p>职位：项目经理 </p>
<p> 学历：大学以上学历，五年以上工作经验 <br>
年龄,35岁以下 </p>
<p>工作地点：北京、上海、天津 </p>
<p>电子邮件：
<input type="text" name="email" size="20" value=""> <br>
履 历 表：
<input type="file" name="resume" size="20">
28
6.4 各种 HTML表单控件
6.4.2 下拉式列表框范例 ch6-3.htm (续 )：
<br>
</p>
<p>希望工作地点：
<select name="city" size="1" id="city">
<option value="1">北京 </option>
<option value="2">上海 </option>
<option value="3">天津 </option>
</select>
</p>
<p>
<input type="submit" name="send" value="送出应聘履历表 ">
</p>
</form>
</body>
</html>
29
6.4 各种 HTML表单控件
6.4.2 下拉式列表框执行结果如下图所示。
下拉式列表框控件
30
6.4 各种 HTML表单控件
6.4.2 下拉式列表框当我们把下拉式列表框控件的 Size改为大于 1的值，则下拉式列表框控件将变为项目列表控件，例如我们将 Size改为 3，则浏览器显示该控件的效果如 下 图所示。
项目列表控件
31
6.4 各种 HTML表单控件
6.4.3 复选框复选框 (CheckBox)可提供多条件选项的复选功能，用户界面如下图所示。
复选框
32
6.4 各种 HTML表单控件
6.4.3 复选框它主要的设计理念是提供多重条件供用户选择，用户可选择
0 或多个选项，因此像问卷调查等类的表单均经常使用。复选框的 HTML语法范例：
<input type="checkbox" name="city1" value="1" checked>北京
<input type="checkbox" name="city2" value="2">上海
<input type="checkbox" name="city3" value="3">天津在上述的语法中，复选框的 type为 CheckBox,name用来指定字段名称,value则是点选该条件后的变量值，至于第一项后面的
Checked代表本项为已预选项目 (自动勾选 )。
下面是沿用前面网页画面，我们将希望工作地点改为可工作地点，修改后的网页的 HTML源代码如下。
33
6.4 各种 HTML表单控件
6.4.3 复选框范例 ch6-4.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>表单控件 </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<p><center>海河电器公司招聘人才 </center></p>
<form name="form1" method="post" action="invite.asp">
<p>职位：项目经理 </p>
<p> 学历：大学以上学历，五年以上工作经验 <br>
年龄,35岁以下 </p>
<p>工作地点：北京、上海、天津 </p>
<p>电子邮件：
<input type="text" name="email" size="20" value="">
<br>
34
6.4 各种 HTML表单控件
6.4.3 复选框范例 ch6-4.htm(续 )
履 历 表：
<input type="file" name="resume" size="20">
<br>
</p>
<p>可工作地点：
<input type="checkbox" name="city1" value="1" checked>北京
<input type="checkbox" name="city2" value="2">上海
<input type="checkbox" name="city3" value="3">天津
</p>
<p>
<input type="submit" name="send" value="送出应聘履历表 ">
</p>
</form>
</body>
</html>
35
6.4 各种 HTML表单控件
6.4.3 复选框执行结果如右图所示。
说明：多个条件的
CheckBox选项，其字段名称均应不同，例如本例的北京 (city1)、上海
(city2)、天津 (city3)，否则会导致出现类似
RadioButton控件仅有单选的功能。
可工作地点
36
6.4 各种 HTML表单控件
6.4.4 单选框单选框 (RadioButton)与复选框 (CheckBox)非常相似。单选框是多选一的界面，而复选框则是多选多的界面。通常单选框适用于多选一的条件，但是由于 HTML设计方式的关系，若各单选框的字段名称均不相同，就常会做出类似复选框界面的单选框 (也可多选多 )。下面是单选框的 HTML语法格式：
<input type="radio" name="sex" value="0">女
<input type="radio" name="sex" value="1">男要注意的是,<input>标记中的 type必须设为 radio才是单选框，
且在多选一的选项中，控件的字段名称必须一致，方能产生正确的结果。另外我们也可使用 checked属性，设定单选框的默认值
(例如 <input type="radio" name="sex" value="0" checked>女 )。若我们将上述例子的字段名称设为不同，则单选框也会变成多选多功能：
<input type="radio" name="female" value="0">女
<input type="radio" name="male" value="1">男
37
6.4 各种 HTML表单控件
6.4.4 单选框若我们将单选框的范例，应用至美国总统大选的问卷调查上，
拿来调查各年龄层的选民、及男性与女性选民对总统候选人的爱好，则我们可将问卷调查表，设计为下面的样式，其 HTML原始程序代码如下。
范例 ch6-5.htm
<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>表单控件 (单选框 )</title>
</head>
<body>
<p><strong><center>美国总统大选问卷调查 </center></strong></p>
<form name="form1" method="post" action="ch6-1.asp">
候选人：
<input name="radiobutton" type="radio" value="radiobutton1" checked>布什
<input type="radio" name="radiobutton" value="radiobutton2">克里 <br>
38
6.4 各种 HTML表单控件
6.4.4 单选框范例 ch6-5.htm(续 )
年龄：
<input name="age" type="radio" value="1" checked> 21~30
<input type="radio" name="age" value="2">31~40
<input type="radio" name="age" value="3">41~50
<input type="radio" name="age" value="4">51~60
<input type="radio" name="age" value="5"> 61以上 <br>
性别：
<input name="sex" type="radio" value="0" checked>女
<input type="radio" name="sex" value="1">男
<p>
<input type="submit" name="send" value="送出问卷 ">
</p>
</form>
</body>
</html>
39
6.4 各种 HTML表单控件
6.4.4 单选框执行结果如下图所示。
40
6.4 各种 HTML表单控件
6.4.5 隐藏字段除了上述提及的控件以外，在 <input>标记的类型定义中，若有 hidden 选项的隐藏字段类型的控件，此控件的内容不会出现在网页上，主要为提供表单内其字段的常数值。该数值在用户单击“提交”按钮的同时，也会提交至 Server 端处理。例如，我们将每一个动态网页均赋予一个编号，称为 PageNo，则网页中的隐藏字段可写成如下的 HTML源代码：
<input type="hidden" name="PageNo" value="1010">
在 Web Server上，每一个网页均是一个独立的事件，
因此我们若要制作像微软的安装向导画面 (上一步、下一步与完成 )，则每一个网页均必须以隐藏字段控制上下页，及相关变量的传递，完成不可能的任务。
41
6.5 房贷本息平均偿还试算范例房屋贷款的偿还方式一般有两种，一种是本金平均偿还法，另一种则是本息平均偿还法，两种计算的方式不同。其中本息平均偿还法式最为常用，贷款人需按月平均偿还本息的。它的计算公式如下：
每月偿还金额 =( p * r * ((1+r)^n)) / ((1+r)^n - 1)
在上述的计算公式中,p为贷款金额,r为利率 (月利率 ),n为贷款期限 (以月为单位 )，所以决定偿还金额的大小，其条件分别是贷款金额、利率及贷款期限的长短。下面我们将以此为范例，为读者介绍房贷本息偿还试算的范例。
42
6.5 房贷本息平均偿还试算范例系统开发的步骤银行要开发此套查询系统，首先程序设计员必须了解银行提供房贷本息偿还试算的目的、了解客户的需求 (查询所得的信息为何 )、据以得知用户输入的项目，然后制作查询的网页。因此我们制定的系统开发步骤如下：
● 确定客户查询的需求 (画面输出的内容 )
● 制作房贷本息平均偿还试算网页
● 取得计算公式
● 编写计算房贷本息平均偿还的程序
43
6.5 房贷本息平均偿还试算范例
1,确定客户查询的需求根据访谈银行承办人员的结果，假设客户上网进行“房贷本息平均偿还”试算时，他所要得到的输出信息为贷款金额、利率、贷款期限及每月偿还金额等共
4 个字段。根据上述的需求，程序设计员先勾画出输出画面的雏形，供放款承办人员确认。经确认后的画面输出格式如下图所示。
44
6.5 房贷本息平均偿还试算范例
2,制作房贷本息平均偿还试算网页程序设计员根据上面输出的要求，分析出网页上至少需要客户姓名、性别、贷款金额
、利率、贷款期限等 5个字段，
并据此制作查询的网页，网页的文件名称我们将它命名为
ch6-6.htm，并在 HTML中指定
<form>标记执行的 ASP程序为
ch6-6.asp。网页如右图所示。
45
6.5 房贷本息平均偿还试算范例网页 ch6-6.htm的源代码下。
<html>
<head>
<title>房贷本息平均偿还试算 </title>
</head>
<body>
<font color=“#FF0000” size=“4”><center>☆ 房贷本息平均偿还试算
☆ </center></font><br>
<center>,先计算一下偿还能力再买房子,</center>
<p>
您想贷款吗？您知道向银行贷款每月要还多少金额吗？本程序提供您贷款还款金额试算的功能，让您在贷款之前先试算一下您每个月须偿还的金额，提供您评估偿还能力的参考。 <br>
</p>
<form name="action" method="post" action="ch6-6.asp">
姓 名：
<input name="name" type="text" size="8" >
<br>
46
6.5 房贷本息平均偿还试算范例网页 ch6-6.htm的源代码下 (续 )
性 别：
<input type="radio" name="sex" value="1">
男
<input type="radio" name="sex" value="0">
女 <br>
贷款金额：
<input name="p" type="text" size="8">
万元 <br>
利 率：
<input name="r" type="text" size="8">
年利率（ %） <br>
贷款期限：
<input name="n" type="text" size="8">
年 <br>
<input type="submit" name="Submit2" value="试算 ">
</form>
</body>
</html>
47
6.5 房贷本息平均偿还试算范例在上面的源代码中，变量名称的命名原则如下：
● 姓名 (name)
● 性别 (sex)
● 贷款金额 (p)
● 利率 (r)
● 贷款期限 (n)
其中为简化客户的输入，贷款金额以万元为单位，
利率为年利率，贷款期限以年为计算。另外，在 ASP 程序代码中,<%= name %>是在此以变量 name的内容取代的意思，在本例中 name的值为“高琪”。
48
6.5 房贷本息平均偿还试算范例
3,取得计算公式经过放款承办人员的协助，程序设计员取得本息平均偿还法的计算公式如下：
每月偿还金额 = (p * r * ((1+r)^n)) / ((1+r)^n - 1)
说明,ASP的,^”符号代表几次方的意思，例如 3^2
代表 3的 2次方。
在上述的计算公式中,p为贷款金额 (以元为单位 )，
r为月利率,n为贷款年限，这三个字段与输入字段的单位均不相同，因此必须经过转换后才可以正确的计算出结果。换算方式如下：
● 本金以万元为单位，故须以 10000来计算。
p = 输入的本金 * 10000
49
6.5 房贷本息平均偿还试算范例例如客户输入 50(万元 )，则换算方式如下：
p = 50 * 10000
● 利率 (%)以年为单位，故需先除以 100，再除以 12换算为月利率
r = 输入的利率（ %） / 100 / 12
例如客户输入 8(代表 8%)，则换算方式如下：
r = 8 / 100 / 12 = 0.08 / 12
● 期限以年为单位，故需先乘以 12，换算总共须偿还多少个月
n = 输入的贷款期限（年） * 12
例如客户输入 20(年 )，则换算方式如下：
r = 20 * 12 = 240 期（每期为一个月）
50
6.5 房贷本息平均偿还试算范例
4,编写计算房贷本息平均偿还的程序当上面的准备事项均完成以后，我们就可以根据上面的需求来开发 ASP程序。经开发完成的 ASP程序 (ch6-6.asp)如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>房贷本息平均偿还试算 </title>
</head>
<%
dim name
dim sex
dim p
dim r
dim n
dim ss
name=request("name")
sex=request.Form("sex")
51
6.5 房贷本息平均偿还试算范例
ch6-6.asp (续 ),
if sex=0 then sex1="女士 "
if sex=1 then sex1="先生 "
p=request.Form("p")
r=request.Form("r")
n=request.Form("n")
ss=(p*10000 * r/100/12 * ((1+r/100/12)^(n*12))) / ((1+r/100/12)^(n*12) - 1)
%>
<body>
<p><font color="#0000FF" size="4">[房贷本息平均偿还试算 ]</font> </p>
<p><font size="2">贷款试算结果如下,<br>
<%=name%><%=sex1%> 您好,<br>
假如您向银行贷款 <%=p%>万元 <br>
利率为 <%=r%>%<br>
贷款期限为 <%=n%>年 </font></p>
<p><font size="2">则您每个月须付给银行本息 <%=ss%>元。 </font></p>
<p><font size=“2”>,本试算仅供参考，详细内容以银行实际计算之数据为准。,</font><br></p>
</body>
</html>
52
6.5 房贷本息平均偿还试算范例当客户连至银行网站执行本程序时，输入姓名、性别、贷款金额、利率、贷款期限后，最后按下试算按钮执行试算工作。 ch6-6.asp程序试算出客户每月须偿还的金额，如下图所示。
53
第 6章 HTML表单与 ASP
本章为读者介绍了如何利用 HTML表单，搭配
ASP来开发动态网站应用程序，制作出功能强大的各种 Web应用程序。
