015 - 你说hello我说hei

不二如是 · 发表于 2018-10-17 07:46:43

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2018-11-3 13:01 编辑

上一集：014 - 数据就应该整整齐齐（下）

登录/注册后可看大图

万众瞩目的零基础入门学习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);
}
?>
<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元素有三种类型，请鱼油务必牢记（更多：传送门）：

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是一个好东西，一键搭建本地服务器。

这样就能在本地模拟前后端过程，超级实用哈～

超简单教程请看：教你如何在本地搭建服务器测试环境

课后作业，完成了吗？

传送门

登录/注册后可看大图

下一集：016 - 一二三木头人

如果有收获，别忘了评分

：

登录/注册后可看大图

这位鱼油，如果喜欢本系列学习笔记，请订阅专辑☞（传送门）（不喜欢更要订阅

）

登录/注册后可看大图

迁旧（就） · 发表于 2018-10-17 21:15:19

一楼呀
请允许我喷一句
小甲鱼最牛逼

凤栖桐 · 发表于 2018-10-17 22:12:58

本帖最后由凤栖桐于 2018-10-17 22:17 编辑

来晚了，学习
貌似还是没有课后作业？

花开满天 · 发表于 2018-11-26 18:11:08

我电脑在安装 XAMPP出现报错， 1，找不到-n 2,编译器的错误，想问下小伙伴都是顺利安装吗？我把软件装在了D盘（非系统），关掉了杀毒软件

w877713458 · 发表于 2018-11-30 11:32:21

JustinZhu · 发表于 2018-12-3 14:28:06

kkkkk

cjj735243954 · 发表于 2019-2-9 21:22:48

0.0

TCY · 发表于 2019-2-16 12:35:21

GET发一个数据包，POST发两个数据包

李小控 · 发表于 2019-2-17 12:59:08

我又来啦

蚂蚁牙不黑 · 发表于 2019-3-1 22:11:02

form

阿祥9559 · 发表于 2019-4-7 09:12:09

感谢甲鱼老师带我一个萌新入门

紫殇 · 发表于 2019-4-16 14:59:42

66666666

gdjywjf · 发表于 2019-4-27 16:01:54

66666666666666666666666666666666666666666666

讨债仔 · 发表于 2019-5-26 22:00:58

天地~玄黄 · 发表于 2019-7-11 17:02:18

安不安全吗？

by2014 · 发表于 2019-7-21 20:08:28

zyl125657 · 发表于 2019-7-23 11:18:36

咕咕鴿子 · 发表于 2019-7-25 15:38:00

想知道

xjyxjy123 · 发表于 2019-7-27 16:19:51

本地服务器安装有什么作用？网页与用户的交互怎么会出现打不开的界面

韩某人 · 发表于 2019-8-18 15:42:28

[学习笔记] 015 - 你说hello我说hei

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐:

点评

账号		自动登录	找回密码
密码			立即注册