HTML表单
1. 表单用于不同类型的用户输入
2. 常用的表单标签:
| 标签 | 说明 |
| <form> | 表单 |
| <input> | 输入域 |
| <textarea> | 文本域 |
| <label> | 控制标签 |
| <fieldset> | 定义域 |
| <legend> | 域的标题 |
| <select> | 选择列表 |
| <optgroup> | 选项组 |
| <option> | 下拉列表中的选项 |
| <button> | 按钮 |
3. 常用的表单
-
- 复选框
- 单选按钮
- 下拉列表
- 文本域
- 创建按钮
综合示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>form表单</title> </head> <body> <!--form--> <form> 用户名: <input type="text"> <br /> 密码: <input type="password"> <br/><br/><br/> <!--复选框--> 你喜欢的水果有: <br/> 苹果<input type="checkbox"> 西红柿<input type="checkbox"> 香蕉<input type="checkbox"> <br/><br/> <br/> <!--单选按钮--> 您的性别是: 男<input type="radio" name="sex"> 女<input type="radio" name="sex"> <br/><br/> <br/> <!--下拉列表--> 请选择您常用的网站: <select> <option>www.cnblogs.com/winsoncheung </option> <option>www.baidu.com </option> <option>www.w3school.com </option> </select> <br/><br/><br/> <!--创建按钮--> <input type="button" value="点击我"> <input type="submit" value="提交"> <input type="reset" value="重置"> <br/><br/><br/> </form> <!--文本域--> <textarea cols="30" rows="30"> 请再次填写个人信息 </textarea> </body> </html>
PHP环境搭建
1. 下载Apache Friends, 官网: https://www.apachefriends.org/index.html
选择相对应的版本, 这里以Mac为例:
2. 打开下载下来的xampp-osx-5.6.30-0-installer.dmg文件, 然后一路next , 最后finished, 安装完成.
相对简单, 这里就不贴图了
3. 在Launcpad中找到并打开manager-osx, 并输入管理员密码.
得到如下:
4. 选择Manager Servers, 依次打开 MySQL Database 和Apache Web Service, 状态变成绿点并显示running, 标示已经打开了.
至此, 服务器部分已经部署完毕, 但是我们需要一个IDE来写php, 推荐使用Netbeans 或者Eclipse, 这里以Netbeans为例.
搭建NetBeans IDE
1. 到官网下载 NetBeans IDE:https://netbeans.org/downloads/index.html
有多个类别可供下载, 不同类别集成有不同的Development tools, 最后面是全部集成的类别, 可以根据自己的需要选择下载
2. 下载好后直接点击安装, 一路next 然后fininshed.
参考:
在 MAC OS X 中配置 PHP、Apache、MySQL 和 Xdebug for PHP 开发: https://netbeans.org/kb/docs/php/configure-php-environment-mac-os_zh_CN.html#phpProject
NetBeans IDE 8.2 安装说明:https://netbeans.org/community/releases/82/install_zh_CN.html
设置php项目: https://netbeans.org/kb/docs/php/project-setup_zh_CN.html
搭建好后, 试着写写自己的第一个php吧~
表单提交数据与PHP进行交互
1. 首先创建一个php项目, 打开Netbeans, 点击 文件--> 新建项目
2. 出现的窗口中类别 选择PHP, 项目选择:PHP应用程序, 点击下一步
3. 点击下一步后:
项目名称: 输入你起得项目名字(这里 我输入MyService)
原文件夹:默认 (也可是你自己创建的文件夹)
PHP版本: 默认
默认编码: 默认
不勾选 将NetBeans元数据放入单独的目录
4. 点击下一步后:
运行方式: 默认(本地We站点<在本地Web服务器上运行>)
项目URL:默认(http://localhost/Myservice/)
勾选 将源文件夹中的文件复制到其它位置(这一步的作用是自动将NetBeans编辑好的.php文件自动复制到服务器的htdocs目录下, 便于web访问)
复制到以下文件夹: 路径就写XAMPP下的htdocs文件夹下的MyService文件夹的绝对路径, 我这里是:/Applications/XAMPP/htdocs/MyService
5. 点击完成,这时项目就创建好了, 默认给我们创建了一个index.php的文件
6. 右击这个默认创建的index.php文件, 点击删除, 我们自己创建一个service.php文件.
创建过程:
右击 源文件夹-->新建-->PHP文件
7. 出现如下菜单
输入文件名字, 其他选项默认, 点击完成, 就创建好了.
8. 创建完成后如下图所示:
9. 此时我们的service.php 已经创建好了, 在service.php中输入:
<?php /* * To change this license header, choose License Headers in Project Properties. * To change this template file, choose Tools | Templates * and open the template in the editor. */ echo 'Hello world! this is my first PHP program! so exciting!';
然后点击绿色的三角按钮,
在出现的对话框中将索引文件index.php改成service.php, 点击确定:
之后再点击一次上图中的绿色三角, 运行成功, 即可在浏览器中看到echo出来的一段字符串
到此为止, php服务器也搭建好, 用来处理数据的service.php也创建好了.
10, form提交表单数据与PHP交互.
1>. 打开NetBeans, 选择Create New Project
2>. 打开的窗口中, 选择Static Web
3>. 跳转的窗口中, 键入项目的名字, 我输入的是FormDemo, Project Location自己选择保存到的文件, 点击创建完成.
4>. 然后右击FormDemo文件夹 --> New --> HTML file, 弹出的对话框中输入Name:index, 点击OK. 创建好index.html文件.
5>. 在index.html中输入一下代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Form表单与PHP数据交互</title> </head> <body> <!-- action: 就是之前创建的service.php在服务中能运行起来的地址 --> <form action="http://localhost/MyService/service.php" method="get"> 用户名:<input type="text" name="name"> <br/> 密码:<input type="password" name="password"> <br/> <input type="submit" value="提交"> </form> </body> </html>
注:action: 就填写之前service.php 能够在浏览器中运行起来的地址
11. 然后再service.php中键入如下代码:
<?php /* * To change this license header, choose License Headers in Project Properties. * To change this template file, choose Tools | Templates * and open the template in the editor. */ echo "用户名:".$_GET['name']."<br>密码:".$_GET['password'];
此时, 运行一下NetBeans(点击绿色的三角按钮), 然后运行起HTML, 结果让你想象不到!以为多难的GET请求 我们这样就成功了!
同样, post请求也一样, 将method改成post, service.php中GET全都改成POST, 这样就实现了POST请求.
至此, for表单与PHP的数据交互就完了.
欢迎大家提问和评论, 我尽我所能的为大家解答, 一起学习, 共同成长~
南心芭比: 热爱分享, 收获快乐~