表单
什么是表单？
- 目前所学习的前端技术，都是浏览器从Web服务器拉取(pull)页面，读取信息
- 是否可以实现浏览器向Web服务器推送(push)页面，写入信息
虚拟世界是对现实世界的模拟，但又不是简单的模拟
线下办事流程
- 申请人来到行政楼办事大厅，从1号窗口处 请求 和 领取 一个申请表
- 填写 申请表上的各种选项
- 将申请表 递交 至2号窗口，该窗口工作人员 检查 申请表填写是否合格：
- 合格则将申请表 存入 档案库。并 告知 申请者等待后续审批结果的通知
- 如不合格，将申请表 返还 申请者，指出错误，由申请者再次填写后提交，直至合格。
线上办事流程
- 申请人进入办事网站首页，在浏览器中 点击 或 敲入 一个申请链接(
http"//x.com/new.html)，领取 一个表单页面 - 填写 该表单页面上各种选项
- 点击提交，即将该页面 发送 到一个处理该页面的地址(
http://x.com/save.php), 该php脚本文件 检查 申请表填写是否合格：- 如合格则将申请表 存入 数据库，并跳转至下一页面，并 告知 申请者等待后续审批结果的通知
- 如不合格，跳转回 到表单页面，提示错误，由申请请再次 填写 后提交，直至合格。
流程对比
| 线下流程 | 线上流程 |
|---|---|
| 到指定窗口领取表格 | 访问指定url拉取表单 |
| 用纸笔填写表格 | 用键鼠填写表单 |
| 按表格上的提示将表格交到指定窗口 | 提交表单(浏览器自动提交到指定后端脚本地址) |
| 填写错误，被窗口退回 | 填写错误，被后端脚本退回 |
| 填写正确，离开窗口(或提示其它操作) | 填写正确，跳转到其它页面 |
不妨假想浏览器的后面藏着一个程序员，他接收你的提交的表单页面，然后返回包含有正确或错误信息的页面。当然，将来我们学习了Web后端编程，就知道这都是php等服务端脚本的功劳。
表单 <form>
| 步骤 | 行为 | 标记与属性 |
|---|---|---|
| 领取表单 | 浏览器 get ./code/form.html | <form>标记与action,method,enctype等属性 |
| 填写表单 | 用户 | <input type="text"> 文本控件标记 |
| 提交表单 | 浏览器 post ./code/save.php | <input type="submit" /> 提交控件标记 |
由于Web服务器未开启php运行环境，save.php无法运行，故报错。 请下载save.php至本地xampp环境后再行运行。 也可前往 httpbin 测试。 你可以尝试以Http Get的方式访问 ./code/save.php ，看看是什么效果？
关键属性
| 属性名 | 属性值 | 说明 |
|---|---|---|
| action | ./code/save.php | 接收表单的后端地址,格式同超链接 |
| method | GET 或 POST | 以何种HTTP方式将表单数据发送给后端 |
| enctype | 默认为 application/x-www-form-urlencoded | 如果表单中包含二进制数据即附件,则必须为 multipart/form-data |
后端脚本
<body>
<?php
foreach ($_POST as $key => $value){echo "<li>{$key} : {$value} </li>";}
?>
</body>
save.php这段脚本的作用是将表单发送过来的数据(存储于$_POST变量)读取出来$key是输入控件的名字,即<input name='login'>的 name 属性的值$value是输入控件的值,即<input value='tom'>的 value 属性的值- 这段脚本的运行结果是一个html页面,即接收表单数据后,向浏览器返回一个页面
后端脚本虽然有很多种,但基本原理类似,就是动态生成html页面,甚至其代码自身,就是嵌入在html代码中执行的,譬如上例
表单提交后发生了什么?
- 浏览器将表单中的填写的数据,以post(method属性)的方式发送给save.php(action属性)
- 服务端的Apache服务器接收到数据,将数据转发给php执行引擎,引擎再转发给save.php
- 执行save.php代码,将其执行结果包装为一个html页面,作为响应返回给客户端
- 客户端浏览器收到响应,改变地址栏的地址为save.php,同时将返回的页面渲染给用户
记住: 浏览器发送的,称之为请求,服务器返回的,称之为响应,浏览器的所有工作可以简化为,发送一个请求,接收一个响应进行渲染,然后继续,周而复始
为什么我的提交返回错误信息?
不幸的是,当你点击上例中的提交按键,浏览器将显示一个错误的提示: 405 not allowed ! Why?
因为php脚本要能够正常运行,则服务端的Web服务器必须安装php语言执行引擎.而本教材所在的站点仅支持纯静态的html,因此,Web服务器(本例为nginx)返回一个错误页面:能力不足!
同学可以将该代码下载到自己的学习环境中执行,查看结果.因为之前通过phpstudy集成环境安装的apache服务器，已经预安装了php执行引擎.
当 form 使用 method="get"
请在新窗口中打开示例表单, 然后点击提交,请注意浏览器地址栏的变化
如果你的Web服务器支持php,你则会看到浏览器地址会变成类似:http://x.com/save.php?text=七朵玫瑰花&selectd=信息安全 的地址
这就是GET方式和POST的最显著区别，表单数据被附加到URL的查询字符串进行传递
然而,浏览器地址栏也可能并未变化,而是直接跳出一个文件下载的提示! 如果你查看这个下载的文件，发现它正是save.php的源代码.
错误的原因仍然是如前所述,本教材所在的服务器并不支持运行PHP,因此Web服务器会将这个php的源代码返回.而对于浏览器而言,它并不识别php这种文件格式或文档类型.因此,就如同处理其它二进制类型文件一样,将save.php作为一个普通的附件进行下载,交由用户来处理.
HTTP GET 与 HTTP POST
HTTP定义至少两种浏览器与Web服务器之间进行交互的方式,又称HTTP动词
| 动词类型 | 用户行为 | 数据流向 | 数据传输 |
|---|---|---|---|
| HTTP GET | 点击链接,地址栏中输入url等 | 服务端->客户端,语义只读,幂等操作 | 直接通过url中的查询字串 http://www.x.com/index.php?key=nba |
| HTTP POST | 必须通过表单 | 客户端 -> 服务端,语义写入 | 数据封装在http包里,可通过浏览器的 devtools 查看 |
表单流程小结
[todo] 流程图与devtools
语法参考
- http://www.runoob.com/html/html-forms.html
- http://www.runoob.com/tags/html-httpmethods.html
- http://www.runoob.com/html/html5-form-attributes.html
扩展阅读
- HTTP POST GET 本质区别详解 http://blog.csdn.net/wuxiaobingandbob/article/details/52190704
- 观察和模拟各类form的操作 https://www.getpostman.com/
- HTTP GET/POST 请求参数长度 http://blog.csdn.net/jackpk/article/details/44305147
- enctype 详解 https://blog.csdn.net/ght886/article/details/79089718
- http 重定向 https://www.cnblogs.com/bq-med/p/8602629.html