85.尚硅谷_HTML&CSS基础_表单简介.avi原创

我们来说学习我们这个表单，上午我们说了表格，下午我们来说这个表单，表单是干嘛的，表单和表格差一个字，还有什么区别啊，表单呢，实际上我们现实生活里经常会用到，诶比如说什么叫表单呀，表单说白了就是什么呀，就是一个单子啊，就一个单子，那你上举举个例子，你上这个银行，我们去办这个银行卡，你要办银行卡需要先干嘛呀？诶银行会先给你一个单子，对吧？那个单子上面写什么呀？诶写什么你的姓名啊，什么性别呀，什么身份证号啊，家庭住址啊，手机号啊等等等等的一系列信息，对吧？诶你要先填这么一个单子，那这个单子我填完了干嘛的，填完了我说要交给这个银行那个柜员啊，哎，他收到这个单子以后干嘛呀，根据这个表单上这个信息，给你去办这个什么呀，办这个银行卡，那这个呢，就是我们最常用的一个什么呀表单了，那比如说我们刚入学的时候，诶，学校会让大家填这么一个什么呀，学生的一个信。

信息表是吧，还有什么姓名性别，什么家庭机关等等一系列的信息，填这么一个表，那这个表是不是它也算是一个表单呀？诶那我们来说，那我刚才举的这两种表单，一个是我们银行这个表单，还有一个是我们入学这个表单，那这两个表单的作用是干嘛的？是什么干嘛的，干嘛用的呀？是不是提交信息的呀，银行那个单子是我们将我们个人信息提交给银行，银行再去根据这个信息去给你办银行卡了，学校这个表单是干嘛呀，我们将个人信息存交给什么呀，学校，学校再交我们这个个人信息存档是不是管理啊，所以表单是干嘛的呀，说白了就是将我们的信息是不是提交给，提交给别人呀，诶提交给别人，那网页中表单要是干嘛的呀？那我们说网页里边最常见的表单是什么呢？我们说生活里边的表单是将我们这个信息提交给什么呀？诶银行啊，学校也好，而我们这个网页中的表单是干嘛呀，是将我们的个人信息提交给谁呀？提交给服务器啊，提交给服务器，那我们中最常见的一个表单就是谁呢？就是我们这个百度的这个什么呀，搜索框，百度搜索框什么特点呀，诶这有一个文本框，文本框后边有一个什么呀，有一个按钮，诶你在这儿是不是可以输入一。

的内容啊，哎，比如说我干嘛呢，我这输入一个美女，然后我一点百度一下，哎，我一点走你我这美女就发哪去了，这美女是不是填了跟没填一样呢，不是对这美女提交给谁了，提交给百度后台叫什么呀？服务器，百度服务器一看，哦，这哥们想看美女是吧？然后放到数据库里去检索干嘛呢？把所有美女相关的页面是不是可以返回，返回过来呀，然后我们通过一个页面是不是可以看到这个什么呀，是不是看到这个结果呀，所以注意表单里边的信息是不是最终都会提交给我们的什么呀，服务器吧，诶提交给了服务器啊，所以表单呢，说起来作用比较的简单，因为我们叫什么呢？叫做一个表单，表单的作用就是干嘛呢？就是用来向我们这个服务器提交信息的，诶表单的这个作用就是什么呢？呃，用来将我们这个用。

用户信息干嘛呢？诶提交给我们这个远程服务器的啊，将我们这个用户信息提交给远程服务器的，或者你不写远程也行，你就说提交给服务器的也OK啊交给服务器的，那这里边我们常用的表达什么呀？百度的搜索框是一个，我们有时候干嘛呀，是不是注册呀？哎，我要注册一个用户，我要填什么呀？用户名啊，密码啊，确认密码啊，什么电子邮件等等一系列信息，这是不是也是一表单呀？诶还有什么呀，登录的时候是不是也得填呀？哎，登录的时候也得去填一个表单，还有什么呀，你像贴吧，你想干嘛呀，你想发个帖子，你想发个文章，那个玩意儿也是什么呀，也是一个表单，只不过提交的内容不一样啊，提交的内容不一样，那我们来说，比如什么呀，比如我们这个百度的这个搜索方，比如什么呀，比如我们这个呃注册，诶比如说登录，诶这些操作都需要什么呀，诶都需要填写什么呀，填写。

