《网页设计基础-互动操作.ppt》由会员分享，可在线阅读，更多相关《网页设计基础-互动操作.ppt（57页珍藏版）》请在三一办公上搜索。
1、8、PHP网页互动操作,动态网页的一个显著特征就在于它能实现人机互动。对用户输入或者选择的内容能做出相应的回应。这也是动态网页区别于静态网页的一个特征。这一讲就为读者介绍如何用PHP实现人机互动。,主要内容,HTML页面HTML表单组件页面请求参数传递方式服务端接收页面请求参数,PHP动态网页,的IP是？,61.163.241.19,http:/61.163.241.19,http:/61.163.241.19/default.shtm,http:/61.163.241.19/homepage2006/images/cctvlogo_778.gif,组织网页：HTML文件+图片文件+Flash
2、文件,其它图片和Flash等HTML源代码中需要播放的文件,返回,Hypertext Markup Language超文本标记语言在1997年代之前，制作网页大多用HTML语言來完成HTML是一种简单、文字化的语言HTML使用系列化的标签（Tag）来建立一個可在浏览器上观看文件的格式語言,What html？,页面标题页面内容,一个典型的html页面,Html工作原理,-7-,客户端：browser服务器：server结构：B/S结构哦,HTML語言的架構,Html标记分类,页面(Page)字体(Font)文字布局(Text Style)图象(Image)表单(Form)表格(Table)以及
3、表格高级功能(Advanced)多窗口页面(Frames)会移动的文字(Marquee)多媒体页面(Alternative Inline Elements),-9-,HTML 窗体介绍,何谓窗体(Forms)一群 HTML 控件(Controls)的集合HTML 控件种类,文字输入框,密码输入框,多列文字区,单选按钮,多选按钮,下拉式菜单,选择清单,送出/清除纽,一般按钮,档案上传纽,HTML 窗体介绍,HTML 窗体(Form)格式窗体处理网页 URL当窗体被按下“提交”时，窗体内所有控件内含值会被送到此处提交方式有 GET 及 POST 两种，其差异容后详谈范例,在服务器端的PHP接收程序
4、中,必须依照标签中的method 属性设定值,利用PHP内建的预定变量来接收传过来的数据。PHP关于窗体处理的预定变量有下列两种:(1)$_GET:接收由窗体页面使用get 方法(URL网址参数传递),传送过来的字段数据。属于全局的结合数组变量,其数组索引值为所接收字段的识别名称。(2)$_POST:接收由窗体页面使用post 方法(HTTP标头资料传递),传送过来的字段数据。属于全局的结合数组变量,其数组索引值为所接收字段的识别名称。,HTML 窗体介绍,文字输入框(Textbox)格式红色字部分可以省略范例,HTML 窗体介绍,示例：请输入下列程序代码，看看是否能够显示文字输入框请修改 s
5、ize 属性的值。输入框的外观是否变大了呢？请修改 maxlength 的值为 5，再输入文字看看。请问您可以输入几个字？请修改 value=“请输入账号”，有什么变化？,Form Test 请输入账号：,文字与密码方块字段-属性,语法的属性说明，如下表所示：,HTML 窗体介绍,密码输入框(Password)格式红色字部分可以省略范例,HTML 窗体介绍,示例：请输入下列程序代码，看看是否能够显示密码输入框,Form Test 请输入账号：请输入密码：,HTML 窗体介绍,多列文字区(Text Area)格式初始字符串红色字部分可以省略是否传送换列符号有三种选择off:所有换列符号皆不后送s
6、oft:只传送使用者实际按下 Enter 的换列符号hard:所有屏幕上折行的位置皆后送换列符号范例请在此处输入您的意见,HTML 窗体介绍,示例：请输入下列程序代码，看看是否能够显示多列文字区,Form Test 请输入您的意见,文字区域字段-属性,语法的属性说明，如下表所示：,HTML 窗体介绍,单选按钮(Radio Button)格式红色字部分可以省略Checked 设定此单选按钮是否预设为勾选范例男性女性注意事项所有同一组的单选按钮之变量名称必须相同，否则会被视为不同群组。以上例而言，若使用者勾选“女性”，则 PHP 会收到一个变量名为$rdoSex，其内容值为“female”,HTM
7、L 窗体介绍,示例：请输入下列程序代码，看看是否能够显示单选按钮,Form Test 性别：男性 女性,单选按钮-属性,语法的属性说明，如下表所示：,HTML 窗体介绍,多选按钮(Checkbox)格式红色字部分可以省略Checked 设定此多选按钮是否预设为勾选范例 记住我的密码,HTML 窗体介绍,注意事项：每个多选按钮变量名称必须不同，否则将会发生只收到最后一个勾选的后送值之情况。请输入您的嗜好：吃 喝 玩 乐若使用者勾选上述四者，后端的 PHP 处理网页只会收到$hobbies=“gamble”。,PHP 允许使用数组来储存 checkbox 每个内容值请输入您的嗜好：吃 喝 玩 乐若
8、使用者勾选上述四者，服务器端的 PHP 处理网页会收到如下的值hobbies0=“eat”;hobbies1=“drink”;hobbies2=“game”;hobbies3=“gamble”;,HTML 窗体介绍,示例：请输入下列程序代码，看看是否能够显示多选按钮,Form Test 请输入您的嗜好：吃 喝 玩 乐,复选框字段-属性,语法的属性说明，如下表所示：,HTML 窗体介绍,下拉式菜单(Combo Box)格式选项名称1选项名称2Selected将此选项预设为被选取选项名称在下拉式菜单里的文字范例请输入您所在的城市：北京市上海市香港,HTML 窗体介绍,示例：请输入下列程序代码，看看
9、是否能够显示下拉式菜单,Form Test 请输入您所在的城市：北京市上海市香港,HTML 窗体介绍,选择清单(List)格式：与下拉式菜单完全相同选项名称1选项名称2选项名称3清单显示项目数指定此一清单要显示几个项目。若实际项目数量大于此值，则该清单会出现卷动轴Multiple设定此清单是否可以多选若可以多选时，则用 ctrl+鼠标左键可以选择不连续的项目若用 shift+鼠标左键可以选择一群连续的项目,HTML 窗体介绍,范例请问您家中有些什么人 爸爸妈妈兄弟姊妹,HTML 窗体介绍,示例：请输入下列程序代码，看看是否能够显示选择清单,Form Test 请问您家中有些什么人 爸爸妈妈兄弟
10、姊妹,下拉组件-属性,标签的属性说明，如下表所示：标签的属性说明，如下表所示：,HTML 窗体介绍,提交/清除钮送出钮格式每个 之间必须有一个提交按钮，好让该 form 内所有的值提交清除钮格式清除钮的任务就是将此 form 内所有的后送值还原成原来的样子。一个 form 可以没有此按钮提交/清除钮范例,HTML 窗体介绍,示例：请输入下列程序代码，先在文字列随便打点字，再按下清除钮，看看有何效果。请再随便打些字，按下提交钮，看看有何效果？,Form Test,HTML 窗体介绍,隐藏字段隐藏字段并不需使用者输入数据，而是直接将value属性值传送到伺服端，通常是用来传送窗体的环境参数，或是在
11、不同网页窗体间传递数据范例：当使用者按下“提交”钮时，可以将按下提交钮的时间利用隐藏字段夹带回送到服务器来。格式范例”,HTML 窗体介绍,档案上传钮(File Upload Button)功能提供使用者指定本地端上传档案文件名及路径本按钮只有指定路径与文件名的功用，并无实际上传功能。格式范例具体在文件处理章节中再详细介绍,HTML 窗体介绍,一般按钮(Button)功能提供程序员显示一个一般按钮格式范例注意事项HTML 的一般按钮本身并无特殊功能，只是在页面显示一个按钮的形状而已。必须搭配 JavaScript 才有动作。,HTML 窗体介绍,示例：请输入下列程序代码，按下我们做的一般按钮，
12、看看有何效果？,Form Test function btnClick()alert(“这个按钮被按下了”);,HTML 窗体介绍,文字输入框(Textbox)密码输入框(Password)多列文字区(Text Area)单选按钮(Radio Button)多选按钮(Checkbox)下拉式菜单(Combo Box)选择清单(List)提交钮/清除钮/隐藏字段/文件上传钮/一般按钮,接收网页变量,PHP 取得变量值的方法,GET,POST,前端传送法以 GET 传送以 POST 传送,服务器端接取法以 全域数组变量 接收$_GET$_POST,接收网页变量,前端传送方法 GET以 GET 传送
13、范例,登入名称：登入密码：,http:/,接收网页变量,前端传送方法 GET以 GET 传送的 HTTP 包优点使用者可以 Bookmark 此一动态网页，随时显示使用者当初看到的样子。缺点所有讯息全部附在 URL 尾端的 CGI 变量区传送出去。使用者对于传送什么可以看得一清二楚，无法对传送数据保密。受限于浏览器对 URL 设下的最大长度限制(如：IE?2048 bytes，NS?1024 bytes)无法用 GET 方法上传档案,GET login.php?txtName=Robert&txtPass=1234 HTTP/1.1HOST:User-agent:Mozilla/5.0,接收网
14、页变量,随堂练习请输入下列程序代码，并按下送出试试看。将档案存为 GetExample.html，以后还会用到。,登入名称：登入密码：,接收网页变量,前端传送方法 POST以 POST 传送范例,登入名称：登入密码：,http:/,?与正常网址无异,接收网页变量,前端传送方法 POST以 POST 传送的 HTTP 封包长相优点所有讯息包在 HTTP 封包中，使用者无从得知传送什么值到后端网页，进而无法猜测整个网站的运作机制。不受限于浏览器对 URL 设下的最大长度限制使用者可以上传档案缺点HTTP 封包中的文字仍为明码，有心人士仍可经过较为复杂的手续拦截得知后送了哪些变数及值。,POST l
15、ogin.php HTTP/1.1HOST:User-agent:Mozilla/5.0Content-Type:application/x-www-form-urlencodedContent-Length:27txtName=Robert&txtPass=1234,接收网页变量,示例：请输入下列程序代码，并按下送出试试看。将档案存为 PostExample.html，以后还会用到。,登入名称：登入密码：,接收网页变量,后端接取方法 全域数组变量原理所有以 GET 传上来的变量及其值，都会存放于$_GET 数组中所有以 POST 传上来的变量及其值，都会存放于$_POST 数组中范例,登入名
16、称：登入密码：,login.html,;echo Your password is$Password;?,login.php,接收网页变量,示例：请输入下列程序代码，并执行看看。您可以用$_GET 接收到您要的值吗？,”;echo“您的用户密码为：$txtPass”;?,登入名称：登入密码：,接收网页变量,示例：请将上述范例改为 POST，您可以用$_POST 抓到您要的值吗？,”;echo“您的用户密码为：$txtPass”;?,登入名称：登入密码：,PHP程序如何验证窗体-说明,在PHP程序取得窗体字段数据并不困难，事实上，我们反而需要多考虑使用者输入的资料是否符合需求，在处理取得的数据前
17、进行字段数据的验证，检查使用者输入的数据是否符合所需的格式。当PHP程序使用$_POST或$_GET结合数组取得字段数据后，在真正处理资料前，我们可以使用if等条件叙述检查使用者输入的字段数据是否正确，或数据是否空白，表示使用者忘了输入字段数据。,PHP程序如何验证窗体-流程图,如果使用者输入的数据有错误，PHP程序并不进行数据处理，而是显示错误讯息，然后回到窗体网页要求使用者重新输入，窗体字段验证的流程图，如下图所示：,PHP程序如何验证窗体-实作,在实作窗体字段验证时，我们可以使用两个PHP程序：一是窗体网页显示错误讯息，一是PHP处理程序，当错误产生时，就使用header()转址回网页窗
18、体。另一种方式是将窗体和PHP处理程序写在同一个PHP程序，使用if条件判断是否是窗体送回，如果是，再进行窗体字段验证和处理。,窗体字段验证-判断是否是窗体送回,PHP程序进行字段验证时，因为窗体和处理程序写在同一个程序档案，所以PHP程序需要判断显示窗体内容，或是输入数据后的窗体送回，可以执行窗体字段验证，如下所示：if(isset($_GETReg)/窗体处理上述if条件可以判断使用者是否按下窗体按钮，因为窗体使用get方法，所以在PHP程序是使用$_GET结合数组。,窗体字段验证-字段验证,如果按下按钮，就表示使用者已经输入数据，将窗体送回进行处理，所以我们可以开始执行字段数据的检查，接着进行窗体处理。如果字段有错误，就不进行窗体处理，直接显示网页窗体，以便重新让使用者输入正确的字段数据。,窗体字段验证-保留信息,因为HTTP通讯协议并不能保留状态，当错误发生回到窗体后，就算是一些输入正确的字段也一样需要重新输入，为了保留使用者已经输入正确的字段数据，窗体字段在字段的value属性有设定默认值，如下所示：,
