HTML5 HTML5表单与PHP的交互 (stage1-3)

Bertha 。 2022-06-02 00:19 167阅读 0赞

## 今天来学习HTML5表单与PHP的交互： ##

1）打开IDEA，新建一个HTML 文件：  
![这里写图片描述][SouthEast]  
我将它命名为index01  
我们修改表单的标题：  
![这里写图片描述][SouthEast 1]  
2）接下来，创建一个表单：  
首先是显示用户名和密码，分别为其指定name（后面会用到）  
![这里写图片描述][SouthEast 2]  
在这里，我们在创建表单时，指定了两个属性：  
action:表示表单提交的服务器地址；  
method:表示提交的方式，有两种,分别为get和post（在下面做详细介绍）；  
3）接下来，我们插入一个提交的按钮，并进行提交操作：  
![这里写图片描述][SouthEast 3]  
代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单与PHP的交互</title>
    </head>
    <body>
    <form action="" method="get">
        用户名：<input type="text" name="name">
        密 码：<input type="password" name="password">
        <br/>
        <input type="submit" value="确认">
    </form>
    </body>
    </html>

如上图，点击 确认 按钮后，地址栏中取到了name和password的值为空（这个name和password是在插入标签时，指定的name属性）；  
这样的话，我们的一个表单就创建成功了，只不过还没有与服务器进行交互。  
4）接下来我们要与服务器进行交互，创建一个服务器；  
打开eclipse，以我们前面使用的 Service.php为例，  
![这里写图片描述][SouthEast 4]  
运行结果为在网页输出 hello world  
![这里写图片描述][SouthEast 5]  
如上图，我们需要把运行结果中的地址，拷贝到IDEA中的HTML文件中创建表单时的action属性中，表示通过这个地址来访问服务器。  
![这里写图片描述][SouthEast 6]  
再次运行HTML文件，并点击 确认按钮：  
![这里写图片描述][SouthEast 7]  
运行结果则跳转到了PHP的运行环境当中，并返回PHP的运行结果，这样就初步完成了PHP与HTML的交互。  
那么接下来我们对PHP环境中的脚本进行一下整理：  
在eclipse当中修改脚本如下：

<?php echo "用户名:".$_GET['name']."<br>密码:".$_GET['password'];

这里的代码是PHP当中的语法，其中：  
. 表示字符串的连接；  
$\_get\[‘name’\]:这里使用的get方法，是因为在HTML中，我们在创建表单时，使用的是get方式；这里的name和password是与HTML中对应的name属性的值一致的。  
更改完成以后，我们再次运行HTML，并输入用户名和密码，如下：  
![这里写图片描述][SouthEast 8]  
点击 确认 按钮进行提交，结果如下：  
![这里写图片描述][SouthEast 9]  
可以看到，在运行时，出现了乱码的情况，是因为字符集使用的问题，需要调整一下：  
进入到eclipse当中，如下：  
![这里写图片描述][SouthEast 10]  
将字符集设置为utf-8  
![这里写图片描述][SouthEast 11]  
再次运行HTML文件，得到如下结果：  
![这里写图片描述][SouthEast 12]  
我们可以看到一个细节，在输入了用户名和密码，点击了 确认按钮进行提交操作以后，在地址栏中，出现了我们所输入的用户名和密码的信息，如下：  
![这里写图片描述][SouthEast 13]  
这就会对用户的个人信息案例造成威胁。那么我们试着把提交方式改一下，前面我们使用的是get,我们现在改为post.  
首先在HTML当中修改提交方式为post:  
![这里写图片描述][SouthEast 14]  
然后修改eclipse中PHP脚本语言中的取值方式同样也为post:  
![这里写图片描述][SouthEast 15]  
我们再次运行：  
![这里写图片描述][SouthEast 16]  
这里我们看到，地址栏中没有再出现，用户名和密码的信息了。这就是两种提交方式的区别，在实际的应用过程中要加以区分。  
post相对于get要安全很多。  
而且地址的长度不能太长，所以get长度会有限制，而post没有。  
post方式不能做资源定位，而get方式可以做资源定位。  
举例说明：  
我们打开淘宝的某个衣服的链接地址，可以看到：  
![这里写图片描述][SouthEast 17]  
我们对地址进行删减：  
![这里写图片描述][SouthEast 18]  
我们可以看到，即使对地址进行了删减，也是可以正常访问该　页面的，同样把删减后的地址发送给某个人，也是可以正常打开的，这就是使用的get方式进行资源定位的功能，而post则不能像这样操作。

今天完成，期待明天~~

[SouthEast]: /images/20220602/a04dde19433643d6a56c4593673ec8d9.png
[SouthEast 1]: /images/20220602/512af31cb31649ddaadf108aa3787907.png
[SouthEast 2]: /images/20220602/5f3be81adb6a4806a106580197ab8f85.png
[SouthEast 3]: /images/20220602/aee7570ea084474281bf61b1da612d47.png
[SouthEast 4]: /images/20220602/0eae0bd5265544889b24ae4d3d1b884d.png
[SouthEast 5]: /images/20220602/961d087790f34cfe99d9b7206b6f15ae.png
[SouthEast 6]: /images/20220602/24944d9b8fba422e993ff759f8d59854.png
[SouthEast 7]: /images/20220602/5c84e9a328134d2fb0a60ac4107108f5.png
[SouthEast 8]: /images/20220602/dce894a97f014b18aa3f5c4ffae228df.png
[SouthEast 9]: /images/20220602/35277ba32afb43129ce5aba8d5202b61.png
[SouthEast 10]: /images/20220602/a23989ebb5dc4d91affb50d09c1a8f58.png
[SouthEast 11]: /images/20220602/f1f65c9c043c42b0992b4344a9b192e4.png
[SouthEast 12]: /images/20220602/0d8a843473e642b395e3d86c5a5c388b.png
[SouthEast 13]: /images/20220602/b25230e8f5ce4a1cb3b82cbf8d9d8927.png
[SouthEast 14]: /images/20220602/b9e283c447d64314a9c5f421de5d236c.png
[SouthEast 15]: /images/20220602/5be234c1c57f4eef872f5a6822f4aba3.png
[SouthEast 16]: /images/20220602/25d07e68c4b54b2ca01888c1165db3eb.png
[SouthEast 17]: /images/20220602/768c1f4345784affbd56b6526d4a4b22.png
[SouthEast 18]: /images/20220602/37dae84cf1fb4dfd8cfcff65ca1467d8.png