08 网页设计基础-互动操作.ppt

1、8、PHP网页互动操作,动态网页的一个显著特征就在于它能实现人机互动。对用户输入或者选择的内容能做出相应的回应。这也是动态网页区别于静态网页的一个特征。这一讲就为读者介绍如何用PHP实现人机互动。,主要内容,HTML页面 HTML表单组件 页面请求参数传递方式 服务端接收页面请求参数,PHP动态网页, 的IP是？,9,9,9/default.shtm,9/homepage2006/images/cctvlogo_778.gif,组织网页：HTML文件+图片文件+F

2、lash文件,其它图片和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)

3、表单(Form) 表格(Table) 以及表格高级功能(Advanced) 多窗口页面(Frames) 会移动的文字(Marquee) 多媒体页面(Alternative Inline Elements),- 9 -,HTML 窗体介绍,何谓窗体 (Forms) 一群 HTML 控件(Controls)的集合 HTML 控件种类,文字输入框,密码输入框,多列文字区,单选按钮,多选按钮,下拉式菜单,选择清单,送出 / 清除纽,一般按钮,档案上传纽,HTML 窗体介绍,HTML 窗体 (Form) 格式 窗体处理网页 URL 当窗体被按下 “提交” 时，窗体内所有控件内含值会被送到此处 提交方式

4、有 GET 及 POST 两种，其差异容后详谈 范例 ,在服务器端的PHP接收程序中,必须依照标签中的method 属性设定值,利用PHP内建的预定变量来接收传过来的数据。 PHP关于窗体处理的预定变量有下列两种: (1) $_GET :接收由窗体页面使用get 方法(URL网址参数传递) ,传送过来的字段数据。属于全局的结合数组变量,其数组索引值为所接收字段的识别名称。 (2) $_POST : 接收由窗体页面使用post 方法(HTTP标头资料传递) , 传送过来的字段数据。属于全局的结合数组变量,其数组索引值为所接收字段的识别名称。,HTML 窗体介绍,文字输入框 (Textbox) 格

5、式 红色字部分可以省略 范例 ,HTML 窗体介绍,示例： 请输入下列程序代码，看看是否能够显示文字输入框 请修改 size 属性的值。输入框的外观是否变大了呢？ 请修改 maxlength 的值为 5，再输入文字看看。请问您可以输入几个字？ 请修改 value=“请输入账号” ，有什么变化？, Form Test 请输入账号： ,文字与密码方块字段-属性,语法的属性说明，如下表所示：,HTML 窗体介绍,密码输入框 (Password) 格式 红色字部分可以省略 范例 ,HTML 窗体介绍,示例： 请输入下列程序代码，看看是否能够显示密码输入框, Form Test 请输入账号： 请输入密码

6、： ,HTML 窗体介绍,多列文字区 (Text Area) 格式 初始字符串 红色字部分可以省略 是否传送换列符号 有三种选择 off: 所有换列符号皆不后送 soft: 只传送使用者实际按下 Enter 的换列符号 hard: 所有屏幕上折行的位置皆后送换列符号 范例 请在此处输入您的意见,HTML 窗体介绍,示例： 请输入下列程序代码，看看是否能够显示多列文字区, Form Test 请输入您的意见 ,文字区域字段-属性,语法的属性说明，如下表所示：,HTML 窗体介绍,单选按钮 (Radio Button) 格式 红色字部分可以省略 Checked 设定此单选按钮是否预设为勾选 范例

7、男性女性 注意事项 所有同一组的单选按钮之变量名称必须相同，否则会被视为不同群组。 以上例而言，若使用者勾选 “女性”，则 PHP 会收到一个变量名为 $rdoSex，其内容值为 “female”,HTML 窗体介绍,示例： 请输入下列程序代码，看看是否能够显示单选按钮, Form Test 性别： 男性 女性 ,单选按钮-属性,语法的属性说明，如下表所示：,HTML 窗体介绍,多选按钮 (Checkbox) 格式 红色字部分可以省略 Checked 设定此多选按钮是否预设为勾选 范例 记住我的密码,HTML 窗体介绍,注意事项：每个多选按钮变量名称必须不同，否则将会发生只收到最后一个勾选的后

8、送值之情况。 请输入您的嗜好： 吃 喝 玩 乐 若使用者勾选上述四者，后端的 PHP 处理网页只会收到 $hobbies = “gamble”。,PHP 允许使用数组来储存 checkbox 每个内容值 请输入您的嗜好： 吃 喝 玩 乐 若使用者勾选上述四者，服务器端的 PHP 处理网页会收到如下的值 hobbies0 = “eat”; hobbies1 = “drink”; hobbies2 = “game”; hobbies3 = “gamble”;,HTML 窗体介绍,示例： 请输入下列程序代码，看看是否能够显示多选按钮, Form Test 请输入您的嗜好： 吃 喝 玩 乐 ,复选框字

9、段-属性,语法的属性说明，如下表所示：,HTML 窗体介绍,下拉式菜单 (Combo Box) 格式 选项名称1选项名称2 Selected将此选项预设为被选取 选项名称在下拉式菜单里的文字 范例 请输入您所在的城市：北京市上海市香港,HTML 窗体介绍,示例： 请输入下列程序代码，看看是否能够显示下拉式菜单, Form Test 请输入您所在的城市： 北京市上海市香港 ,HTML 窗体介绍,选择清单 (List) 格式：与下拉式菜单完全相同 选项名称1选项名称2选项名称3 清单显示项目数 指定此一清单要显示几个项目。若实际项目数量大于此值，则该清单会出现卷动轴 Multiple设定此清单是否

