015 - 你说hello我说hei
本帖最后由 不二如是 于 2018-11-3 13:01 编辑上一集：014 - 数据就应该整整齐齐（下）
http://xxx.fishc.com/forum/201803/20/094616suu10rovsa60kazi.jpg
万众瞩目的零基础入门学习Web开发（H5&C3）开始更新了！！！{:10_298:}
在Web新纪元 |【鱼C#视频课程】剧透这个系列的诞生，时间总是善待任何想拿它搞事情的存在体。
很幸运，一切就这样开始了，开局总会有些不足，但一切在慢慢变好，不是吗？
作为，吹水阁中最爱吹水（爱干无意义事情）的鱼油，整套教程的亮点（槽点）由我来承包～
关注本系列推送（最下方有订阅方式）的鱼油，会享受到一个福利：
会比正常推送，早一个时间节点，看到还未出炉的美味课程
哈哈，废话不多说了，#敲黑板时刻！{:10_281:}
在线视频：传送门
课程思维导图
猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清
1、什么是表单
好的网页是会跟用户进行交流滴～
那么什么是交流呢？
就是你说hello，我说hei。
通过表单就可以实现上述操作。
一个php文件：
<html>
<body>
<?php
// 默认为空
$name = $email = "";
// 请求时初始化判断
// 如果请求为POST，调用test_input方法获取变量值并显示
if($_SERVER["REQUEST_METHOD"] == "POST"){
$name = test_input($_POST["name"]);
$email = test_input($_POST["email"]);
}
// test_input方法
function test_input($data){
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data,ENT_QUOTES);
}
?>
<!-- 将PHP内容结果输出到页面中 -->
<p>欢迎鱼油：<?php echo $name;?>，您的表单已提交成功哦~</p>
<p>更多信息会发到您的邮箱：<?php echo $email; ?></p>
</body>
</html>
不要怕，看一下就可以，后续请学习《零基础入门学习Web开发》（PHP）。
2、form元素
通过form元素我们就可以创建一个表单：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一个最简单的表单</title>
</head>
<body>
<form action="welcome.php" method="post">
名字：<input type="text" name="name"><br><br>
邮箱：<input type="text" name="email"><br><br>
<button type="submit">提交</button>
</form>
</body>
</html>
注意：由于PHP只得放在服务器端才能使用，所以大家在本地用时，单击提交，会提示404哦～
所以准备好的页面去测试：传送门
演示：
之所以可以通信，就是通过form元素的action和method属性：
<form action="welcome.php" method="post">
form元素还有几个属性可以用，但是都没有上面这两位如此通用。
更多请看宝典：传送门
日常开发中，往往二者一起使用才能将表单数据正确发给后端服务器。
action属性用来规定当提交表单时向何处发送表单数据。
上面代码中由于和index.html放在同一个文件目录下，通过相对路径调用，即直接指定php文件名即可。
method属性规定用于发送表单数据的 HTTP 方法。
有两种方式：POST和GET。
二者最直接的区别就是：
**** Hidden Message *****
这一点，请鱼油务必牢记～
GET和POST本质上就是TCP链接，并无差别。
但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。
GET和POST还有一个重大区别，简单的说：
GET产生一个TCP数据包；POST产生两个TCP数据包。
对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）。
而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。
更多解释请参看推展阅读：99% 的人都理解错了 HTTP 中 GET 与 POST 的区别（转）
3、input元素
input元素很强大，支持至少10+种类型，请看：传送门
课程中：
名字：<input type="text" name="name"><br><br>
邮箱：<input type="text" name="email"><br><br>
type都是text类型，意味着是一个文本输入框。
name属性的设置，为了后续PHP可以寻找到，类似于一个名字。
后续设置为：
密码：<input type="password" name="password"><br><br>
input元素就变为输入密码的文本框类型。
先掌握上面两种type类型的input元素，后续我们会有一讲来详细介绍。
4、button元素
button元素有三种类型，请鱼油务必牢记（更多：传送门）：
button、reset、submit
当type设置为button，意味着仅仅是一个按钮。
设置为submit，当form设置action属性后，可以向指定url提交表单。（上面的例子）
设置为reset，会自动清空表单中input元素的值。
示例：
<button type="button">按钮</button>
<button type="submit">提交</button>
<button type="reset">重写</button>
三者样式一样，但执行不同的功能。
其他属性，按照需求进行设置即可，常用的往往是这个type属性。
5、本地服务器
XAMPP是一个好东西，一键搭建本地服务器。
这样就能在本地模拟前后端过程，超级实用哈～
超简单教程请看：教你如何在本地搭建服务器测试环境
课后作业，完成了吗？
传送门
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
下一集：016 - 一二三木头人
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif
一楼呀
请允许我喷一句
小甲鱼最牛逼 本帖最后由 凤栖桐 于 2018-10-17 22:17 编辑
来晚了，学习
貌似还是没有课后作业？ 我电脑在安装 XAMPP出现报错， 1，找不到-n2,编译器的错误，想问下小伙伴都是顺利安装吗？我把软件装在了D盘（非系统），关掉了杀毒软件 123 kkkkk 0.0
GET发一个数据包，POST发两个数据包 我又来啦 form 感谢甲鱼老师带我一个萌新入门 66666666 66666666666666666666666666666666666666666666 {:5_102:} 安不安全吗？ {:5_95:} {:5_109:} 想知道 本地服务器安装有什么作用？网页与用户的交互怎么会出现打不开的界面 123