01-html&CSS/21-尚硅谷-HTML和CSS-表单提交的细节

大家来看一下哈，咱们讲了这么多呀，其实讲的都是他在界面上的展示吧，哎，咱们并没有讲他会发给服务器的这一部分，那现在咱们就来看一下啊。那要讲这个表单提交啊，咱们就不得不说什么东西呢，说一个东西呢，就是这个表签。标签咱们是不是一直都没怎么提过呀？来，我们来接着说明一下，呃，我再再复制一份吧，复制粘贴。呃，我叫他二行不行，他们说提交。的。细节啊，OK，那么我把这个内容全部删掉啊，原来的注释我就不留了。啊，这个需求也删掉，现在呢，表达还是那表达，大家注意看，这里面有两个非常重要的属性，一个呢是action。啊，一个呢是method，这两个属性有什么用，大家注意看一下。

标签是表单标签。Action属性设置提交的服务器地址，就是你这个信息发给谁，不是发给服务器吗？地址是多少，你告诉我第二个method属性设置提交的方式啊，你是怎么个提交法啊，咱们常用的就两种啊，一种是什么get或post啊，那比如说我要把这个数据啊发给百度，你就可以写成百度，但是百度不一定说啊是吧，来我们写成get，默认其实就是get啊，你不写其实这种是默认就get改是默认值。好，那我写上吧，那现在我那个隐藏域呢，还在吧。哎，预好了没有了是吧。

我把那个隐藏玉给它加上，咱们讲到提交了吧，讲到提交之后把隐藏玉给加上。Type hidden。等于。Y6等于录音啊，随便写点东西，好，大家先来看一下啊，我运行。我整个表单呢就出来了，当我点击提交，嗯，不行，咱们整个网络是咱们整个网络是这个做了一些拦截的，你根本就访问不了，慢嘛，所以你访问百度也很慢嘛，为了让这个访问速度稍微快一点啊，不耽误上课的时间啊，都过了好，咱把这个改完之后再提交一次来，我得去提交这个稍微快一点啊，虽然也会慢，诶大家看是不提交过来了。地址就是logo host，哎，或者说我写一个IP，我也不知道哪个IP，随便写一写是吧，幺九二点幺六八点多少呢？呃，17.11随便写个地址啊，我不知道谁的哈，来运行。

啊，那提交的时候就按照刚刚那个地址去提交了，缩短啊，能提的过去吗？这么长时间还没有变呢，等会啊，他会提交过去的，就是有点慢，太慢了，还是logo或者显示比较快了，耽误时间啊，我就不演示了，我就先把这个暂停了哈，这太慢了，哎，过来了吧。看见吗？好，但是我现在我就拿这个看啊，因为这个快一点，那太慢了，耽误时间不好。来改为local host好了，那么我们发现刚刚local提交的时候，地址是不是只有这个信息啊，我们拿这个信息反复的看一下，注意看在这个信息里面，它分三个部分，这一段，这一段还有这一段前面是什么action。

的属性值发现了吗？是不是刚好这里的值，好这个地方是一个分隔符。分隔什么东西呢？前面是请求地址啊，就是服务器。地址后面呢，请说参数。你可以换句话说就是表单的信息你不是要发送给服务器的吗？那有同学不进去问了老师，我没看出来啊，我刚才那个表单里一堆信息，怎么怎么我一提交完之后，我这里就是看到这两个东西，这些用户名啊，密码呀，男女都去哪了，没看着，为什么只有这俩，这俩又是谁？大家注意看，它这里只有这个action等于log in，看见吗？还有这个性别，Thanks，你看啊，Action等于log in是不是隐藏域，我们说它在提交的时候，它就会发送给服务器的，为什么只有隐藏域，还有一个six等于on s是谁是性别，这里为什么只有他们俩，有他们俩有什么共同特征，其他这没有吗？注意看，咱们先说明一下啊，第一点表单提交的时候。

数据没有发送给服务器的。三种情况，第一种是因为什么原因表单项。没有name属性值，大家请看，对于放标签的这个表单项当中啊，只有隐藏域有这个单属性值，看见吗？和性别是不是也有，你看这些，有的话他才能发给服务器，而什么用户名啊，密码呀，通通发不过去。因为他们没有name属性，所以呢，我们尝试着加一下，看看行不行。

