表单处理
表单的概念在生活中很常见，就像是问卷调查表一样，别人先把问卷发给你，你照着问卷的要求填写，完事过后再将填完的问卷发给别人，从而达到一个将别人需要的信息传递给别人的一种方式。
传统的网页大多数的作用都是展示数据，就是将信息传递给用户。而在现代化的 Web 开发中，非常注重信息交互，所以表单也随处可见，只是形式上变成网页，性质上还是一模一样的。主要的作用任然是收集指定的用户信息。
信息交互：例如 简书 这个平台，除了展示文章（展示信息），还可以发布文章（收集信息）
1. 表单基本使用
HTML 中有一个专门用于提交数据的标签： ，通过这个标签可以很容易的收集用户输入。
form 标签有两个必要属性：
- action：表单提交地址（填完了，交给谁）
- method：表单以什么方式提交
例如，我们需要在登录界面上收集用户输入的用户名和密码：
这是一个常见的登陆表单
点击前
点击后
login.php
<?php // 获取客户端用户提交的数据 // 由于请求的数据是通过请求体提交的 var_dump($_POST);
form.php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录</title> </head> <body> <form action="login.php" method="post"> <div> <label for="username">用户名</label> <input type="text" id="username" name="username"> </div> <div> <label for="password">密码</label> <input type="password" id="password" name="password"> </div> <button type="submit">登录</button> </form> </body> </html>
按照目前的情况，用户第一次请求得到这个表单页面，填写完表单内容，点击登录，表单会自动发送到login.php ，剩下的问题就是要考虑如何在 login.php 中获取到用户提交过来的内容。
PHP 中有三个超全局变量专门用来获取表单提交内容：
- $_GET ：用于获取以 GET 方式提交的内容
- $_POST ：用于获取以 POST 方式提交的内容
- $_REQUEST ：用于获取 GET 或 POST 方式提交的内容
借助 $_POST 或者 $_REQUEST 就可以获取到表单提交的内容：
<?php // 获取表单提交的用户名和密码 echo '用户名：' . $_REQUEST['username']; echo '密码：' . $_REQUEST['password'];
1.1. 提交地址
action 提交地址指的是这个表单填写完成过后点击提交，发送请求的请求地址是什么。
从便于维护的角度考虑，一般我们最常见的都是提交给当前文件，然后在当前文件中判断是否是表单提交请求：
<?php if ($_SERVER['REQUEST_METHOD'] === 'POST') { // 表单提交请求 }
另外，建议使用 $_SERVER[‘PHP_SELF’] 动态获取当前页面访问路径，这样就不用因为文件重命名或者网站目录结构调整而修改代码了：
<!‐‐ 这样写死 action 地址，当文件重命名就需要修改代码 ‐‐> <form action="/foo/login.php"> <!‐‐ ... ‐‐> </form> <!‐‐ 通过 `$_SERVER['PHP_SELF']` 获取路径，可以轻松避免这个问题 ‐‐> <form action="<?php echo $_SERVER['PHP_SELF']; ?>"> <!‐‐ ... ‐‐> </form>
鲁棒性：指的是我们的程序应对变化的能力
1.2. 提交方式
method 可以用于设置表单提交的方式，目前我们所认识的就是最常见两种表单提交方式： GET 和 POST 。
从效果上来看，两者都可以将数据提交到服务端，但是从实现提交的原理上两者有很大的不同：
GET
- 表单数据是通过 URL 中的 ? 参数传递到服务端的
- 可以在地址栏中看到提交的内容
- 数据长度有限制，因为 URL 地址长度有限（2000个字符）
POST
- 表单数据是通过请求体传递到服务端的，我们在界面上看不到
- 可以提交任何类型的数据，包括文件
- 由于界面上看不见，浏览器也不储存，所以更安全
至于什么情况下应该选用哪种方式，这个需要结合业务场景和这两种方式各自的特点来决定，没有绝对的答案，只能给出一些原则：
绝不能使用 GET 来发送密码或其他敏感信息！！！
应该想清楚这次请求到底主要是去拿东西，还是去送东西
2. 常见表单元素处理
至于表单元素中的文本框文本域一类的元素，都是直接将元素的 name 属性值作为键，用户填写的信息作为值，发送到服务端。
但是表单元素中还有一些比较特殊的表单元素需要单独考虑：
2.1. 单选按钮
<!‐‐ 最终只会提交选中的那一项的 value ‐‐> <input type="radio" name="gender" value="male"> <input type="radio" name="gender" value="female">
2.2. 复选按钮
<!‐‐ 没有设置 value 的 checkbox 选中提交的 value 是 on ‐‐> <input type="checkbox" name="agree"> <!‐‐ 设置了 value 的 checkbox 选中提交的是 value 值 ‐‐> <input type="checkbox" name="agree" value="true">
如果需要同时提交多个选中项，可以在 name 属性后面 跟上 [] ：
参考：http://php.net/manual/zh/faq.html.php#faq.html.arrays
<input type="checkbox" name="funs[]" id="" value="football"> <input type="checkbox" name="funs[]" id="" value="basketball"> <input type="checkbox" name="funs[]" id="" value="world peace">
最终提交到服务端，通过 $_POST 接收到的是一个索引数组。
2.3. 选择框
<select name="subject"> <!‐‐ 设置 value 提交 value ‐‐> <option value="1">语文</option> <!‐‐ 没有设置 value 提交 innerText ‐‐> <option>数学</option> </select>
2.4. 表单元素综合案例
<?php if ($_SERVER['REQUEST_METHOD'] === 'POST') { var_dump($_POST); } // $foo[] = 1 ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> </head> <body> <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post"> <!-- <input type="text" name="key1" id=""> --> <!-- <input type="password" name="key1" id=""> <input type="email" name="key1" id=""> <input type="number" name="key1" id=""> <input type="number" name="key1" id=""> --> <!-- <textarea name="key2" id="" cols="30" rows="10"></textarea> --> <!-- 当表单中使用了 radio ，一定要为相同 name 的 radio 设置不同的 value，让服务端可以辨别 --> 性别 <label><input type="radio" name="gender" value="male"> 男</label> <label><input type="radio" name="gender" value="female"> 女</label> <br> <!-- checkbox 如果没有选中则不会提交，如果选中提交 on --> <label><input type="checkbox" name="agree" value="true"> 同意协议</label> <br> <label><input type="checkbox" name="funs[]" value="football"> 足球</label> <label><input type="checkbox" name="funs[]" value="basketball"> 篮球</label> <label><input type="checkbox" name="funs[]" value="earth"> 地球</label> <br> <select name="status"> <option>激活</option> <option>未激活</option> <option value="1">待激活</option> </select> <br> <input type="file" name="" id=""> <button>提交</button> </form> </body> </html>
3. 案例：基于文件的注册和登录：
界面
代码
<?php /** * 回发处理逻辑 */ function postback () { // // 申明 $message 是全局 // global $message; // 1. 校验参数的完整性 if (empty($_POST['username'])) { // 没有提交用户名 或 用户名为空字符串 $GLOBALS['message'] = '请输入用户名'; return; } if (empty($_POST['password'])) { $GLOBALS['message'] = '请输入密码'; return; } if (empty($_POST['confirm'])) { $GLOBALS['message'] = '请输入确认密码'; return; } if ($_POST['password'] !== $_POST['confirm']) { $GLOBALS['message'] = '两次输入的密码不一致'; return; } if (!(isset($_POST['agree']) && $_POST['agree'] === 'on')) { $GLOBALS['message'] = '必须同意注册协议'; return; } // 所有的校验都OK $username = $_POST['username']; $password = $_POST['password']; // 将数据保存到文本文件中 file_put_contents('users.txt', $username . '|' . $password . "\n", FILE_APPEND); $GLOBALS['message'] = '注册成功'; } if ($_SERVER['REQUEST_METHOD'] === 'POST') { postback(); } ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册案例</title> </head> <body> <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post"> <table border="1"> <tr> <td><label for="username">用户名</label></td> <td><input type="text" name="username" id="username" value="<?php echo isset($_POST['username']) ? $_POST['username'] : ''; ?>"></td> </tr> <tr> <td><label for="password">密码</label></td> <td><input type="password" name="password" id="password"></td> </tr> <tr> <td><label for="confirm">确认密码</label></td> <td><input type="password" name="confirm" id="confirm"></td> </tr> <tr> <td></td> <td><label><input type="checkbox" name="agree" value="on"> 同意注册协议</label></td> </tr> <?php if (isset($message)): ?> <tr> <td></td> <td><?php echo $message; ?></td> </tr> <?php endif ?> <tr> <td></td> <td><button>注册</button></td> </tr> </table> </form> </body> </html>
4. 参考链接
HTML 中的 form 标签：
http://www.w3school.com.cn/html/html_forms.asp
PHP 中处理表单：
http://www.w3school.com.cn/php/php_forms.asp
Emmet 手册：
https://docs.emmet.io/cheat-sheet/
