00:00
来了各位,我们等了好久啊,终于等到了我们这个HTML当中最最最重要的一个内容啊,我用三个最来表示啊,最最最啊,重要的一个内容,这个内容咱们每一个同学都必须要掌握,这个是表单,各位是表单啊,来,咱们先来看一看表单是什么。这块我先关了啊。表单是什么?来,我直接告诉你表单是啥啊。这就是。这就是表单。哎,表单这个东西是干啥用的。是。
01:01
表单最重要的作用就是接收用户的什么信息,因为在我们的网络当中啊,不能只是有一个超链接对吧,点完超链接跳到一个页面,再点超链接又跳到一个页面。你在这个网络诶,使用过程当中,必然有一些地方是需要收集谁需要收集,就是说我们这个系统可能需要收集谁啊,需要去收集我们这个用户的信息,对吧?那么我们在网页上怎么去收集用户的信息呢?我们就使用表单,所以表单的一个作用就是收集用户的信息,用户将信息填上去之后,直接点注册,它会自动把用户填到表单上的数据提交给谁服务器,服务器呢,拿到这个数据,这个数据,这个数据之后,底层执行一条ins色的语句,诶一保存数据库当中的数据,是不是就多一条数记录啊,所以这个表单呢,咱们是非常非常的重要,因为在很多的应用当中需要我们。
02:12
有些系统是需要我们人工录入的。对不对?比如说我们有个员工管理系统,各位今天有一个新的员工来到了我们公司,我们给他办理完入职手续之后,我们是不是应该在我们的员工管理系统当中新增一条员工信息啊,这个员工今天离职了。离职,我们还需要把这个员工的信息给他干什么呀,删除掉,理解什么意思吧,就总之我们刚才说的就是办理完入职手续,我们要录入这个员工的信息到底层数据库,那这个时候我们就得提供一个界面呀。那你这个界面你光有一些超链接有用吗?超链接是你能跳来跳去,你能发请求,但是我表表单这块是主要做什么呀,数据收集的,超链接没有办法进行数据收集,所以这块呢,咱们重点来看看表单各位啊011。
03:10
我们叫表单form,记住不是from啊,写词后语句写的是吧,叫你写错了。表单来首先呢,我觉得呀,咱们应该在这聊一聊啊,第一点表单有什么用,收集用户信息啊,表单展现之后,用户填写什么表单,点击提交按钮,提交数据吧,给谁服务器。
04:00
啊,就是这样,那这是表单的作用,那怎么画一个标呢?Form标签,注意啊,使用form标签画表单开始就是一个。另外呢,第三点就是一个网页当中啊,可以有多个什么表单form啊,可以有多个表单form在这儿,可以再一个,你可以再来一个没问题啊来那这块呢。我们要说的是说的是什么呢?这个表单form里面有一个什么呢?X属性,哎,这就很重要了啊,表单最终是需要什么提交数据给谁的,给服务器的明白。
05:22
你提交给哪个服务器。你需要在action这个属性当中写什么服务器地址?什么意思啊?你这个表单这个东西,你点注册,你一注册是不是提交这个信息。你提交这个信息给谁呀?你需不需要在这写个地址啊。所以这个action属性是用来指定什么的。
06:02
表单最终是需要提交出去给服务器的。对吧,Form标签有一个什么X属性,这个属性。用来指定什么?服务器地址action属性用来指定数据提交给哪个服务器?X属性和超链接中的h ref属性怎么样?都可以怎么着向服务器发送什么请求那个单词各位啊,就这个位置呢,Form标签呢,它有一个action这个属性,这个action属性的后面写的就是一个地址吧,比如说你把这个数据提交给谁呀,幺九二点幺六八点。
07:09
111.3端口是什么呀?比如说8080端口啊,OA这个项目。这是个什么呀?请求路径,这是表单请求,这是请求路径,表单提交数据最终提交给谁了?提交给这个机器。上的什么?8080端口对应的什么软件。
08:00
就你相当于你你你将来这个表单你写完最后是不是有个提交啊,一提交你这个表单上的数据就提交给谁了。这个机器上的什么,这个端口所对应的软件,那这个时候这个软件就会怎么着,收到这个表单上的数据,听明白了吗?所以这个action重要吗?如果一个form表单没有action的话,你这个form表单也没有用。你数据提交给谁啊,对吧,你得写个地址啊,另外这个地址和你刚才学的那个超链接的H2EF是一样的,H是干啥的。写个请求路径吧,请求路径好了各位,那在这呢,我说了一个form标签,也说了form标签中有action属性。那再往这个里边呢,我们来画一个按钮,各位画一个按钮啊,画一个什么提交按钮,这个按钮可以提交什么表单啊,怎么画input输入域,各位啊,画提交按钮或者叫画按钮可以使用什么input输入域啊,Input标签当中啊,有一个type属性,这个type太多了啊,你写上什么。
09:34
八。啊,其实是不能随便写啊。Type的submit具有提交表单的作用。换按钮可以使用input输入域,Type等于什么submit的时候表示该按钮是一个什么?提交按钮具有提交表单的能力。
10:11
如果您只是在这画了一个普通的什么按钮,各位button,这个普通按钮不具备什么提交表单的能力,听懂了吗?这是一个普通按钮,不具备提交表单的什么能力,各位啊,你要注意了,不要随便画。好,这个后面的这个东西不能随便写,你写成text。它就是一个文本框,你写成password就是个密码框。你写成check box,它就是复选框,你写成radio,它就是个单选按钮,你写成submit,它就是一个提交表单的按钮,你写成button,它就是一个普通按钮,不具备提交能力,打开之后发现我们这个位置有个提交两个字,你想设置这个按钮上的显示的文本,你可以通过input标签的value属性来做,这个value属性用来设置什么按钮上显示的什么文本,来我们看看是不是大家能看懂吗?
11:42
能不能看懂,能看懂吧,好,那么这个提交按钮这块是不是也可以加Y6,是不是我们叫登录也行,我们叫注册也可以,反正写上去好能看懂吧,好,大家看是不是过去了,是不是转圈呢。
12:01
看这啊,转圈儿了呢。他正在找这个主机。对不对,哎,他找一会儿找不着,就就就就就就就停下来了,你看有数据吗?后边提交数据了吗?没有找到主机了吗?没有没有啊,网络中没有这个主机,对吧?没有这个主机,你看无法访问子网站吗。访问这个网站是不是访问不了,访问不了啊,但是您这个数据要是有的话,就会提交给谁。提交给这个服务器啊,交给这个服务器,各位我在这讲啥了,各位我在这第一各位啊,第一记住了表单的标签是这个啊,第二表单的标签里边action action后面写的是什么URL,这个URL指的是你这个表单将来提交数据是提交给谁了。
13:03
听懂了吗?啊,其实就是个地址提交给谁了啊,然后再往下呢,我们有个输入域叫input标签type,如果是表示提交按钮,Button表示普通按钮,普通按钮没有任何反应,各位点点点点点有作用吗?没作用,你点它你看这走不走啊,一点它你看走了吧。点单没有作用,你看点单没有作用,没用普通按钮不会提交表单。这个value是干啥的?在这里我再补上一句话啊,对于按钮来说,按钮的VALUE6属性用来指定按钮上显示的文本信息,对于按钮来说,VALUE6上的这个这个属性用来指定按钮上显示的文本信息。各位如果提交按钮的value没有设置,它会默认显示提交俩字,听懂了吧?如果你设置上它就不是提交了啊,来再看。
14:18
看见了吧,这样的。很简单。好了,那接下来继续吧,Action这个action呢,我就写上百度行不行可以吗?这个位置我接一个input type类型submit,然后value些百度行吗?我这样能不能点百点到百度上可以吧,这是跳到百度了,跟超链接一样,不一样还是一样,比超链接厉害在哪?厉害在表单能收集数据,超链接不行,超链接你根本没有提供输入的入口,听懂了吗?你超链接这块你是不是就直接就是写一个3W100度点com,然后写上去百度,然后后边一个结束的A标签打开,就就是很单纯,就是这样一个东西对吧?但你这个呢,你下面这个百度呢,你就可以在这加什么,加那个放标单里表表单当中你可以加t text对吧?哎,这个时候有文本框了,你可以写点东西啊,一点走了吗?就这个东西不就走了吗?
15:30
对吧,你懂我说的意思吗?就说。你说老师他为什么会走,因为您这个submit是属于这个form,你的input标签也在这个form标签里边放着,您这个submit只要一走,这个数据必然会带走,会提交走,诶我问大家问题,如果这个框放到外面还能走吗?您点这个按钮,这个数据不会走的啊,听懂了吗?因为您这个数据没有在表单里面。我这个表单提交也是提交我这个form,跟你这个没关系。
16:02
懂不懂,哎,你这这个我觉得应该能够理解这个东西啊,来这删掉这个按钮,和这个按钮和谁和普通的什么超链接没什么太大的区别,对吧?啊没有太大区别。所以说我们在表单是不是也是可以向服务器发送请求啊,就是超链接和表单都可以向什么服务器发送请求,只不过表单发送请求的同时可以携带数据,我觉得这点是很重要的,就表单他最主要是他不止是发送请求,他发送请求的过程当中还还可以带数据过去。明白吧,好的,接下来继续了啊,Action action后面我们随便写个路径啊,比如这个路径呢,我就写这个local host行不行啊,冒号8080端口杠OA-save,然后随便写的啊,不用管后边这个为啥写OA啊,写这个save我也可以行东京东京东对吧,写京东啊,然后SE网啊,或者是怎么怎么着怎么着啊,这个路径先在随便写的,反正路径也不存在啊,那接下来我们就在这儿呢,可以简单的画一下,比如说用户名密码,用户名这块的话,咱们就写个input呗,对吧?Type类型什么呀?Text是不是密码这块input type类是什么类型啊,Password是不是来再来个啥input type类什么类型啊,Submit啊,Value写上教材啊,登录登录的话,这不就log in呗,是不是好,那这块的话,咱们来看看这个。
17:52
表单各位看一下这表单啊,打开这样的对吧,哎,你你你想让它好看点,我们今天有没有学表格,有没有学table学了吧,好学这个table,能不能把这些东西放到一个表格里边。
18:16
可以吧?这个放表格里啊。表格也有用的啊。我在这儿就不画了啊,费劲。那那行换一来几行几列,三行两列吧。三行两列,搞得稍微复杂点啊,Table呗,TRTD。是吧?
19:01
这块是谁?用户名。这个。对吧,这个。这个。没错吧,打开。比上面稍微整齐点是不是,哎,接下来呢,再往下呢,我们这个合并单元格吧,是不是两个少一个叫什么二对不对,这个TD里面放什么。是不是放它。对吧,哎,这是个表格啊,如果说你要看不清楚,你可以先把这个包带加上去,难看啊,看见了吧,哎,非常丑啊,登录。对不对。
20:02
你除了登陆之外。你可以再来一个。清空。居中怎么居中?是吧,中间让他隔开点行吗?那个边上是。行吧,把包给他去了,难看了啊。那test test清空能清空吗?清不了是吧,清不了你得变成它就清了是就清掉了啊来走。
21:08
哦对,外边没写放能清吗?这不扯吗?是吧,放得括起来啊,您放得括起来才行,不括起来清不了,这是不是整个放放套了一个table啊,这个action是不是,是不是得写上action,写个路径呗,就拿过来放这呗,对吧?哎,那这是用户名密码,然后这是登录,这是清空,然后我们再大家再来看看来走走走走点你看清空了,走走走清空。不能随便写的各位啊,您这个放到放外边能清空吗?放外边能清空吗?来行行行行行行,哪能清点这个才能清,是不是这个清清除清除不了啊,必须放到form标签内部。
22:05
包括各位登录。这个登录放到这儿能提交表单吗?Submit也必须放到成form标签内部才能提交。你点点有啥用啊,转圈了吗?没转吗?来你点点这个试试啊,ABC密码123走一个。开始了吧,开始了LOCAL8080京东log in问号妥了,出问题了,写的那个用户名密码是不是没提交走。是不是没提交走啊,在这没显示出来啊,好,怎么提交走,你需要给input标加一个name,必须加啊,没有name他不提交,建name才会提交name这块,我写上用户名u name,密码写上u pwd能看懂吗?诶u name就是PWD啊,这会来了之后呢,我们在后退,后退之后我们再刷新,刷新之后呢,这边ABC111,然后点击登录,好我们等一会儿啊,看看这个地方,它会把用户名等于ABC与u password等于111提交过去。
23:17
能看懂吗?Name重要吗?非常重要,没有name是不会提交的。数据不走,有内部才会提交。没糊涂吧?我讲东西比较多,各位啊,来,这块表单是以什么格式提交数据给服务器的这个格式。格式是什么?Action问号?
24:04
后面的这个东西是啥?Name后面紧跟着一个什么等号,后面这个是什么?用户输进去的东西吧,用户输进去的东西是什么?你们知道吗?是value,看好了,我给这个音库的标签加一个value,大家看看,这个value叫做借。好,回退一下,大家有没有看见这个位置是捷克?如果你把杰克改成杰克逊,现在的value就是杰克逊,不是杰克,听懂了吗?你把这个改成杰克逊,你再登录一下,你看他提交的是不是杰克逊。但如果说你要是没有把它改成杰克逊是杰克的话,你点击登录的时候,它会自动提交谁杰克。
25:00
也就是说各位,我们的input标签,如果type是一个文本框,这个value是不是压根就不需要我们程序员写?因为用户填进去的东西就是Y流,填一个ABC,它的Y6就是什么ABC,填一个DEF,它的Y流就是什么DEF听懂了吗?所以表单提交数据的格式是什么?Action问号name等于什么Y6与什么name等于什么Y0与什么name等于什么Y0明白与name等于什么Y0与name等于Y0点点零。这个表单有可能非常庞大,几十项,它的格式都是这样提交的,有的说老师谁规定的HTTP协议规定的HTP规定必须以这种格式提交给谁服务。
26:00
明白,不管你是世界五大主流浏览器当中的哪一个浏览器,只要你是表单提交数据都逃不过这个格式,这是W3C定的HTTB协议中规定的,必须与这种格式提交,提交的时候问号前边是路径,问号后面是数据,数据以name和Y的值对方式啊,中间用等号衔接,一对和下一对用符号衔接,走到哪它都是这种格式,您必须把这种格式记住,如果记不住,后期Java没法学,因为后期我们Java代码在写的时候,我们Java中有一个字符串,字符串里边方方法有个Li,大家还记不记得,它可以进行切割,拿到这个串之后呢,它把这个东西呢,通过与符号进行切割,切割之后呢,我们拿到这个数据,再把通过等号进行切割,切割之后呢,把内部和Y6拿到之后呢,我们才可以把数据真正的解析到,我们才可以把。
27:01
这个数据插入到底层数据库当中,这个格式必须提前背会这个格式我再强调一下,您这个要是学不明白,后边您就别学了。你根本就学不懂,你不知道他在干啥,现在我再三强调,我说了,咱们HTL当中,哪怕就是说您之前的东西都没学会,都没听懂,但是表单这个东西咱不能含糊,这个东西是非常重要的,我们要搞定一件事,我不知道大家到现在有没有理解表单往服务器上提交数据,提交的是啥?提交的是name和value,听懂了吗?各位告诉我为啥这个value没提交?你又忘了他没有内幕,怎么提交?试一下行不行,来刷新一下走一个。走了吗?
28:04
你不想让他提交把什么干掉就行,把name干掉他也不提交了,你整个这个表单当中的数据,整个提交的都是谁和value?我再问大家一个问题,这个input标签如果type类型是text,是文本框的话,这个value需不需要我们程序员写,不用你写上它没有用,你等着用户往这填不就行了吗?用户往这填个ABC,那的Y就是ABC,他要填个abcd,那就是abcd,你懂吧,你在这不用给他写Y6啊,你不用给他写个Y6,写个杰克。你不用这样做。听懂了吧,这个这个你得懂啊,你是到关键了,咱得懂啊,你这块你要搞,搞不定你以后还怎么写Java代码呀。我今天讲了一个非常重要的HTB协议,这个协议的格式你记住了吗?Name等于Y6与name等于Y6,余内等于六,把这个东西格式给我记住记住。
29:09
这个name说的是谁?是input的标签是什么name,这个value说的是谁?是这个标签什么value,听懂了吗?如果不想让他提交name就别写,Name写上他必然会提交,你写上刚才大家看到了name等于什么?呵呵,他提交了是不是?诶所以说这个很重要啊,太重要了,这个太重要,我们以后就就就要拿这个数据的,那你现在要不懂这个,那那那就麻烦了嘛。是吧,哎,所以这块呢,重点强调啊。表单项目。有内幕的。就是表单项写了什么内部属性的,一律会提交给谁,服务器不想提交这一项目。
30:08
就不要写什么内部属性。这不是我我定的啊W3C。W3C的HTTP协议规定的必须以这种格式提交,不管你是什么。都是这样。太重要了,好了,我们input这块讲了几个了。Text是啥?文本框password啥?密码框这个是啥?提交框有什么作用?提交有什么作用?他可以提交表单中的数据干啥的,重置的重置啊重置。
31:10
八字是什么?但愿。普通按钮,按钮上的value干啥的?设置这个按钮上显示的东西吧。这个干啥的?指定你这个数据提交到哪了。嗯。有没有不理解的这块。这个能随便写吗?这个能不能都不能,这个能不能可以。你双引号里边起的这个名字随意啊。我们再来一次这个提交一下。
32:01
就是这个呗。张三,我们好好写一下子,张三123呗,密码找一个,你看他提是不是提交那个张三123,你看username这个username。等于什么?张三与谁是PE等于什么123?说的就是这个呀。这个。文本框和密码不能value,需要我们程序员指定吗?文本框和密码框的什么value不需要程序员指定,用户输入什么value就是什么,明白吗?我不放心啊,我再提一下子,这个地方没有内是不会提交的。也就是说,如果把这个删掉,他的用户名即使填上,他会不会提交不会。
33:03
我再填上去啊,李四123,我再点一下登录,大家看一下只有123提交过去了,看见了吗?那个用户名根本就没走。所以这个name太重要了。没有内,他不走,有内才会走。好,我再问大家一个问题,如果只有name value,没写value,有没有默认值?就是我这个文本框里边啥也没写,这个里边也没写,我点登录它会不会提交会,只不过提交的是空自无创。等号后边是不是空白,但是记住了,空白指的是。空字符串你懂吗?不是这个啊。啊。
34:00
当内部没有写的时候,该项不会提交给服务器,但是当什么value没有写的时候,Value的默认值是空字符串,会将空字符串提交给谁服务器?Java代码得到的是什么?是他。好了,这是关于我们这个表单这一块啊,第一个作用呢,告诉大家了,怎么画一个表单放我们开始放我们结束,怎么提交表单submit怎么重置表单。
35:05
然后提交数据,这是我今天重点要讲的内容,数据的提交离不开name,没有name他不会提交好了。
我来说两句