啊，我现在加个u name啊用户名，那我刷新我确认一下有了吗？加上了吧？啊，那我现在我这个ZZWG168好，我提交的时候会不会带上它呢。稍等啊。诶，发现了没有。是不是是不是多出来这个。User name等于Z到G6完了说明真的有效，所以你需要干嘛？你需要给每一个表达像头加上才行啊，就只要你想发给服务器，你就必须得带上。OK啊，这个确认密码我就不管了啊，删了啊。呃，性别这个有了咱不加了，然后兴趣爱好得加货币，每一个都得写啊，啊，这是个苦力活是吧？哎，那么这个下拉列表写在哪里，写在上。

Country国家嘛，是吧，呃，这个自我评价写在这个上面，Name DES description一个先写好，行了，这个重置和提交单就不用写了，因为这两个只是功能按钮，不需要发给服务器的吧，他不用写好，现在咱们都写完了以后来我确认一下他们都加上了没有啊，加了加了加了加了什么咱们写呗，用户名也在3168，哎，密码123456。嗯，难吗难吗，Java嘛，讲一个javascript中国没问题啊，这里呢啊AAA可以了，我们给你提交，我们就看他是不是都发给服务器了，我把这段都拿下来。其实好多都有啊，我不知道你看到没有，咱们说从问号后面是不是写个参数啊，所以问号前面写咱们不看，咱们就看第一段这个是不是隐藏域这一段，诶是不是用户名。

这一段密码吧，这一段是不是性别，那性别这个地方好像不像是男人吧，一会我就告诉你原因啊，然后兴趣爱好咱们有两个，你发现是不是也没看到我们选的那个Java和script呀，一会来说啊，然后这个country呢，这段是编码呢，咱们后面会讲，这里面是中国，就是中文，你从上面是不是可以。提降的时候上描相当于是可以看见的呀，啊，那现在看不到了啊，复制上就这个东西，然后这个是自我描述AA没问题吧，说明加的量水平确实可以发送给服务器，那现在一个问题又来了，咱们刚刚也说了，咱们说这个性别和兴趣爱好，我都不知道是啥跟啥。就是在等于on的服务器收到以后，你觉得他能知道你到底是选了男还是选了女吗？不知道为什么他会发生一个on呢？因为他计算这个英语单词当中啊on on就是我说开关的意思，就是选上和不选上嘛，能理解吧。哎，那么默认情况下，你选上以后，它就发两个啊。

但是你希望他发这个on吗？不希望，我们是不是希望，比如说你发过去告诉他，诶，我是个boy，我是个是个girl是吧，或者男或者女发给他吧，或者说我下面其他加加va加va各选项以后，我希望发生一些有效的信息啊，而不是发这个啊，那这个时候怎么办？注意看啊，咱们说第二种情况。第二种情况啊，往上啊稍等，就是你已经提交的表单内容组件也写了，但是你提交的时候就是没有有效的发给服务器怎么办？就是单选复选括弧下拉列表。中的up标签都物需要添加挖流属性。以便发送给服务器。就是比如说啊，我希望这个男我选上的时候，你不要给我发个啊，我希望你给我发一个部位，那你就选上写成ONE6啊，那女呢也是一样。

共同理解吧，那这个呢，Value加法吧。Value GS下面这个value p BP啊好，那你写上以后，它发送的信息就是以你这个ONE6指定的为准，我们其实建议啊，这个option也写上，当然我先试前面两个吧，啊，我们确认一下，右键查看源代码，先确认咱们是不是已经写上这个单选复选了，我们先试这个东西行不行哈，大家咱两个再提交，稍等，诶咱们就往上看性别里面是不是已经有了这个够了，说明是不是按照咱们写的发送了，还有这个兴趣爱好已经有了，这个加va和GS看见了吗？啊，说明它有效，那有效的话，你就把这个向量列表你给我加上。

啊，他也得加value，那么请选择国籍说明是不是还没选，那我给他来个none就说明什么都没选啊，这个中国这个呢，Value是西烟，就China那个减写嘛，啊，这个美国的简写就USA啊。呃，小日本的前限是什么？GP对吧？啊GP好了，那我们回来继续刷新确认一下啊，有时候就会有缓存写上了吧？啊，那你点击中国哈，点击提交，他一会发过去的就是西n country这个地方是不是CN看见了吧？OK，好，这是提交表单时不会正确的把信息发给服务器的第二种原因，第三种原因呢。就是表单项不在提交的form标签中，就比如说我把这个东西写到外面去行不行，看见了吗？我是不是把这个东西放到放到外面去了，那不行。

