马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2018-11-3 13:01 编辑
万众瞩目的 零基础入门学习Web开发（H5&C3）开始更新了！！！ 
在Web新纪元 |【鱼C#视频课程】剧透这个系列的诞生，时间总是善待任何想拿它搞事情的存在体。
很幸运，一切就这样开始了，开局总会有些不足，但一切在慢慢变好，不是吗？
作为，吹水阁中最爱吹水（爱干无意义事情）的鱼油，整套教程的亮点（槽点）由我来承包～
关注本系列推送（最下方有订阅方式）的鱼油，会享受到一个福利：
会比正常推送，早一个时间节点，看到还未出炉的美味课程
哈哈，废话不多说了， #敲黑板时刻！ 
课程思维导图
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。
二者最直接的区别就是：
这一点，请鱼油务必牢记～
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元素有三种类型，请鱼油务必牢记（更多：传送门）：
当type设置为button，意味着仅仅是一个按钮。
设置为submit，当form设置action属性后，可以向指定url提交表单。（上面的例子）
设置为reset，会自动清空表单中input元素的值。
示例：<button type="button">按钮</button>
<button type="submit">提交</button>
<button type="reset">重写</button>
三者样式一样，但执行不同的功能。
其他属性，按照需求进行设置即可，常用的往往是这个type属性。
5、本地服务器
XAMPP是一个好东西，一键搭建本地服务器。
这样就能在本地模拟前后端过程，超级实用哈～
超简单教程请看：教你如何在本地搭建服务器测试环境
课后作业，完成了吗？
传送门
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑☞（ 传送门）（ 不喜欢更要订阅 ）
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2018-10-17 07:46:43
置顶卡
千斤顶
显身卡
发表于 2018-10-17 21:15:19
发表于 2018-10-17 22:12:58
