HTML基础教程-18-用户注册表单的实现【动力节点】原创

继续咱们再往下呢，接着看了各位，我们来画一个用户注册的表单行吗？我们画一个用户注册的表单啊。今天晚上你什么也不用练啊，就练表单，别的不用管。用户注册的表单啊，因为这个太重要。没有那么多时间挑重点学啊用户注册表单各位，我们用户注册这块呢，我们有用户名加上去吧，假如说有密码有确认密码有。二。性别吧，兴趣爱好不用管业务，我现在是找你，你们的想法跟我的想法永远都不一样，这有个用户名，再来一个姓名干啥呀？你用户名是个input标签，Type类型是T的，是不是你这块的姓名是不是还是T，等于T有啥写的写俩干啥。

咱们最好是找什么找，就是说不一样的，比如说性别这块，就是单选按钮，有男和女，要么选男要么选女，是不是单选按钮，兴趣爱好就是一个人兴趣爱好有多个，多个的话可以有多选吗？是不是我在想这个事，你们的想法跟我想法不一样啊，总之就说哎呀，我要想这业务，你这会跟业务还没有关系呢，不要跟业务挂钩啊，来再来一个学历，学历，因为我就想到学历这个东西啊，跟那个跟那个下拉列表就能挂上钩，然后呢，我看好像还可以写一个简介呀，简介是一个那种大框啊，大文本玉啊是不是，哎，咱们把这个都都给它弄上啊来。

只有。卡了。行，刚才我们说到哪儿了。要画一个表单啊，来，各位注意看了啊，Form开始form结束了，Action，哎呀。Action后边写HTB写上吧，119192LOCAL得了冒号8080杠，然后呢叫京东杠save吧，Register register啊注册行不行，随便写的啊，用户名写上呗。用户名密码呗，确认密码吧，再来个啥性别兴趣爱好学历简介来这块，咱们这个用户名就是一个input的标签呗，对吧，Type类型什么类型。

诶，Text，然后name name name就叫有有点name随便写了啊来这边换个行呗，对吧，那密码咋写input type类型password呗，哎，Name这边怎么写啊，User password吧，好，那这个value需要我们写吗？不用啊，不用，密码是用户填的啊，那那再往下这个确认密码的话，我问大家确认密码，确认密码的话是不是就是这个name还写不写了。思考啊，你给我思考啊，明白写吗？确认密码需要提交给福气吗？密码跟确认密码判断一致不一致是吧？哎，那不需要Java程序判断。前端浏览器JS后边的JS就能搞定，前端的加script代码就可以搞定，就能判断出这个确认密码跟密码写的一样不一样，我们这个密码跟确认密码这个东西在后台服务器上，你是吧，你把这个数据都发，把这个非法的数据都都已经发到后台服务器上，我觉得这个效率都已经低的不行了，对吧，你应该就是说尽可能在浏览器上能给他拦截住就拦截住，是不是确认密码是不需要提交的，各位在浏览器上就能够验证出这个密码跟确认密码是否一致，所以为了避免确认密码提交，把这个地方的name给他干掉，不要了。

怎么判断现在写不了得学这个啊，过两天啊，过两天过两天啊，别着急啊，别着急，嗯，好，那这块咱们打开页面看一下啊，别闷头一直写是吧，用户名用户名，然后密码，然后确认密码。还行，就就就就这么地方来性别，性别input的type类型什么radio是不是好，这是个什么东西，看看单选是吧，好，我们再来一个input什么呀，VIDEO2个吧，这这这咋整两个都选上了，而且还不知道哪个是男哪个是女是吧，那你这个注意了啊，你可以这样写，往后边加说明。

听懂了吧，但你不能都选上啊，对不对，不能都选上啊。怎么办？你让他俩的name一样，就表示同一组性别是这个单词吗？或者gender？是不是过来？你name如果一样，我就表示同一组。我我点一下你看我点一下你看你看是不是只能选一个，但如果说我这个name不一样，这个叫gender，这个叫GENDER1就代表是两组吧，两组的话，那你就都能选上呗。

一组单选按钮，通过这个名你也知道它的作用是单选。所以就只能选一个呀。对不对。现在的以后。这个Y需不需要我们写上？不需要，好，我问大家。最终提交给服务器的是这个男和女吗？最终提交给服务器的是name和value吧？这个男和女这俩字只是供用户参考的。听懂了吗？真正最后表单提交的时候，跟这个男和女没关系，听懂了吧？所以说您这个value就必须得手动写出来，比如说一就代表答案。