这就说不行，那提交的时候觉那就不带你了，来注意看啊，这个action等于log in就不会发，呃，我回来我刷新，我确认它是不是到外面去了，确认完以后我再次提交，他还会带上它吗？请看一下上面是不是感觉少了点东西啊，是不就没有了，看到没有了啊，所以三种情况，三种情况哎，你提升的同你检查一下，如果数据没有发给服务器，你就看是不是这三种情况，其中机啊OK啊，这是一种第二。这是提交的。第二就是什么东西呢？这个method，诶老师这个提交方式是啥呀？它有两种提交方式，默认是get，另一种是post，这两种有啥不同吗？他们都可以把数据发送给服务器，但是他们在提交上一些细节不同，他们说盖的请求的特点是。

Post请求的特点是咱们对比一下，先说get，咱们先说get啊，再来，现在关注的点不同了，咱们已经可以确认这些数据已经发给服务器了，现在咱们要关注的是这个请求它有什么特点，我提交稍等。好，请看浏览器地址栏，浏览器地址栏上面是什么？是这一段没错吧，这一段里有啥跟啥呀，前面这一部分是不是action的属性值，然后到问号对吧，后面是不是请求的参数好。咱们说get请求浏览器地址栏中的啊，地址是什么？Action属性加问号。加请求参数，当然了，这后面的东西是可选的，我用综合方法表示可选。

它表示可想就是它可以只有请求地址，没有符号，没有参数可以的，而且呢，注意看请求参数的格式是它是有固定格式的，我不知道你们大家有没有注意看出来，那什么格式呢？Name等于ONE6，这是一组，哎，对组k one6 k one6，我说你要是多组的用连这个进行连接，再次连Y6看出来了吗？就你看这个吧，我刚刚复制的这一段啊，我我从这里开始复制，后面其实一样啊，我就懒得复制那么多了，诶我复制这一段，然后你放在这里面看这个格式是不是一样啊。这个是一段，看见吧，这是一段。这是不是又是一段，中间是不是都是连字符，Name等于VALUE6 name就是什么？就是name这个属性值，VALUE6就是那个信息能理解吧，或者是你这个输入框里的信息，或者你选的信息，就这样子，你看他们隔着就这样啊，每一组念等于光六中间等号多组之间这个连字符进行连接，这就是它的格式啊，这就是它的格式好第二这它的特点一第二有什么特点？

注意看不安全老师有啥不安全的呀，你想一想，我注册里面是不是有密码，我在提交的时候上面是不是看得一清二楚，你告诉我怎么安全，这密码就不需要人看到，所以它不安全，这个不用多讲了。第三。啊，那么它有。提交就是它有什么呢？数据长度的，诶长度的限制，它有数据长度的限制，这也不是我说的文档，我说的来给你找找啊。我们找到这个phone标签，这个文档，来往下拉phone好这个啊，然后往下看，它说如果你的method等于get，如果你是按照这种方式来发请求，OK，你的表达的这个内容地址呢？是这个样子的，他说先是请求地址，就是服务器那个地址吧，就是action的属性值，然后是问号，问号后面是不是N等于Y6，零等Y6没毛病啊，但是注意看，如果说你发的字符超过100个，必须使用poose，看见吗？

因为当你超过某个长度值的时候，它就会把超过这个长度值的以后的内容就不再发过去了，服务器就收不到了，能理解吧，所以一般我们如果数据比较多，请用。它有长度的限制，但这个长度限制不是100，我们试过了，每个浏览器略微不同啊，略微不同具体是多少，咱们就不用具体去去计较这个事情了哈，它有长度线，好，那如果是POS的请求会怎么样啊，我们把它改成POS的吗？

啊，感动碰，我们回来提交一下，看看有什么不同，好，请看到现在已经跳过来了，你看见浏览器配置栏当中有请求参数吗？都有同学啥都没有，这都有是吧？但它有啥？它是不是只有这个action的属性值浏览器？地址栏中只有election属性值，简单一点说就只有服务器的地址吧。好第二，相对于get请求要安全，为什么？因为你是不是看不到密码啦，我们可以告诉大家，就是这个信息它已经发给服务器，但是你看不见的，至少你在浏览器这个可视范围内是看不见，那么后面写的后面会告诉你怎么看啊，好第三。理论上没有数据长度的限制。

你这个干的请求是不是有限制啊，我这个POS请求它没有限制，但理论上来说是这样啊，我们很很很很少数有一个数据，数据是没有强度的，一直都长，那不可能啊，这咱们了解一下OK。好了，这就是盖的请求和POS的请求的一个区别，以及他们的一些细节上的问题啊。