第6章HTML表单与ASP.ppt

第6章HTML表单与ASP,第6章HTML表单与ASP,前面介绍了HTML与ASP相关的概念之后，我们已经了解到HTML只能制作静态网页，至于动态网页的部分则必须借助于CGI应用程序完成，而在本章，我们将为读者介绍如何利用HTML表单，搭配ASP来开发动态网站应用程序，制作出功能强大的各种Web应用程序。,第6章HTML表单与ASP,6.1HTML表单6.2会员登录范例6.3Server与ASP应用程序6.4各种HTML表单控件6.5房贷本息平均偿还试算范例,6.1HTML表单,HTML制作静态网页非常擅长，对于动态的网页制作则必须通过应用程序完成。在HTML提供的标记中，我们可以定义各式各样的表单对象，例如：CheckBox、RadioButton、ComboBox、ListBox及Button等，通过这些对象可以完成网页的用户界面，并完成与应用程序之间的沟通。,6.1HTML表单,6.1.1HTML表单的定义6.1.2表单对象的定义6.1.3提交按钮的配置,6.1HTML表单,6.1.1HTML表单的定义HTML表单是以标记来定义，它内置的属性中以Action和Method为最重要。其中Action定义Server端执行的应用程序名称；Method则用以定义Server与应用程序数据的传递方式。标记的语法如下。：,6.1HTML表单,6.1.2表单对象的定义在图形化的用户界面中，系统提供许多内置的标准用户界面，例如CheckBox、RadioButton、TextBox、ComboBox、ListBox及Button等，让表单提供比静态网页更丰富和更具亲和力的用户界面，如下图所示。,6.1HTML表单,6.1.3提交按钮的配置HTML表单至少会含有一个“提交”按钮，让用户在输入各项字段的内容后，提交数据至Server端的应用程序。在HTML表单中，通常我们在网站上至少会看到两种按钮，一种是提交(Submit)按钮，另一种则是重置(Reset)按钮，其语法如下：,6.2会员登录范例,为了让读者了解HTML表单的应用，我们以会员登录表单(login.htm)为例，示范HTML表单的编写方式。会员登录表单的HTML源代码(ch6-2.htm)如下：会员登录ASP程序设计讨论区会员登录,6.2会员登录范例,会员登录表单的HTML源代码(ch6-2.htm)续：用户：密码：,6.2会员登录范例,上述会员登录的HTML表单，我们若以浏览器InternetExplorer来浏览，显示的画面如下图所示。在这个HTML表单中，除了HTML表单的基本控件之外，另外我们也看到几个较特殊的参数设定值，比如Action参数、Method参数等。这些设定值的说明见下页：,6.2会员登录范例,标记中的Action参数参数值为login.asp，表示按下“提交”按钮后，告知Server启动应用程序login.asp来处理此HTML输入表单。标记的Method参数此参数的值可以为post或get，用以告知Server启动程序时，数据传输的途径。由于当初CGI接口(即CommonGatewayInterface通用网关接口)规则的定义是以Unix为参考标准，因此有许多数据传递的方式是参考Unix系统的做法来说明，因此将Post和get的差异分述如下：post用以告知Server将Client的表单数据置于stdin(Unix操作系统的标准输入设备)，并将置于stdin中的数据长度放在环境变量CONTENT_LENGTH中。,6.2会员登录范例,最后启动对应的应用程序，由应用程序根据环境变量CONTENT_LENGTH取得数据长度，然后由stdin中读取环境变量CONTENT_LENGTH所指定的数据长度，取得Client端的数据做进一步的处理。get与post方法不同，它告知Server将数据长度及数据均置于环境变量CONTENT_LENGTH及QUERY_STRING中。在Server启动CGI应用程序后，由应用程序自上述的环境变量取得Client端的数据，以便进一步的处理。标记的参数会员登录的画面共有两个文本框，用以输入用户和密码两个字段，这两个字段差异分述如下：,6.2会员登录范例,用户：用户输入表单的控件为文本框(TextBox)，如下面的HTML所示。HTML的标记为，其中参数type的值为text，表示输入的表单控件为文本框，name是文本框的字段名称，size是文本框在浏览器中显示的宽度，value是该字段的初值(在此为空白)。至于maxlength则用于指定字段最大可输入的长度。密码：密码输入表单控件，其中参数type的值为password，如下面的HTML所示，表示此表单控件为输入密码的文本框，文本框在输入文字时字符以“”或“*”字符代替，以达到保护密码不被他人窥视的目的。,6.2会员登录范例,标记与提交按钮在HTML的表单的中，至少会安排一个“提交”按钮，供用户将输入的数据，提交至Server上的应用程序，提交按钮同样使用标记，惟有参数type的值为“submit”，这是与文本框最大的差别之处。至于提交按钮上的文字，是以Value指定(本例为“提交”)，提交按钮的HTML语法如下：标记与重置按钮许多的HTML表单在“提交”按钮之外，另外会安排“重置”按钮(Reset)，当用户按下此按钮时，表单中所有的字段内容会自动被清除。“重置”按钮参数type的值为“reset”是重置的意思。重置有清除输入内容之意，故在本例中我们命名为clear。重置按钮的HTML语法如下：,6.2会员登录范例,当Client端浏览器的用户输入会员登录所需的信息后(例如用户为hlfjob，密码为123456)，如下图所示：输入信息后按下“提交”按钮，浏览器将依照表单输入字段和用户的输入内容，自动编辑Client端要求(Request)的信息格式。信息格式如下：uid=hlfjob&pwd=123456在上述的信息格式中，uid及pwd为表单的字段名称，而hlfjob和123456为用户输入的值。字段名称与输入值之间以“=”为分隔字符，字段与字段之间则以“&”字符分隔。,6.3Server与ASP应用程序,当Server端收到来自Client端的要求信息时，Server看应用程序所采用的接口规则(CGI,ISAPI,或NSAPI等)，将数据置于特定位置(如前所述的环境变量、stdin或ISAPI/NSAPI等所指定的区域)，然后启动对应的应用程序来处理。为了简化应用程序的复杂程度，我们将会员登录后执行的ASP程序，改为将用户输入的字段值显示于画面上，让读者了解ASP的运作原理。会员登录的Login.asp的ASP程序代码如下。会员登录ASP程序设计会员登录您登录的信息如下：)Response.Write(密码:+Request(pwd)+)%,6.3Server与ASP应用程序,应用程序取得来自Server交付的Client端信息后，ASP将Client端要求的信息解析后存在Request对象，供后续的ASP程序代码处理。在本例中我们使用Request(“uid”)取得用户输入值，Request(“pwd”)取得用户密码。利用Response对象的Write方法，将响应信息(处理结果)以HTML格式传回Client端，由浏览器在收到响应信息时，解析HTML后输出至画面上。Login.asp执行结果如下图所示。,6.3Server与ASP应用程序,看完上述的说明后，我们将整个交易流程绘成流程图，如下图所示。,6.4各种HTML表单控件,HTML提供许多与表单搭配的控件，例如CheckBox、RadioButton、TextBox、ComboBox及ListBox等，让网页的用户界面增添许多的专业性和亲和力。虽然它提供的功能相当简单，却足以应付绝大部分的需求。接着我们将针对各种表单输入控件，做更为详细的介绍。,6.4各种HTML表单控件,6.4.1文本输入控件6.4.2下拉式列表框6.4.3复选框6.4.4单选框6.4.5隐藏字段,6.4各种HTML表单控件,6.4.1文本输入控件在HTML中，有4种文本输入控件可以使用，它们分别是：文本输入框密码输入框多行文本输入框文件输入框文本输入框供一般的文字输入使用，只能输入单行文字，文字输入的长度可由maxlength设定。用户界面：,说明：maxlength与数据库字段长度设为一致，可避免输入的数据长度大于数据库字段长度，造成程序丢失的危险。,6.4各种HTML表单控件,6.4.1文本输入控件密码输入框供文字密码字段输入使用，输入的文字以“”或“*”显示于输入区，以避免密码遭他人窥视。多行文本输入框此控件为输入大量文字时使用，它可以设定输入区的大小(宽及高)。当输入的文字超过行的长度时数据会自动换行，数据长度大于输入区的高度时，控件右边滚动条(ScrollBar)的功能会自动启动。文本输入框(Memo),6.4各种HTML表单控件,6.4.1文本输入控件说明：rows用以指定文本框可显示的行数，cols则是指定每行可输入的最大字符数。当输入字符超过cols的设置值时，文字会自动换行(自动跳至下一行了)。文件输入框用于处理上传文件至Server端的工作。例如，求职者的履历表已经以记事本(NotePad)打好，用户可通过此控件以Windows打开旧文件对话框选取文件，上传此文件至Server处理(例如：更新网页、修改参数文件、设置电子报采用的版面等文件)。说明：要拥有文件输入框的功能，必须将标记中的Type指定为file即可，其用户界面有两个，一个是输入框，另一个为浏览的按钮。,6.4各种HTML表单控件,6.4.2下拉式列表框下拉式列表框(ComboBox)提供像菜单一样的用户界面，如下图所示，它设计的主要目的是想在有限的画面中，摆放更多的用户输入控件。由于它占用的空间极小，因此广为程序设计员采用。下面是下拉式列表框的HTML语法范例：北京上海天津在上述的语法中，下拉式列表框的标记为，其中name为控件的名称，size可指定画面显示列数。当size=1时，为下拉式列表框(ComboBox)，若其值大于1时则为ListBox界面。至于标记间的文字，则用于定义下拉式列表框的项目内容。至于标记的value属性，则可设置选项对应的代码(code)。,6.4各种HTML表单控件,6.4.2下拉式列表框范例ch6-3.htm：表单控件海河电器公司招聘人才职位：项目经理学历：大学以上学历，五年以上工作经验年龄：35岁以下工作地点：北京、上海、天津电子邮件：履历表：,6.4各种HTML表单控件,6.4.2下拉式列表框范例ch6-3.htm(续)：希望工作地点：北京上海天津,6.4各种HTML表单控件,6.4.2下拉式列表框执行结果如下图所示。,下拉式列表框控件,6.4各种HTML表单控件,6.4.2下拉式列表框当我们把下拉式列表框控件的Size改为大于1的值，则下拉式列表框控件将变为项目列表控件，例如我们将Size改为3，则浏览器显示该控件的效果如下图所示。,项目列表控件,6.4各种HTML表单控件,6.4.3复选框复选框(CheckBox)可提供多条件选项的复选功能，用户界面如下图所示。,复选框,6.4各种HTML表单控件,6.4.3复选框它主要的设计理念是提供多重条件供用户选择，用户可选择0或多个选项，因此像问卷调查等类的表单均经常使用。复选框的HTML语法范例：北京上海天津在上述的语法中，复选框的type为CheckBox，name用来指定字段名称，value则是点选该条件后的变量值，至于第一项后面的Checked代表本项为已预选项目(自动勾选)。下面是沿用前面网页画面，我们将希望工作地点改为可工作地点，修改后的网页的HTML源代码如下。,6.4各种HTML表单控件,6.4.3复选框范例ch6-4.htm表单控件海河电器公司招聘人才职位：项目经理学历：大学以上学历，五年以上工作经验年龄：35岁以下工作地点：北京、上海、天津电子邮件：,6.4各种HTML表单控件,6.4.3复选框范例ch6-4.htm(续)履历表：可工作地点：北京上海天津,6.4各种HTML表单控件,6.4.3复选框执行结果如右图所示。说明：多个条件的CheckBox选项，其字段名称均应不同，例如本例的北京(city1)、上海(city2)、天津(city3)，否则会导致出现类似RadioButton控件仅有单选的功能。,可工作地点,6.4各种HTML表单控件,6.4.4单选框单选框(RadioButton)与复选框(CheckBox)非常相似。单选框是多选一的界面，而复选框则是多选多的界面。通常单选框适用于多选一的条件，但是由于HTML设计方式的关系，若各单选框的字段名称均不相同，就常会做出类似复选框界面的单选框(也可多选多)。下面是单选框的HTML语法格式：女男要注意的是，标记中的type必须设为radio才是单选框，且在多选一的选项中，控件的字段名称必须一致，方能产生正确的结果。另外我们也可使用checked属性，设定单选框的默认值(例如女)。若我们将上述例子的字段名称设为不同，则单选框也会变成多选多功能：女男,6.4各种HTML表单控件,6.4.4单选框若我们将单选框的范例，应用至美国总统大选的问卷调查上，拿来调查各年龄层的选民、及男性与女性选民对总统候选人的爱好，则我们可将问卷调查表，设计为下面的样式，其HTML原始程序代码如下。范例ch6-5.htm表单控件(单选框)美国总统大选问卷调查候选人：布什克里,6.4各种HTML表单控件,6.4.4单选框范例ch6-5.htm(续)年龄：213031404150516061以上性别：女男,6.4各种HTML表单控件,6.4.4单选框执行结果如下图所示。,6.4各种HTML表单控件,6.4.5隐藏字段除了上述提及的控件以外，在标记的类型定义中，若有hidden选项的隐藏字段类型的控件，此控件的内容不会出现在网页上，主要为提供表单内其字段的常数值。该数值在用户单击“提交”按钮的同时，也会提交至Server端处理。例如，我们将每一个动态网页均赋予一个编号，称为PageNo，则网页中的隐藏字段可写成如下的HTML源代码：在WebServer上，每一个网页均是一个独立的事件，因此我们若要制作像微软的安装向导画面(上一步、下一步与完成)，则每一个网页均必须以隐藏字段控制上下页，及相关变量的传递，完成不可能的任务。,6.5房贷本息平均偿还试算范例,房屋贷款的偿还方式一般有两种，一种是本金平均偿还法，另一种则是本息平均偿还法，两种计算的方式不同。其中本息平均偿还法式最为常用，贷款人需按月平均偿还本息的。它的计算公式如下：每月偿还金额=(p*r*(1+r)n)/(1+r)n-1)在上述的计算公式中，p为贷款金额，r为利率(月利率)，n为贷款期限(以月为单位)，所以决定偿还金额的大小，其条件分别是贷款金额、利率及贷款期限的长短。下面我们将以此为范例，为读者介绍房贷本息偿还试算的范例。,6.5房贷本息平均偿还试算范例,系统开发的步骤银行要开发此套查询系统，首先程序设计员必须了解银行提供房贷本息偿还试算的目的、了解客户的需求(查询所得的信息为何)、据以得知用户输入的项目，然后制作查询的网页。因此我们制定的系统开发步骤如下：确定客户查询的需求(画面输出的内容)制作房贷本息平均偿还试算网页取得计算公式编写计算房贷本息平均偿还的程序,6.5房贷本息平均偿还试算范例,1.确定客户查询的需求根据访谈银行承办人员的结果，假设客户上网进行“房贷本息平均偿还”试算时，他所要得到的输出信息为贷款金额、利率、贷款期限及每月偿还金额等共4个字段。根据上述的需求，程序设计员先勾画出输出画面的雏形，供放款承办人员确认。经确认后的画面输出格式如下图所示。,6.5房贷本息平均偿还试算范例,2.制作房贷本息平均偿还试算网页程序设计员根据上面输出的要求，分析出网页上至少需要客户姓名、性别、贷款金额、利率、贷款期限等5个字段，并据此制作查询的网页，网页的文件名称我们将它命名为ch6-6.htm，并在HTML中指定标记执行的ASP程序为ch6-6.asp。网页如右图所示。,6.5房贷本息平均偿还试算范例,网页ch6-6.htm的源代码下。房贷本息平均偿还试算房贷本息平均偿还试算先计算一下偿还能力再买房子名：,6.5房贷本息平均偿还试算范例,网页ch6-6.htm的源代码下(续)性率：年利率（%）贷款期限：年,6.5房贷本息平均偿还试算范例,在上面的源代码中，变量名称的命名原则如下：姓名(name)性别(sex)贷款金额(p)利率(r)贷款期限(n)其中为简化客户的输入，贷款金额以万元为单位，利率为年利率，贷款期限以年为计算。另外，在ASP程序代码中，是在此以变量name的内容取代的意思，在本例中name的值为“高琪”。,6.5房贷本息平均偿还试算范例,3.取得计算公式经