表单啊，都需要去填写表单，这是我们说的表单的一个简介，那接下来我们就来说干嘛呀？诶，那在我们这个网页里如何去创建一个表单，哎，那我们说创建表单那和table一样，那无非是不是也就是一个标签啊，哎，一个标签啊，我们来说一下我们叫什么呢？使用我们这个form标签干嘛呢？创建一个表单啊，使用form标签来创建一个表单，我直接写了来一个什么呢？来一个form，诶这个表单创建完了，但是这里边还是这样，跟我们这个table一样，这个仅仅是一个什么呀。这个创建完了，还是仅仅是一个空表单，你在页面里干嘛呀？什么也看不着啊，什么也看不着，我们还需要干嘛呀，我们还需要往这个表单里填什么呀？填写我们这些表单项，什么叫表现项啊？诶，你有的框是干嘛的呀？输入文本的，有的框干嘛呀，输入密码的，有的框是干嘛呀，让你去选择的，这些都叫什么呀？都叫表单项啊，都叫表单项，但是注意我们在说这个表单项之前，我们还要说一下，在form标签里还有一个属性是必的，叫一什么呢？叫做一个action啊，Action这个属性是必须的，那我们来说一下这个action这个属性它是干嘛的？那我们说了表单是用来干嘛的呀？是不是用来向服务器提交信息的呀？那这块就有问题了，那假设我想提交这个表单，我要向服务器提交，诶我向哪提交啊，那这里边能体现出来吗？是不是体现不出来呀？诶体现不出来，所以这里边什么呢？Form标签有一个属性是必须的form。

标签中必须指定一个这个action属性啊，Action属性该属性向的是什么呢？诶指向的是一个服务器的什么呀，地址啊，指向的是一个服务器的地址，当我们干嘛呢？提交表单时，哎干嘛呢，将会提交到我们这个action属性对应的什么呀？诶对应的这个地址啊，对应的地址，比如说我们百度这个什么呀，那个表单它这个艾特肯定什么呀，肯定是百度的后台的一个什么呀，服务器地址这个关键字提交到我们这个百度服务器以后，它会根据这个字去检索这个内容吧，所以注意action后边需要的是一个什么呀，服务器地址，那现在就有问题，我们现在干嘛呀，咱们是不是还不会写服务器呢呀，诶咱们不该还不会写服务器呢，所以说咱们现在还没有服务器呢，所以咱们现在干嘛呢，只能等一假的啊，只等一假的，怎么假呢，直接在这儿创建一个页面来一个。

叫做ta target给的点M毛啊，咱们就写这么一个简单页面啊，来这里边写一什么呢？写一个he，诶叫什么呀？诶叫做表单提交成功啊，表单提交成功然后干嘛呢？我这个表单的action配置什么呀？叫做target.h毛，也就是说我们这个表单往哪提交，是不是往这个页面提交啊，当然问题就来了，这个页面能不能处理表单啊，他没有这个能力啊，它没有这么力，所以咱们现在先不管处理表单这事，我们只要考虑表单它怎么写啊，怎么写好，那这一块整个一个form标签我们就创建完了，创建完了接下来我们还是啊，这里边还是一个空白的表单啊，空白的表单我们接下来干嘛呢？需要往这个表单里去填东西，哎，我们说使用这个form创建的仅仅是一个什么呀，是一个空白的什么呀，表单我们还。

需要向我们这个form中添加什么呢？添加哎不同的这个表单项，什么叫表单项啊，哎，就是我们表单里边那什么呀，哎，你可以理解下，就表单里边那格格因有的格我可以填什么呀，填用户名，有格我可以填什么呀，填密码，有的格我可能填一什么呀，比较长的一些信息，这些东西全都叫什么呀，全都叫表现项啊表现项那最常见的表现项你们见过什么呀？哎，比如说百度这个是不是就100万项啊，我在里边是不是可以直接输出这个文本呀，那这个叫什么呀，叫做文本文本框啊文本框那比如说我们上网时候最常见的干嘛呀，我可能要输入一个叫用户名这么一个东西啊，用户名这么一个东西，那我们来说这个叫什么呢？这个框叫做一个文本框，文本框怎么创建呢？我们来说一下使用我们这个，其实咱们是不是用过这个了，我们讲那个FOX的时候，对吧，诶那个。

