前后端交互流程：

form表单_表单

表单在 Web 网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。一般是将表单设计在一个Html 文档中，当用户填写完信息后做提交(submit)操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。这里我们只讲怎样使用Html 标志来设计表单。
所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。
一个表单一般应该包含用户填写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。

<form action＝"url" method=get|post name="myform" ></form>
-name：表单提交时的名称
-action：提交到的地址
-method：提交方式，有get和post两种，默认为get

form表单_提交数据_02

form表单_服务器_03

 

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
        </head>
        <body>
                <!--定义form表单:form表单会采集包含的有效数据，提交到后端，进行交互-->
                <!--
                        【1】action属性
                        地址栏信息：
                        http://127.0.0.1:8020/Form%E8%A1%A8%E5%8D%95/aaa?username=nana&pwd=123123
                        
                        ?之前是提交的资源的目标地址
                        ?之后是提交的具体的数据 
                        
                        http ： 信息交互遵照协议 http协议
                        127.0.0.1  ：代表本机的IP地址
                        8020 ：Hbuilder内置服务器的端口号
                        Form%E8%A1%A8%E5%8D%95：指的是你的项目名字：Form表单
                        PS：浏览器的地址栏是不支持中文的，都会转成编码传送，如果你在地址栏看到中文，只是当前的那个浏览器给你一个友好的显示
                        PS:可以使用在线解析工具查看：urlencode
                        aaa:目标资源 --》去当前项目下找aaa了
                        
                        ?后的内容：
                        username=nana&pwd=123123
                        我们写的文本框，密码框等必须要加入一个属性：name
                        然后name属性和具体录入的信息会拼成一个键值对的形式
                        多个键值对之间 ，用&符号进行拼接
                        
                        PS：只有放在form表单中的内容才会被收集并提交
                        
                        【2】method属性：默认情况下不写method属性的时候就相当于method="get"
                        get方式：提交数据可见，不安全，提交数据长度有限制，效率高
                        post方式 ：提交数据不可见，安全，提交数据长度没有限制，效率低
                -->
                <form action="aaa" method="post">
                        用户名：<input type="text" name="username" /><br />
                        密码：<input type="password" name="pwd" /><br />
                        <!--提交按钮-->
                        <input type="submit" />
                </form>
                用户名2：<input type="text" name="username2" />
        </body>
</html>

form表单_提交数据_04

form表单_提交数据_05