form表单

 前后端交互流程:

 

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

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

 

<!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>

 

posted @ 2023-01-02 17:26  CodeWhisperer001  阅读(55)  评论(0编辑  收藏  举报