零代表你真正最后提交给服务器的数据是这个一和零和这个和这个没关系，听懂了吗？所以单选按钮的value必须手动指定，叫做单选按钮的什么VALUE6必须手动指定，好接下来我们刷新一下，大家看是不是两个都没选中，假如说默认让男选中，默认选中加蔡克的就行了啊，只要加上蔡克的，它默认就选中了。听懂了吧？想让女默认选中的话，就在这个位置上加一个，这样的话默认选中率。

如果你要是啥也不写，那可能就是什么都不选中。你得手动点。听得懂吗？来兴趣爱好这块怎么办呀？Input标签type类型box box表示复选框，Name是不是必须得写上对吧？那就是爱好呗。能看懂吗？汉语拼音换换个高级点的啊，兴趣爱好好像是音音的啊，你看多高端，是不是interest啊好了。有了吧。对吧，但你这个爱好是啥呀，起码你得写点东西吧啊你比如你的爱好是什么呀？行，抽烟喝酒烫头啊好点一下点一下点一下是吧，那么接下来抽烟喝酒烫头呢，他这个呀，最终不会提交，提交的是value，明白吗？抽烟的英语单词咋写抽烟吗？太棒了啊，谢谢smoke啊喝酒，哎呀大家行啊，烫头呢啊行，头发是哪个？嗨，咋写是这个吗？哎呀。

太高端了啊好，Name和value是不是会提交会提交啊，好各位注意听了，如果我这个喝酒烫头默认选中的话，还是那句话，加check加check啊，把这个拿过来，把这个拿过来，好我们来看一下是不是这两项默认选中啊，默认选中。

好，你得记啊，哪些value不用写，哪些value得写上。我觉得这个好像也不用死记硬背是吧，反正就是给用户输入机会的，凡是凡是给用户输输入机会的这个value都不用写，凡是带这种鼠标点的这种情况是不是都得写对吧？好，那这个学历这一块咱们就不是input了，各位啊，是select。Select也得有name啊，叫学历能看懂吗？学历great，然后这个位置叫option选项，各位，这是其中的一个选项，这个选项呢，比如就叫高中拿过来，呃，然后来一个大专、本科硕士，Value叫高中，能看懂吗？

Value是大专啊，Value是本科，这个value是硕士行了，那这样呢，我们这个学历这块应该就没问题了，我们把它打开再看你看咦，五。保安上班。可以减少。好。是吧，这样。如果说默认选中本科，你可以在这加一个什么，错了错了叫selected啊，上当了吧。

本科默认选中吗？哎，不是这个了啊，不是这个了，叫selected默认选中啊，不过我觉得大家呀，还是不错啊，这叫默认选中。你选中本科，最后提交的是gradeid和DK，你选中的是大专，最终提交的是gradeid等于DZ。听懂了吗？你选哪个，他提交哪个啊来。这个是一个下拉列表，各位。最终提交的是name和value啊，Name和value用户选哪个提交哪个，听懂了吧，用户选这个提交的就是他和他。好，那简介这块应该是个什么呀。Text area这个各位啊，叫文本。文本文本玉。

看看。滚动条你看。是吧，这有点小了，给它整大点啊，不是宽度行数跟列数。行数十行列数60吧，随便写的啊，看什么样。我是一个程序员。啊，每天的日子都很都很苦逼。

但是能签的字。显示字数有相关的啊，有相关的属性啊，这块呢，有这个文本域text area，然后接下来这个位置需要写内蒙简介呗。或者叫可以吧，注意文本域没有value属性。往里边填的就是value。啊，这块我要说一下啊，文本域没有Y6属性，各位压根就没有这个属性，它不像上边这个啊，它有一个什么，它有一个Y流属性，只不过我们不用写吧，压根这个就连Y流属性都没有。记住了啊，文本域没有外属性，用户填写的内容就是什么Y。最后你应该再来一个什么input type，是不是提交叫注册吗？Input type类型叫是不是重置啊清空。

这样。这简洁屏不聪明？对吧，你再用表格给他定位一下会好看点啊，来我们看一下啊，杰克。密码111，这个确认密码填不填无所谓，因为现在没有验证码，是不是没有没有验证啊，难啊，抽烟喝酒烫头。硕士Jack。走了啊走看这的数据。Jar。111。性别。姓曲。

