共计 1485 个字符，预计需要花费 4 分钟才能阅读完成。
在实现 form 表单数据采集和提交之前，咱们首先理解一下前后端合作的流程。
咱们前端工程师做好表单后，交给用户在浏览器上填报，用户填完信息后，点击提交按钮，数据通过互联网发给了服务器，后端工程师在服务器上开发程序，接管用户提交过去的数据，最初在把数据存入数据库。
接下来，咱们做一个用户登录的案例，具体演示一下这个流程。关上编辑器，新建一个 case-signin[saɪn ɪn].html 文件，补全根底代码，在 body 里增加 form 标签。在 form 标签里编写题目 “ 手机号 : “，前面增加一个 input 标签，属性 type 的值为 text，再增加一个 br 标签。
编写题目 “ 明码: “，前面再增加一个 input 标签，属性 type 的值为 password，再增加一个 br 标签。最初再增加一个 input 标签，定义 type 属性值为 submit，value 属性值为登录。保留文件。在浏览器中关上页面，表单制作好了。输出一个非法的手机号：”15120085233″，你也能够输出本人的手机号。再输出一个六位明码：”123456″，点击提交。
仔细观察，除了地址栏里多了一个问号“？”，也没有发现什么了。这是因为咱们没有收集到表单的数据。为了收集表单数据，须要给表单控件增加 name 属性。有了这个 name，浏览器会主动为咱们收集表单控件数据。给手机号控件定义 name 属性，值为 pnumber (读作 p number)。给明码控件定义 name 属性，值为 password。这样，当用户输出手机号和明码时，这两个值就帮忙咱们存储了用户输出的内容。保留页面。回到浏览器，刷新。再次输出手机号和明码，点击提交。
你会发现：地址栏的页面名字前面除了问号，还有一串字符，仔细分析一下：这串字符由 & 符号连贯了两个局部。不难发现，每一部分的等号后面，是表单控件定义的 name 值，等号前面，是用户输出的数据。username=xiaofeng&password=123456 配音者（露脸）：这下咱们恍然大悟，浏览器当初曾经帮忙咱们收集好了数据。接下来须要思考的就是如何将数据提交给服务器了。
回到编辑器。这时，咱们能够去后端的小伙伴那里，要到服务器的地址，填在表单的 action 属性里。这是我为大家筹备好的服务器地址，能够用它来测试。保留。回到浏览器，刷新。
输出用户名和明码，点击提交，服务器给咱们返回了胜利的信息！写到这里兴许你会产生疑难，作为用户输出的表单内容，填写的信息怎么能显示在地址栏呢？这样是不是十分的不平安呢? 确实，如果表单里蕴含敏感信息，不应该显示在地址栏里。解决办法是给 form 标签定义 method 属性，最罕用的属性值有两个：get 和 post。get 是默认值，浏览器会把收集好的表单数据，加到服务器地址的前面，提交给服务器。post 值，岂但可能收集表单的数据，而且不会在地址栏里裸露隐衷数据。回到编辑器，给 form 表单定义 method 属性，值设置为 post。
保留。回到浏览器，刷新。再次输出手机号和明码，点击提交按钮，服务器同样返回了胜利的信息。你可能很好奇，浏览器会把表单的数据收集到哪里呢？咱们能不能看到呢？在浏览器中，应用 windows 零碎的小伙伴按下键盘的 F12，应用 Mac 零碎的小伙伴按下 fn+F12；或者在浏览器窗口里点击鼠标右键，查看，关上开发者工具窗口，抉择 network，在 all 页签下点击这个地址，在 Payload 上面，就能看到咱们填写的数据。
实际上，这些数据只有你能力看到，再也不必放心他人窥探你的信息了。
文章配套视频链接 https://www.bilibili.com/vide…