H5表单与PHP交互学习笔记

桃扇骨 2022-07-16 07:09 164阅读 0赞

今日在网上观看视频学习H5，其中有几个知识点不是很熟悉，所以打算写下这篇博客来记录一下，以便将来再回来查看！ 该课程分为了三个小节来开展，内容如下： 1、html 5表单常用知识点

1.1单项选择

1.2多项选择

1.3下拉列表

1.4文本域

2、PHP环境搭建 3、表单与PHP交互

3.1表单提交

3.2GET提交与POST提交的区别

> 3.21安全性  
> 3.22资源定位

#  #

### 首先看看HTML 5表单常用知识点： ###

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>表单</title>
    
        </head>
        <body>
            </form>
                <form>
                用户名：<input type="text" /><br />
                密码：<input type="password" /><br />
    
                1.1单项选择：
                大:<input type="radio" name="sex"/>
                小:<input type="radio" name="sex"/>
    
                1.2多项选择：<br />
                大家喜欢的男明星是
                刘德华：<input type="checkbox" />   
                周杰伦：<input type="checkbox" />   
                薛之谦：<input type="checkbox" />   <br />
    
                1.3下拉列表：<br />
    
                <select>
                    <option>www.baidu.com</option>
                    <option>www.tecnt.com</option>
                    <option>www.alibaba.com</option>
                </select>
                按钮<br />
                <input type="button" value="确定"/><br />
    
                1.4表单内的文本域
                <textarea cols="30" rows="5">自我介绍
                </textarea>
            </form>
            1.4表单外的文本域
            <textarea cols="30" rows="5">个人信息
                </textarea>
        </body>
    </html>

#### 接着第二节学习的是PHP环境搭建，视频里面演示的XAMPP的版本非常低，我今天安装的版本不一样，总得来讲还是简单！首先进入百度，然后找到Apache官网，如图： ####

![这里写图片描述][20161010154738560]

#### 由于视频录制时间间隔得比较长，所以课程里面的版本和我们看到的版本不一致。当然，我们也不必一定要下载低版本，我是选择了一个最高版本，如图： ####

![这里写图片描述][20161010160253011]

#### 然后点击下载，最后安装的时候由于我的笔记本是新机子，之前没有安装过Apache的其他软件，所以是一路通畅没有冲突的。如果不是第一次安装Apache，在安装的过程中遇到了问题可以看看这个链接里面的方法有没有用处。 ####

[疑难杂症解决][Link 1]

#### 我一直是next到finish，最后到这个界面 ####

![这里写图片描述][20161010160442326]

#### 点击红框中的Start即可，然后我们找到安装路径下的这个文件夹：C:\\xampp\\htdocs。（由于我的操作系统是win0，如果是其它操作系统的话，建议安装目录放在C盘以外的文件夹，这样能有效提供系统的反应速度） ####

#### 接着打来浏览器在地址栏输入“localhost”出现如下界面即是配置OK： ####

![这里写图片描述][20161010162058926]

#### 接着，我们需要使用PHP文件来访问网络。这里我们使用的PHP文件开发IDE选择Eclipse的话，我们需要安装一个插件，首先打开Eclipse，选择工具栏的Help——Install New Software如图： ####

![这里写图片描述][20161010161509618]

#### 然后在Name区域选择开发语言Php然后点击下一步直至finish即可。然后新建一个PHP工程，接着新建一个PHP文件，当然我们也可以通过记事本之类的工具直接新建一个后缀名为php的文件，然后在文件里输入如下内容： ####

<?php echo "HelloWorld";

#### 然后将该文件复制到C:\\xampp\\htdocs\\这个文件夹（注意c:\\xampp是我的安装路径），然后在浏览器的地址栏输入就可以访问该文件了，如下图，至此PHP环境搭建就成功了！有兴趣的话也可以配置tomcat，也是比较简单的，可以通过java新建一个工程然后导出到tomcat路径下的webapp文件夹下，然后就可以访问该工程内的文件了！如果单独放一个文件到webapp里面是无法被访问到，会报404异常。 ####

#### OK，接下来我们就可以开始第三节内容，先看看表单提交到php是怎么回事？ ####

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>表单</title>
    
        </head>
        <body>
            </form>
                action="http://localhost/Service.php" method="post">
                用户名：<input type="text" /><br />
                密码：<input type="password" /><br />
                <input type="submit" value="登录" />
            //action这里是路径索引的意思，method是网络请求的方法；
            //还有html5里面“//”是无法注释的。
        </body>
    </html>

