在实现form表单数据采集与提交之前，我们先来了解一下前后端协同的过程。我们前端工程师完成表单后，交给用户在浏览器上填写报告。用户填写信息后，点击提交按钮，数据通过互联网发送到服务器。后端工程师在服务器端开发程序，接收用户提交的数据，最后将数据存入数据库。下面我们以用户登录为例来详细演示一下这个过程。打开编辑器，新建case-signin[sa?n?n].html文件，完成基本代码，在body中添加form标签。在form标签中写入标题“手机号码：”，在其后添加一个input标签，将属性type的值设置为text，并添加一个br标签。写标题“Password:”，在其后添加一个input标签，将属性类型的值设置为password，并添加一个br标签。最后添加一个input标签，定义type属性值为submit，value属性值为login。保存文档。在浏览器中打开页面，表单就准备好了。输入合法手机号：“15120085233”，也可以输入自己的手机号。再输入一个六位密码：“123456”，点击提交。仔细观察，除了一个问号“？”在地址栏中，什么也找不到。这是因为我们还没有从表格中收集数据。为了收集表单数据，需要给表单控件添加一个name属性。有了这个名字，浏览器就会自动为我们收集表单控件数据。为电话号码控件定义name属性，值为pnumber（读作pnumber）。为password控件定义一个name属性，值为password。这样当用户输入手机号和密码时，这两个值就帮我们存储了用户输入的内容。保存页面。返回浏览器并刷新。再次输入电话号码和密码，点击提交。你会发现在地址栏中除了页面名称后面的问号之外，还有一串字符，仔细分析一下：这串字符由&符号连接。不难发现，每部分等号前是表单控件定义的名称值，等号后是用户输入的数据。username=xiaofeng&password=123456配音员（露脸）：现在突然看到浏览器帮我们收集了数据。接下来要考虑的是如何将数据提交给服务器。回到编辑器。这时候我们可以去找后端的小伙伴，索要服务器的地址，填写表单的action属性。这是我给你准备的服务器地址，你可以用来测试。节省。返回浏览器并刷新。输入用户名和密码，点击提交，服务器返回成功信息给我们！写到这里，你可能会有疑惑，作为用户输入的表单内容，地址栏怎么显示填写的信息呢？这不是很没有安全感吗？实际上，如果表单包含敏感信息，则不应将其显示在地址栏中。解决方案是为表单标签定义一个方法属性。有两个最常用的属性值：get和post。get是默认值，浏览器会将采集到的表单数据添加到服务器地址的末尾，提交给服务器。post值不仅可以收集表单数据，还可以不暴露地址栏的隐私数据。回到编辑器，为form表单定义method属性，设置值post。节省。返回浏览器并刷新。再次输入手机号和密码，点击提交按钮，服务器也返回成功信息。你可能会好奇，浏览器是从哪里收集表单数据的？我们能看到吗？在浏览器中，使用Windows系统的用户按键盘上的F12，使用Mac系统的用户按Fn+F12；或者在浏览器窗口点击鼠标右键，勾选，打开开发者工具窗口，选择网络。在all选项卡下点击这个地址，在Payload下，可以看到我们填写的数据，其实这些数据只有你自己才能看到，你再也不用担心别人窥探你的信息了。文章配套视频链接https://www.bilibili.com/video...