伪类的时候讲过这个啊，使用input来干嘛呢？来创建一个文本框，它的什么呢？它的这个type属性是什么呢？叫做一个text啊text使用input标签直接往后写来一个这个input，注意input是一个字结束标签，它里边有个属性是必须的，叫什么呢？叫做一个type啊，叫做一个type type我直接写一个等于什么呢？叫做一个types，这就表示它是一个什么呀，它是一个诶文本框啊，文本框来保存，我们来看效果，直接这里边一刷新走你诶发现什么了，这用户名是我刚才写的字，然后用名后边是不是跟着一个文本框啊，诶通过这儿你也能看出第一点来，我的这个文本框是个什么元素，诶内联元素，它是不是跟我这个用户名在一行呀？哎，它是个内联元素或者严格类，它是一个哎内联行内行内块元素啊，行内块元素来我这写一个，我这写一个ABC，我是不是可以填内容了，哎，比如说来什么呀，来一个ain这个不就。

就是我这个用户名啊，哎用户名诶那现在提完了，我想干嘛呢？我想提交，我一发现是没有提交按钮啊哎没有提交按钮，那你像我这个百度，我是不是还有个百度一下能点呢？诶咱们这个呢，好一个是不是都不能点呀，但是其实也能提交，怎么提交了，直接一敲回车就提交了啊直一敲回头就提交了，但是问题来了，这样是不是很不友好啊，哎很友好，所以这里边呢，我们需要给他添加这么一个提交按钮，那提交按钮怎么提？哎咱们先说提交按钮的作用什么呀？哎提交按钮可以什么呢？可以将我们这个诶表单中的什么呀，诶信息诶干嘛呢？诶提交给服务器啊，提交给服务器，说白了你一点这个提交按钮就意味着你这个什么呀，表单填完了，我要干嘛了，我要提交了啊，我要提交了，同样也是什么呀，使用我们这个input创建一个什么呀，提交。

按钮，诶也是input，那问题来了，那我问你了，这个typeb还能不能是text了，你要是T的时候又变成微本块了呀，哎，那它的什么呢？哎，它的这个type属性值是什么呢？叫做一个submit me啊submit所以这里边tap叫一个什么呢？叫做一个submit密sum me表示什么意思呀？诶提交啊提交，那这个呢，就是一个提交按钮啊提交按钮保存我们来看刷新走你诶这是不是多了一个按钮啊，诶好，我这随便写一个DIN123，然后我点一下这按钮，我这一点走你是不是表单。

提交成功啊，哎，给人提交成功这个能看懂吧，当然看到这儿了，来一个孙悟空，我这一点提交走，你是给人提交成功啊，你看提交成功页面变到哪了，是不是变到他给点N毛啊，诶变到这个页面了，但是这块问题就来了，你会发现我这一点完了以后，它有点像什么呀，是不是有点像个超链接呀，哎，有点像超链接，那我这个信息它到底有没有提交过来呀，有没提交过来呀？哎，一定注意这个信息呢，并没有提交过来，说白了你这个用户名干嘛呀，压根就没有提交，那为什么呢？诶，那我们来说一下，我们还有一个属性没有写，我这个用户名是不是在这个input里边填的呀？诶这里边注意啊，我们来说一下，我们说如果希望表单项中的这个什么呀，数据会提交到我们这个服务器中，诶还必须给我们这个表。

保单项干嘛呢？诶指定一个这个name属性啊，还必须给表单项指定一个name属性，说白了在这儿我还要加一什么呀，加一个name name什么意思呀，名字，诶什么叫名字呀，也就是说你这填一个信息，你这个信息到底是用户名，到底是密码，到底还是什么其他信息，你是不是得跟我说一声啊，诶这个name就表示什么呀，这个name就表示你这个信息的一个什么呀，诶名字表示我们这个，诶提交。

诶，提交内容的一个名字，那比如说我这来一个，我这比如说咱们这填的是什么呀，是不是填的是用户名啊，哎，那我这来一个叫做一个username，当然这个值是不是非得怎么写呀，不是啊，这玩意想怎么写怎么写啊，我们最好起的一些什么呀，有意义啊，有意义来我这一保存，那这写完了以后会有什么不同啊，会有什么不同，回退我这一刷新还是写一个呃的mean ad mn，然后我一点提交，咱们来看看有什么变化啊，我一提交走你。诶，发现什么了？诶你看他给的点M标，这是我们这个URL地址了，后边是不是多了一个这个问号啊，诶问号你看后边写了一个什么，写了一个username等于一个什么呀？Adin吧，哎，Username等于adin，那我们先说这ain是啥呀？Ain是不是刚才我填的那个东西啊？诶比如说我这填一个孙悟空，然后验提交查询，诶你看等于谁了，是不是等于孙悟空了，而这u name是谁？是不是就是我们这个表单的name属性值啊，哎，就是我这个name属性值，我这写的username，它就写的什么呀，它就写的是一个username等于什么呀，等于孙悟空，诶那我们来说这一段叫什么东西，那注意了以后看到URL地址，它后边跟一什么呀，跟着一个问号，问号后边这一堆叫什么呢？叫做查询字符串。