10、可以多选 若可以多选时，则用 ctrl + 鼠标左键可以选择不连续的项目 若用 shift + 鼠标左键可以选择一群连续的项目,HTML 窗体介绍,范例 请问您家中有些什么人 爸爸妈妈兄弟姊妹,HTML 窗体介绍,示例： 请输入下列程序代码，看看是否能够显示选择清单, Form Test 请问您家中有些什么人 爸爸妈妈兄弟姊妹 ,下拉组件-属性,标签的属性说明，如下表所示： 标签的属性说明，如下表所示：,HTML 窗体介绍,提交 / 清除钮 送出钮格式 每个 之间必须有一个提交按钮，好让该 form 内所有的值提交 清除钮格式 清除钮的任务就是将此 form 内所有的后送值还原成原来的样子。一

11、个 form 可以没有此按钮 提交 / 清除钮范例 ,HTML 窗体介绍,示例： 请输入下列程序代码，先在文字列随便打点字，再按下清除钮，看看有何效果。 请再随便打些字，按下提交钮，看看有何效果？, Form Test ,HTML 窗体介绍,隐藏字段 隐藏字段并不需使用者输入数据，而是直接将value属性值传送到伺服端， 通常是用来传送窗体的环境参数， 或是在不同网页窗体间传递数据 范例：当使用者按下 “提交” 钮时，可以将按下提交钮的时间利用隐藏字段夹带回送到服务器来。 格式 范例 ”,HTML 窗体介绍,档案上传钮 (File Upload Button) 功能 提供使用者指定本地端上传档

12、案文件名及路径 本按钮只有指定路径与文件名的功用，并无实际上传功能。 格式 范例 具体在文件处理章节中再详细介绍,HTML 窗体介绍,一般按钮 (Button) 功能 提供程序员显示一个一般按钮 格式 范例 注意事项 HTML 的一般按钮本身并无特殊功能，只是在页面显示一个按钮的形状而已。必须搭配 JavaScript 才有动作。,HTML 窗体介绍,示例： 请输入下列程序代码，按下我们做的一般按钮，看看有何效果？, Form Test function btnClick() alert(“这个按钮被按下了”); ,HTML 窗体介绍,文字输入框 (Textbox) 密码输入框 (Passwo

13、rd) 多列文字区 (Text Area) 单选按钮 (Radio Button) 多选按钮 (Checkbox) 下拉式菜单 (Combo Box) 选择清单 (List) 提交钮 / 清除钮 / 隐藏字段 / 文件上传钮 / 一般按钮,接收网页变量,PHP 取得变量值的方法,GET,POST,前端传送法 以 GET 传送 以 POST 传送,服务器端接取法 以 全域数组变量 接收 $_GET $_POST,接收网页变量,前端传送方法 GET 以 GET 传送 范例, 登入名称： 登入密码： ,接收网页变量,前端传送方法 GET 以 GET 传送的 HTTP 包 优点 使用者可以 Bookm

14、ark 此一动态网页，随时显示使用者当初看到的样子。 缺点 所有讯息全部附在 URL 尾端的 CGI 变量区传送出去。使用者对于传送什么可以看得一清二楚，无法对传送数据保密。 受限于浏览器对 URL 设下的最大长度限制(如：IE ? 2048 bytes，NS ? 1024 bytes) 无法用 GET 方法上传档案,GET login.php?txtName=Robert echo Your password is $Password; ?,login.php,接收网页变量,示例： 请输入下列程序代码，并执行看看。您可以用 $_GET 接收到您要的值吗？, ”; echo “您的用户密码为：

15、$txtPass”; ? , 登入名称： 登入密码： ,接收网页变量,示例： 请将上述范例改为 POST，您可以用 $_POST 抓到您要的值吗？, ”; echo “您的用户密码为：$txtPass”; ? , 登入名称： 登入密码： ,PHP程序如何验证窗体-说明,在PHP程序取得窗体字段数据并不困难，事实上，我们反而需要多考虑使用者输入的资料是否符合需求，在处理取得的数据前进行字段数据的验证，检查使用者输入的数据是否符合所需的格式。 当PHP程序使用$_POST或$_GET结合数组取得字段数据后，在真正处理资料前，我们可以使用if等条件叙述检查使用者输入的字段数据是否正确，或数据是否空白

16、，表示使用者忘了输入字段数据。,PHP程序如何验证窗体-流程图,如果使用者输入的数据有错误，PHP程序并不进行数据处理，而是显示错误讯息，然后回到窗体网页要求使用者重新输入，窗体字段验证的流程图，如下图所示：,PHP程序如何验证窗体-实作,在实作窗体字段验证时，我们可以使用两个PHP程序：一是窗体网页显示错误讯息，一是PHP处理程序，当错误产生时，就使用header()转址回网页窗体。 另一种方式是将窗体和PHP处理程序写在同一个PHP程序，使用if条件判断是否是窗体送回，如果是，再进行窗体字段验证和处理。,窗体字段验证-判断是否是窗体送回,PHP程序进行字段验证时，因为窗体和处理程序写在同一个程序档案，所以PHP程序需要判断显示窗体内容，或是输入数据后的窗体送回，可以执行窗体字段验证，如下所示： if ( isset($_GETReg) ) / 窗体处理 上述if条件可以判断使用者是否按下窗体按钮，因为