《ASP动态网页设计教程 教学课件 ppt 作者 丁桂芝 第6章》由会员分享，可在线阅读，更多相关《ASP动态网页设计教程 教学课件 ppt 作者 丁桂芝 第6章（53页珍藏版）》请在金锄头文库上搜索。
1、第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 制作静态网页非常擅长，对于动态 的网页制
2、作则必须通过应用程序完成。在HTML提供的 标记中，我们可以定义各式各样的表单对象，例如：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表单是以标记来定义，它内置的属性中以 Action 和 Method 为最重要。其中 Action 定义Server 端执行的应用程序名称；Method 则用以定义S
3、erver 与应用程序数据的传递方式。 标记的语法如下。 ： ,7,6.1 HTML表单,6.1.2 表单对象的定义 在图形化的用户界面中，系统提供许多内置的标准用户界面，例如CheckBox、 RadioButton、TextBox、ComboBox、ListBox及Button等，让表单提供比静态网页更丰富和更具亲和力的用户界面，如下图所示。,8,6.1 HTML表单,6.1.3 提交按钮的配置 HTML表单至少会含有一个“提交”按钮，让用户在输入各项字段的内容后，提交数据至Server端的应用程序。在HTML表单中，通常我们在网站上至少会看到两种按钮，一种是提交 (Submit) 按钮，
4、另一种则是重置(Reset)按钮，其语法如下： ,9,6.2 会员登录范例,为了让读者了解HTML表单的应用，我们以会员登录表单(login.htm)为例，示范HTML表单的编写方式。会员登录表单的HTML源代码(ch6-2.htm)如下： 会员登录 ASP程序设计讨论区 会员登录 ,10,6.2 会员登录范例,会员登录表单的HTML源代码(ch6-2.htm)续： 用户： 密码： ,11,6.2 会员登录范例,上述会员登录的HTML表单，我们若以浏览器Internet Explorer来浏览，显示的画面如下图所示。 在这个HTML表单中，除了HTML表单的基本控件之外，另外我们也看到几个较特
5、殊的参数设定值， 比如Action参数 、Method参数等。这些设定值的说明见下页：,12,6.2 会员登录范例, 标记中的Action参数 参数值为login.asp，表示按下“提交”按钮后，告知Server启动应用程序login.asp来处理此HTML输入表单。 标记的Method参数 此参数的值可以为post或get，用以告知Server启动程序时，数据传输的途径。由于当初CGI接口(即Common Gateway Interface通用网关接口)规则的定义是以Unix为参考标准，因此有许多数据传递的方式是参考Unix系统的做法来说明，因此将Post和get的差异分述如下： post用
6、以告知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应用程序后，由应用程序自上述的环境变量取得
7、Client端的数据，以便进一步的处理。 标记的参数 会员登录的画面共有两个文本框，用以输入用户和密码两个字段，这两个字段差异分述如下：,14,6.2 会员登录范例, 用户：用户输入表单的控件为文本框(TextBox)，如下面的HTML所示。HTML的标记为，其中参数 type 的值为 text，表示输入的表单控件为文本框，name是文本框的字段名称，size是文本框在浏览器中显示的宽度，value 是该字段的初值 (在此为空白) 。至于maxlength则用于指定字段最大可输入的长度。 密码：密码输入表单控件，其中参数 type 的值为password，如下面的 HTML 所示，表示此表单控
8、件为输入密码的文本框，文本框在输入文字时字符以“” 或 “*”字符代替，以达到保护密码不被他人窥视的目的。 ,15,6.2 会员登录范例, 标记与提交按钮 在HTML的表单的中，至少会安排一个“提交”按钮，供用户将输入的数据，提交至Server上的应用程序，提交按钮同样使用 标记，惟有参数type的值为“submit”，这是与文本框最大的差别之处。至于提交按钮上的文字，是以Value指定(本例为“提交”)，提交按钮的HTML语法如下： 标记与重置按钮 许多的HTML表单在“提交”按钮之外，另外会安排“重置”按钮(Reset)，当用户按下此按钮时，表单中所有的字段内容会自动被清除。“重置”按钮参
9、数type的值为“reset”是重置的意思。重置有清除输入内容之意，故在本例中我们命名为clear。重置按钮的HTML语法如下： ,16,6.2 会员登录范例,当Client端浏览器的用户输入会员登录所需的信息后(例如用户为hlfjob，密码为123456)，如下图所示： 输入信息后按下“提交”按钮，浏览器将依照表单输入字段和用户的输入内容，自动编辑Client端要求(Request)的信息格式。信息格式如下： uid=hlfjob&pwd=123456 在上述的信息格式中，uid及pwd为表单的字段名称，而hlfjob和123456为用户输入的值。字段名称与输入值之间以“=”为分隔字符，字段
10、与字段之间则以“&”字符分隔。,17,6.3 Server与ASP应用程序,当Server端收到来自Client端的要求信息时，Server看应用程序所采用的接口规则(CGI, ISAPI, 或NSAPI等)，将数据置于特定位置(如前所述的环境变量、stdin或ISAPI/NSAPI等所指定的区域)，然后启动对应的应用程序来处理。为了简化应用程序的复杂程度，我们将会员登录后执行的ASP程序，改为将用户输入的字段值显示于画面上，让读者了解ASP的运作原理。会员登录的Login.asp的ASP程序代码如下。 会员登录 !,18,6.3 Server与ASP应用程序,会员登录的Login.asp的A
11、SP程序代码(续): p font-family: 宋体; font-size: 11pt td,input font-family: 宋体; font-size: 9pt / ASP程序设计 会员登录 您登录的信息如下： “) Response.Write(“密码:“+Request(“pwd“)+“) % ,19,6.3 Server与ASP应用程序,应用程序取得来自Server交付的Client端信息后，ASP将Client端要求的信息解析后存在Request对象，供后续的ASP程序代码处理。在本例中我们使用Request(“uid”)取得用户输入值，Request(“pwd”)取得用户
12、密码。利用Response对象的Write方法，将响应信息(处理结果)以HTML格式传回 Client 端，由浏览器在收到响应信息时，解析HTML后输出至画面上。Login.asp执行结果如下图所示。,20,6.3 Server与ASP应用程序,看完上述的说明后，我们将整个交易流程绘成流程图，如下图所示。,21,6.4 各种HTML表单控件,HTML提供许多与表单搭配的控件，例如CheckBox、RadioButton、TextBox、ComboBox及ListBox等，让网页的用户界面增添许多的专业性和亲和力。虽然它提供的功能相当简单，却足以应付绝大部分的需求。接着我们将针对各种表单输入控件
13、，做更为详细的介绍。,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设定。 用户界面：,说明：maxlength与数据库字段长度设为一致，可避免输入的数据长度大于数据库字段长度，造成程序丢失的危险。,24,6.4 各种HTML表单控件,6
14、.4.1 文本输入控件 密码输入框 供文字密码字段输入使用，输入的文字以“”或“*”显示于输入区，以避免密码遭他人窥视。 多行文本输入框 此控件为输入大量文字时使用，它可以设定输入区的大小(宽及高)。当输入的文字超过行的长度时数据会自动换行，数据长度大于输入区的高度时，控件右边滚动条(ScrollBar)的功能会自动启动。 文本输入框 (Memo),25,6.4 各种HTML表单控件,6.4.1 文本输入控件 说明：rows用以指定文本框可显示的行数，cols则是指定每行可输入的最大字符数。当输入字符超过cols的设置值时，文字会自动换行(自动跳至下一行了)。 文件输入框 用于处理上传文件至S
15、erver端的工作。例如，求职者的履历表已经以记事本(NotePad)打好，用户可通过此控件以Windows打开旧文件对话框选取文件，上传此文件至Server处理(例如：更新网页、修改参数文件、设置电子报采用的版面等文件)。 说明：要拥有文件输入框的功能，必须将标记中的Type指定为file即可，其用户界面有两个，一个是输入框，另一个为浏览的按钮。,26,6.4 各种HTML表单控件,6.4.2 下拉式列表框 下拉式列表框(ComboBox) 提供像菜单一样的用户界面，如下图所示，它设计的主要目的是想在有限的画面中，摆放更多的用户输入控件。由于它占用的空间极小，因此广为程序设计员采用。下面是下
16、拉式列表框的HTML语法范例： 北京 上海 天津 在上述的语法中，下拉式列表框的标记为 ，其中name 为控件的名称，size可指定画面显示列数。当size=1时，为下拉式列表框(ComboBox)，若其值大于1时则为ListBox界面。至于 标记间的文字，则用于定义下拉式列表框的项目内容。至于标记的 value 属性，则可设置选项对应的代码(code)。,27,6.4 各种HTML表单控件,6.4.2 下拉式列表框 范例ch6-3.htm ： 表单控件 海河电器公司招聘人才 职位：项目经理 学历：大学以上学历，五年以上工作经验 年龄：35岁以下 工作地点：北京、上海、天津 电子邮件： 履 历 表： ,28,6.4 各种HTML表单控件,6.4.2 下拉式列表框 范例ch6-3.htm (续)： 希望工作地点： 北京 上海 天津 ,29,6.4 各种HTML表单控件,6.4.2 下拉式列表框 执行结果如下图所示。,