![这里写图片描述][20161010162740765]

#### 当我们把上面的html文件写好以后运行，然后点击登录按钮界面就会跳转到php网页了，这里也可以将访问网页的方法改写为get方法，这里就完成表格提交了！！！最后我们把php文件修改一下，然后看看这样是不是才算交互？ ####

<?php echo "用户名：".$_POST["name"]."<br>密码：".$_POST["password"];

#### 如果这个时候浏览器出现乱码不要着急，可以去Eclipse或者其他IDE工具里面修改编码格式，然后重新运行，你会看见你的密码和用户名就可以反映在网页了，这就完成了真正的交互了！！ ####

#### 最后说到的安全性Android里面也有同样的说法，就是使用get请求的话，用户名以及密码就完全显示在地址栏了，会没有安全感（当然了，现在的网络想要有完全的安全感貌似真的不现实，就算你把这些细节做得再好，还是有黑客能有办法攻破类似防火墙、路由器之类的东西，几个月前看新闻说的是有黑客也已经在着手研究物理攻击方法，比如从你的cpu等硬件着手攻击电脑。。。。。。，让你防不胜防），然后使用post的方法可以稍微假装加强一下安全感。但是post的效率从理论上面来讲会稍慢于get方法（当然一般人们对于使用get方法和post方法的的反应完全体验不到，但是如双11等高潮的时候估计应该会有体验，但是这里面的因素也比较多了，还有设备硬件以及网络的因素，相对于代码post请求和get请求的差别在这里也可以忽略不计了）。当然，post方法也有get方法没有的优点，那就是资源定位。这里我们通过举例说明： ####

#### 我到淘宝首页打开任意一个图片的链接，然后找到一个指定的商品，获得一个链接为：[https://detail.tmall.com/item.htm?id=538648623237&cm\_id=140105335569ed55e27b&abbucket=14&sku\_properties=5919063:1527298376&ali\_trackid=17\_3985a9a843b97488e0ff490d07e3a812&spm=a21bo.50862.201861.1.ZYaySf][https_detail.tmall.com_item.htm_id_538648623237_cm_id_140105335569ed55e27b_abbucket_14_sku_properties_5919063_1527298376_ali_trackid_17_3985a9a843b97488e0ff490d07e3a812_spm_a21bo.50862.201861.1.ZYaySf] ，我们可以将这个资源定位，就是我们只用将有效路径剪辑出来，发给别人后还能使用，比如我发一个：[https://detail.tmall.com/item.htm?id=538648623237&sku\_properties=5919063:1527298376][https_detail.tmall.com_item.htm_id_538648623237_sku_properties_5919063_1527298376] ####

#### 大家可以看到这两个链接的其实都是同一个产品，这就是post方法的资源定位。 ####

### **以上就是我的学习总结，望大神斧正！！** ###

[20161010154738560]: /images/20220716/accf0017d39649c19600d260f2dcd615.png
[20161010160253011]: /images/20220716/e35da6011e254ce9a0c4a3e6792fb423.png
[Link 1]: http://www.cnblogs.com/liuhongfeng/p/4206044.html
[20161010160442326]: /images/20220716/2cd71b1b868e49c6a5182368270cb4f1.png
[20161010162058926]: /images/20220716/78a292f59b534fc3b593b89d93996115.png
[20161010161509618]: /images/20220716/1c93c839054f482bb167d2859d55ed3d.png
[20161010162740765]: /images/20220716/8cfff7c30226443eb5cdc30eb9eb6fc4.png
[https_detail.tmall.com_item.htm_id_538648623237_cm_id_140105335569ed55e27b_abbucket_14_sku_properties_5919063_1527298376_ali_trackid_17_3985a9a843b97488e0ff490d07e3a812_spm_a21bo.50862.201861.1.ZYaySf]: https://detail.tmall.com/item.htm?id=538648623237&cm_id=140105335569ed55e27b&abbucket=14&sku_properties=5919063:1527298376&ali_trackid=17_3985a9a843b97488e0ff490d07e3a812&spm=a21bo.50862.201861.1.ZYaySf
[https_detail.tmall.com_item.htm_id_538648623237_sku_properties_5919063_1527298376]: https://detail.tmall.com/item.htm?id=538648623237&sku_properties=5919063:1527298376