串啊，查询字符串啊，记住这个名字，但是暂时先用不到啊，你先有一个印象，查询字符串，我们说我们用户填写的这个信息会什么呢？会附在我们这个，诶URL地址的什么呀，后边以什么呢？以这个查询字符串的这个形式干嘛呢？诶发送给我们的什么呀？诶发送给我们这个服务器啊，发送给我们服务器，我们来说一下它的格式，首先它是用问号和我们这个URL地址是不是隔开的呀？哎，它后边跟的这个串我们叫什么呀？叫查询字符串，我们来说一下它的格式，格式怎么写的，那你来看它这是一个什么结构。

一个值等于一个值，是不是又是一个名值对的结构啊，诶名值对的结构啊，所以前面是什么呀，叫做一个属性值是不是等于一个，诶属性叫什么呀？属性名是不是等于一个这个属性，诶属性值啊，诶属性名等于一个属性值，那我们说该值最终到达服务器以后，我们的后台人员就可以干嘛呢？就可以根据这个属性名去获取这个什么呀属性值，换句话说，后台要想获取到用户填写的用户名是啥？得通过什么呀？通过这个username去干嘛呀。去获取啊，得通过uzm去获取，当然这东西能不能变呀，诶你这换一个，你换一个hello保存你这一回退刷新一下，直接写一个走底是不是变成什么，是不是变成hello等于AA了，哎变成hello等于AA了啊所以注意这个玩意一般咱们用不用。

咱们这东西一般不用，这东西一般给谁用的呀，哎，给后台用的啊，给后台用的，所以往往这个名字呢，你愿意起给他起上，如果不起的话，哎，这东西一般谁谁来决定啊，后台决定啊，后台愿意起啥他就起啥，咱们一般都不管它，但是如果说后台也是你写的话，你可以干嘛呀，你可以给他加上啊，你可以加上啊，这也是我们说的个什么呀，这也是我们说的一个叫做一个，哎数据的一个发送的一个方式啊，我现在改过来啊，还叫username，所以你要注意，如果你的数据希望发送给服务器，你这个name干嘛呀，必须写，如果你不写干嘛，刚才你看到了是不是什么也没有啊，诶不写name的这个文本这什么呀，这个表现项不会被什么呀，提交啊，不会被提交，一定要注意啊，一定要注意好，这是我们说的这个文本框表现项啊，但是这里边就有问题了，我现在是不是只提交了一个值啊，诶，那有一些情况干嘛呀。

诶，我这复制一下，我这换一个名啊，叫一个hello，我提交几个值啊，我是不是提交俩值啊，诶俩值我们来看怎么提交的。我这一刷新现在是不是有两个框了，诶知道这写一个孙悟空123，这来一个孙悟空456，我这边提交两个值啊，诶那这两个值他会怎么提交呢？我们来看效果啊，来这一刷新走你。诶，你发现什么了？Username等于孙悟空123，然后hello等于孙悟456，这为什么是hello，因为我第二个表现项的name是不是hello啊，然后你来看它用什么呀？哎，是不是用and符连接呀，哎，用and符连接啊，所以注意在我这个查询字符串里边，我可以有多个这种什么呀，明字段结构，多个明字段结构之间，它使用的什么呀？哎，使用暗的符隔开，你可以写多少个呀？哎，无数五个啊，无数个，只要长度不超标都可以写啊，都可以写，这是我们说的什么呀，这个表单项这个事儿啊，好，那我把这个给它去掉了保存，现在来回到我们这个表单一看回去，现在就剩一个了啊，就剩一个了，然后你会发现这有一个问题啊，表现项写完了，我们发现我们这个按钮和我这个表现项，他们是不是都在一行啊，那就证明什么呀，是不是都是内联呀，那现在我不想这个按钮跟着我想按钮干嘛呀，你跟这儿那怎么办？哎，是不是给他换行啊哎。

把它加上一个回车啊，是这个换行的快捷键啊，Shift附加回车保存，现在一刷新走，你是不是换行了呀？诶感觉还有点劲干嘛呢，再来一个保存一条新是不是就OK了呀？哎，就OK了啊使用换行可以给它，诶换成另一行显示，然后再看还有什么问题来看这提交查询，这我写了四个中文是吧，但是这中文我这有没有指令啊，没有指令应该也就说这按钮上的文字实际上是浏览器默认的吧，哎，但是我不希望它这个是这个字，我希望自己指定吧，诶那这块我们要怎么指定，诶我们来说一下，这里边还有一个什么呀，叫做一个value value6什么意思呀？值啊值我们什么呢？在我们这个提交按钮中可以什么呢？可以通过我们这个value。