Smoke drink是吧？GR学历是硕士吧，杰man。来看这个数据是不是最终提交的数据就是这样啊，最终提交的数据是这样的，各位啊。是这样格式。他提交的数据永远都是name和谁，Value name和value，他和男女抽烟喝酒烫头这几个汉字都没有关系啊，他提交的是name和value和value啊这样的。那将来这个数据如果提交，那我问大家，你们既然知道是这个格式，不管是IE，谷歌还是火狐都是这种格式，那我问你，你到Java程序里面是不是就好说了，你的Java代码里面怎么写，是不是把这个问号后边的东西给它截下来，截下来之后呢，一顿截串截截截截截到最后把这些用户名啊，密码啊，这些信息都截出来，截出来之后你执行一个inert语句，是不是把这个数据保存到数据库啊。那这样。注册表单讲了一个select啊，讲一个。

都有内幕，看好了。内蒙啊，内蒙，内蒙，内蒙，不想有内蒙。他和他没有，因为他和他不需要提交给谁服气。他和他不需要提交给服务器，所以这个地方内是没有的。清空来这边清空一下你看。是不是归位恢复原状，重置表单？好了，那么接下来我在这里给大家讲一个method属性，Method啊，如果method是post。提交的用户名和密码不会显示到浏览器的地址栏上。

这样会更安全一些。是不写了啊。杰克11111男选上。走了啊，注册这个注意后面是不是没有信息，但是我告诉你啊，这个信息有没有提交走走了走了啊，数据已经提交走了，只不过隐藏起来了，听清楚了吗？所以这里呢，我又给大家讲了一个新的东西啊，Form表单。Method属性get和什么采用什么get方式提交的时候。用户提交的信息会显示在浏览器的地址栏上。Post采用post方式提交的时候，用户提交的信息不会显示，不会显示在浏览器地址栏上。

明白，当用户提交的信息中含有敏感信息，例如密码，建议采用的方式提交，听懂了吗？来改成get，各位我们再来看，回退我随便写啊，别的我都不写了各位啊，点一下注册，大家看这个Jack会不会。刷新一下啊，来走一个啊好大，看get方式会不会在浏览器的地址栏上显示啊，会吧，如果你把这个去掉，记住了，默认就是什么get方式，刚才我们是不是都没加，刚才我们都没加啊，Test走一个好，我们来看看这个位置是不是有数据。

看见了吧，所以要注意各位啊，Method的属性不指定，Method的属性不指定，或者指定什么盖的，这种情况下都是盖的。清楚了吗？只有当什么时候才是post？只有当method属性指定为什么post的时候才是post请求？剩下所有的请求都是什么概念请求？记住了，也就是说这个位置写一个超链接。这个超链接也是什么请求。Local host冒号8080-OA-save问号name等于什么？张三与谁？密码password等于什么，111，接下来我们在这里来一个什么提交，各位看好了，这是不是一个超链接？这是个超链接吧？接下来我们打开看看看这个超链接后退一下来刷新一下，大家看这是不是提交，我点提交过去，大家看这个提交的信息会不会显示到浏览器的地址栏上。

会不会啊，会好，我问大家问题，超链接能不能提交数据可以，只不过提交的数据是死的，跟表单的区别在哪？表单用户有机会往里边写。听懂了吗？我写李四就是李四，我写王五就是王五，但是您这个超链接虽然可以提交数据，但是您提交的这个数据是不是都是固定不变的，因为这个东西用户是不是没法输啊，你咋输啊，他就这么一个，你咋输啊是不是？所以说我想说的是什么，我想说的是我提醒一下各位啊，别学懵了啊，超链接也可以提交什么数据给谁服务器，但是提交的数据都是什么固定不变的。

听懂了吗？另外还有一件事，我想向你传达的是超链接，是get请求，记住不是请求清楚了吗？我问大家问题，这个格式能随便写吗？你超链接，如果想往服务器上发数据的话，你的格式能随便写吗？不能，你的格式得遵守谁HTTP的协议，HTTP协议规定你这么写，你就必须这么写。那有分有疑问了，老师，如果是post方式提交的话，他提交的数据格式是什么呢？记住了post post提交的时候，提交的数据格式和get还是什么一样的，只不过不在哪显示，不在地址栏上怎么着显示出来post提交的数据还是什么还是什么name等于什么value与什么与name等于什么VALUE6与什么name等于VALUE6永远都是这个格式，各位啊，格式是不会变的，只不过一个是显示出来，一个不显示。

记住啊。