表单和动态网页

第13章 表单和动态网页,制作表单 在动态网页中，表单是一种最常见的网页元素。表单的主要功能是收集客户端信息，客户端信息发送到服务器以后，服务器端的程序可以处理客户端输入的信息。 1、表单的工作过程 （1）访问者在浏览有表单的页面时，可填写必要的信息，然后单击“提交”按钮。 （2）这些信息通过Internet传送到服务器上。 （3）服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。 （4）当数据完整无误后，服务器反馈一个输入完成信息。 2、表单的两部分 （1）一个是在网页中进行描述的表单对象。 （2）二是应用程序，它可以是服务器端的，也可以是客户端的，用于对客户信息进行分析处理。,3、认识表单对象 在 Dreamweaver 中，表单输入类型称为表单对象。在用户注册页面、搜索页面、电子商务页面等网页中经常出现。可以通过选择“插入-表单对象”来插入表单对象，或者通过从下图显示的“插入”栏的“表单”面板访问表单对象来插入表单对象。,1）、表单 “表单”在文档中插入表单。任何其他表单对象，如文本域、按钮等，都必须插入表单之中，这样所有浏览器才能正确处理这些数据。 2）、文本域 “文本域”在表单中插入文本域。文本域可接受任何类型的字母数字项。输入的文本可以显示为单行、多行或者显示为项目符号或星号（用于保护密码）。 3）、复选框 “复选框”在表单中插入复选框。复选框允许在一组选项中选择多项，用户可以选择任意多个适用的选项。,4）、单选按钮 “单选按钮”在表单中插入单选按钮。单选按钮代表互相排斥的选择。选择一组中的某个按钮，就会取消选择该组中的所有其他按钮。例如，用户可以选择“是”或“否”。 5）、单选按钮组 “单选按钮组”插入共享同一名称的单选按钮的集合。 6）、列表/菜单 “列表/菜单”使您可以在列表中创建用户选项。“列表”选项在滚动列表中显示选项值，并允许用户在列表中选择多个选项。“菜单”选项在弹出式菜单中显示选项值，而且只允许用户选择一个选项。,7）、跳转菜单 “跳转菜单”插入可导航的列表或弹出式菜单。跳转菜单允许您插入一种菜单，在这种菜单中的每个选项都链接到文档或文件。请参见创建跳转菜单。 8）、图像域 “图像域”使您可以在表单中插入图像。可以使用图像域替换“提交”按钮，以生成图形化按钮。 9）、文件域 “文件域”在文档中插入空白文本域和“浏览”按钮。文件域使用户可以浏览到其硬盘上的文件，并将这些文件作为表单数据上传。,10）、按钮 “按钮”在表单中插入文本按钮。按钮在单击时执行任务，如提交或重置表单。可以为按钮添加自定义名称或标签，或者使用预定义的“提交”或“重置”标签之一。 11）、标签 “标签”在文档中给表单加上标签，以形式开头和结尾。 12）、字段集 “字段集”在文本中设置文本标签。认识了表单，那么创建和使用表单时就可以根据需要进行选择。表单时动态网页的灵魂。,验证表单 在网页中，表单属于一种输入界面，它的功能主要在于收集用户输入的各种信息并提交到服务器进行处理。在实际的操作过程中，由于用户输入数据时粗心大意或其他原因，有可能会导致用户输入错误的数据。 如果我们对用户输入的数据不进行判断和处理而直接提交到服务器，轻则在服务器端保存了错误的数据，重则会导致程序在执行时出现错误，甚至可能会导致整个Web应用程序的崩溃，这都是我们所不愿意看到的。,1、行为验证 利用Dreamweaver自带的“检查表单”行为可以很方便地为表单中各元素设置有效性规则，它会自动检查制定文本域的内容以确保用户输入正确的数据类型。,2、JavaScript验证 利用Dreamweaver自带的“检查表单”行为来进行表单的验证是非常简单的，但其功能也是有限的，其实“检查表单”行为所调用的动作实际是封装在Dreamweaver中预定好的各种JavaScript函数。如果在实际的页面设计过程中，想实现更为复杂或精确的验证，可以自己编写JavaScript脚本来实现。,1）、在文件中执行“HTML-脚本”，选择JavaScript语言 2）、输入内容： function ProcForm() var str1,str2; str1=document.form1.txtPassword1.value; /取得“密码”文本框的内容，txtPassword1为文本框名称 str2=document.form1.txtPassword2.value; /取得“确认密码”文本框的内容 if(str1!=str2) alert('输入的密码不一致'); /验证 3）、给“提交”按钮添加调用JavaScript行为，函数名为ProcForm()。,动态网页 随着Internet的普及，网站不再局限于提供信息的简单功能，越来越注重和用户的交互功能。越来越多的网站可以实现让访问者在网页上发表信息，或者进行网上交易等交互性的功能。 认识动态网站 所谓动态网站，是指网页中除HTML标记以外，还包含脚本代码，这种网页文件的扩展名一般根据不同的程序设计语言而不同。例如，ASP采用VBScript或者Jscript脚本代码，其网页扩展名为.asp；JSP采用Java代码，其网页扩展名为.jsp等。,1、静态网页和动态网页的区别 用HTML创建的网页文档，一般不具备交互性，其文件扩展名为.htm或者.html，这类文件通常称为静态网页。在浏览静态网页时，只需在浏览器的“地址栏”文本框中输入静态网页地址，按Enter键后，服务将查找该文件，并直接将结果返回到客户端浏览器窗口中显示。静态网页的执行过程如图所示。,2、动态网页 动态网页与静态网页的工作原理有所不同。当用户在浏览器的“地址栏”文本框中输入动态网页地址，按Enter键后，浏览器向存放动态网页的服务器提出一个请求。服务器接收到请求后，首先查找用户所需要浏览的动态网页文件，然后执行网页文件中的程序脚本代码，将含有脚本代码的动态网页转换成标准的HTML静态网页，再将静态网页发送到用户的浏览器窗口中显示。动态网页的执行过程如图所示。,3、动态网页设计语言 动态网页是一种在HTML代码中加入了脚本程序语言的网页文件，常用的动态网页设计语言包括ASP（Active Server Pages）、PHP（Person Home Page）、JSP（Java Server Pages）和ASP.net等。 ASP采用VBScript和JScript脚本语言，将标准的HTML页面、脚本语言以及Activex组建结合在一起，设计动态、交互式的网页效果。ASP是目前最流行的动态网页编程语言，对于一般的网页设计者来说，ASP是一种最容易掌握的动态网页编程语言。,4、 ASP编程语言 ASP是Active Server Page的缩写，意为“活动服务器网页”。ASP是微软公司开发的代替CGI脚本程序的一种应用，它可以与数据库和其它程序进行交互，是一种简单、方便的编程工具。ASP的网页文件的格式是.asp，现在常用于各种动态网站中。ASP是一种服务器端脚本编写环境，可以用来创建和运行动态网页或web应用程序。 一个简单ASP网页 ,网页编程的相关概念 在这一节中将介绍网页服务器、应用服务器（应用程序服务器）、数据库和数据库驱动程序等方面的内容。这些内容是学习网页编程的基础概念，所以一定要充分理解。 1、网页服务器 服务器简单地说是提供服务的设备资源。我们可以把服务器理解成向访问网页的客户（电脑或客户端浏览器）提供服务的电脑。我们可以把目前使用的个人电脑用做网页服务器，还可以利用主机租用服务。将个人电脑设置为网页服务器的最简单的方法就是安装微软公司的IIS或者是PWS。操作系统为Windows2000、NT服务器和WindowsXP的用户安装IIS、操作系统为Windows98和NT工作站的用户则安装PWS。,2、网页应用服务器 网页应用服务器是解析特定程序来制作HTML文档的程序。简单地说，就如同把外语翻译成中文的翻译公司，把由程序语言组成的网页程序解析为HTML，实现这种功能的就是应用服务器。根据不同的编程语言类型其应用服务器也有很多种。安装IIS和PWS之后，基本上都会一并安装网页服务器和ASP应用程序服务器。 3、数据库【Database】 数据库原为军事术语，表示资料（Data）的基地（Base），即资料的积累。但如果只是累积资料就不能发挥任何作用。例如，整理抽屉的时候在最上面的抽屉上放笔记工具，在第2个抽屉中放重要文档，地3个抽屉放其他学习用品等，这样分别整理才会便于寻找。就这样数据库的基础就是进行整理和分类。,4、数据库驱动程序【ODBC】 所谓数据库驱动程序就是连接网页编程和数据库的中间过程，即可以理解为网页程序和数据库之间发挥桥梁作用的程序。 我们可以把将要学习的网页编程理解为制作动态网页。进行网页编程的方法有很多种，而且还有很多种网页服务器、应用服务器以及数据库。其中我们要选择适合大家的条件和环境的服务器和数据库来进行网页编程。我们利用最简单而最普通的方法，即以ASP为基础，利用IIS网页服务器和Access数据库来学习。,安装和配置Web服务器 动态网页的ASP脚本语言是在服务器端IIS或PWS中解释和运行，并可动态生成普通的HTML网页，然后再传送到客户端供浏览。因此要在本地电脑上调试和运行ASP网页，必须在本地电脑上安排IIS组件或者PWS组件并根据需要配置Web服务器。,1、安装IIS 以下为Windows 2000 Server安装IIS 5.0 1）、打开控制面板，双击【添加/删除程序】，在【添加/删除程序】对话框中单击【添加/删除Windows组件】。 2）、选取【Internet信息服务（IIS）】选项。,3）、单击【详细信息】按钮，将打开一个有关Internet的详细信息窗口。在此信息面板中有九种组件可供用户选择安装。其中，要添加或删除某个组件，请点击左边的复选框。灰色框表示只会安装该组件的一部分。要查看组件的详细内容，可单击右下角的【详细信息】按钮。 4）、设置好之后按【确定】按钮，单击【下一步】按钮即开始复制文件，有需要的话，安装程序会提示放入Windows源光盘，这时用户应插入Windows源光盘，否则IIS组件安装不成功。,2、测试IIS ISS安装完毕之后，要测试一下是否按照成功。 1）、启动浏览器，在地址栏输入http:/127.0.0.1或http:/localhost/localstart.asp，回车之后，将弹出【输入网络密码】对话框，提示输入登录系统的用户名和密码，然后单击【确定】按钮，或者不输入用户名和密码，直接单击【确定】按钮。 2）、如果浏览器成功地打开了网页帮助窗口，就表示成功安装了网页服务器（IIS）。,3、 配置Web服务器 1）、在【控制面板】中的【管理工具】图标上双击，打开管理工具，再双击【Internet服务管理器】图标，或者在【开始】-【运行】栏键入“inetmgr”命令，弹出【Internet服务管理器】窗口，单击计算机名称旁边的“+”号，然后在【默认Web站点】项上单击鼠标右键，在弹出的菜单中选取【属性】命令。 2）、单击【Web站点】标签，然后按一下【IP地址】字段的下拉菜单，选择Web服务器要连接的IP地址，如果设置为【全部未分配】，表示Web服务器会连接本地计算机的所有IP地址。,3）、单击【主目录】标签，可以在【浏览】按钮更改【本地路径】，也可以更改此目录开放的权限。【本地路径】指的是当输入地址为计算机的IP地址时，此地址的实际路径为C:Inetpubwwwroot，只要将网页放在这个目录，浏览器就可以输入计算机的IP地址来浏览网页。 4）、单击【文档】选项卡，可以看到站点默认的主页文档名称为Default.hem、Default.asp、和iisstart.asp， 这些默认文档可以自行添加和删除。若要添加默认文档