呃，属性来干嘛呢？来指定我们这个按钮上的文字，那比如说Y在我这改一个改一个你好，我一保存咱们来看一刷新走，你是变成你好啊，哎，你好，那我这不想弄你好了，我想来一什么呢？来一个，比如说我来一个什么呀，注册我这一保存，然后一刷新走，你是不是变成注册了啊，就变成注册了啊所以注意可以通过Y6使用值来修改我们这个按钮上的一个文字啊，可以通过Y6使用值来修改我们的按钮上文字，诶那我们来看，那你说我这玩意儿能不能写个Y6，这能不能写Y6，诶我们来看啊，诶来我是Y6，我一保存我看它在哪出来啊，看哪出来，诶我这一刷新走你，诶现在还看不出来，我CTRLF5啊，CTRLF5强制清空缓存，刷新CTRLF5，诶一看。

搁哪儿呢？框框里是不在框里的呀，那这叫一个什么呀？是不是叫一个默认值啊，哎，默认值啊，所以注意在我们这个音input的里里也可以指的什么呀，Y6啊在什么呢？在我们这个文本框中也可以指定Y6属性值，该值干嘛呢？将会作为我们这个文本框的一个什么呀，默认值显示这个不是提示文字啊，这可不是提示文字，为什么不是提示文字，要是提示文字我这一点它应该没啊，这不是提示文字，我这不可以直接接着写啊，诶，这不是提示文字啊，这叫一个默认值，换句话说，你不写默认值就是什么呀，就是它啊，默认值就是它啊，这是我们这个默认值啊，咱们先给它去了，这块有点碍事，好，这是我们说的这么一个玩意儿，文本框还有一个提交按钮，那接下来我们再来说，除了文本，我们还有时候需要什么，是不是需要一个密码框啊，哎，密码框换句话说就是。

就输入我们那个密码了，密码框怎么写呀，那密码框我一想密码框应该跟文本框实际上是是一样的是吧？密码来一个音铺，我也来一个这个什么呀，TB也来一个T俩没啥区别是吧？没啥区别，来加个换行保存一刷新走，你是不是出来了呀？哎，这不是OK了吗？来一个我的面来一个什么呀，123123，哎呦完了我写密码你们全都知道是吧？诶密码就暴露了，诶我们说了，如果你密码框也用的是text，我们说了我这密码是不是直接就铭文显示了，哎铭文显示了对这个信息来说是不是不太安全呀？诶那我们怎么把它藏起来呢？那你肯定不能用什么了，不能用不没框了，诶那密码框你来说一下，使用我们这个input创建一个什么呀，密码框它的什么呢？它的这个tab属性值是什么呢？是他。

Word诶password就是我们这什么呀，是不是密码的意思呀，所以这里边给它去掉，咱们改一个叫一个password，然后一保存咱们再看一刷新，这回再输123123是是变成这种小点儿了，诶这样我们这个密码就完了，别人就看不着了啊，就看不着了，这是我们说的用户名，还有这个密码还是填完了以后，我一点注册是不是又提交表单呀，诶我一提交来走，你你发现什么了，是不是只有user namem呀，密码有没有啊，没有，为啥没有啊，我是不是没有指定内属性啊，所以注意啊，只要这个信息你想往服务器提交内是必须的，那我们这给他来一个name吧，来一个name等于一个password，但这名儿叫啥都行啊，点啥都行password，然后回退，我这一刷新admin来个123123，我一注册走，你username等于admin and password等于什么呀？123123这个。

息是不是就提交过来了，诶提交过来啊，所以注意信息你只要想提交给服务器，这个内部属性是什么呀？是吧？必须的啊，内部属性是必须的，好，那这里边我们说了一个简单的表单，说了一个什么呀，Form标签，使用form来创建一个表单，然后呢，Form中有一个action属性，Action属性指向的是我们一个服务器地址，表单最终将被提交到这个地址上啊，这个地址上，然后说这么两个表，三个表单项，一个是我们这个input的typeag等于tag，这是我们这个文本框，然后呢，说了一个input typeb等于password，这是我们这个密码框，还说了一个input type等于submit，这是我们这个什么呀？提交按钮啊提交按钮，这是我们说最基本的一个原项了，我们这儿呢，先停一下。