00:00
我们刚刚讲的是table,它指的是表格。那现在呢,我把它复制一份。我们再来新建一个页面,零三。呃,然后呢,我们这边把它改成叫。表单啊,表单标签的学习好,我把这个table先删掉。好,这是第18个。表单我们使用的是叫form。那表单是什么呢?为什么需要使用表单呢?是这样的,同学们。其实啊,平时我们在上网的时候呢,我们平时所看到的一个一个的页面,它其实里面充斥着大量的表单。其实它里面充斥着大量的表单。比如说。我们打开百度。好,你看一下啊,记得了。这个地方。是被我猛框。
01:01
这边一个叫百度一下,其实这边就隐藏了一个表单。那比如说这边还有个登录是吧,登录从来没点过啊,就这样的,你看这边也有文本框,然后有个登录按钮。当我一点击登录的时候,输入啊,输入这个手机号对吧,输入密码,然后点击登录,当我一点击登录的时候,表示我要向服务器发一个请求。那么发这个请求的时候呢,就会把一个表单的数据发给了服务器。所以表单是什么呢?表单其实啊,表单其实就是一个容器。它能够承载我们所要发送的数据,要发给服务器的数据,它能够帮我们承载进去。啊,这个其实就是表单。那咱们下面就来看一看这个表单啊,到底到底怎么来写啊,这个叫form。那行吧,我们就在这边写个form。Form标签。一个form标签就表示这是一个表单。
02:00
那这个表单呢,你在页面上呢,你是看不出来的,同学们。这边是看不出来的。因为它没有边框,那这个呢,大家先不需要掌握,先不需要掌握,我先把它显示出来给大家看一下。我把这个变,我把这个表单写出来给大家看一下啊。运行一下你看。这边是不是有个红框框啊。这个红色的框其实就是我们表单的边框。所以说啊,刚才这个form标签你在页面上看不到,不代表它不存在,其实它是有的。啊,这其实就是一个表单,那行吧,这个红色的框我就把它去掉了啊,所以大家要知道这边其实是一个框框在的,这个框框就是表单。然后我在这边,比如说我要写个个人注册。我写一个吧,比如说我写个叫昵称。昵称。啊,昵称是什么呢?昵称我们最好后面跟着的是一个文本框。
03:00
表示你可以输个昵称嘛,好input。我写个input,这就表示是一个文本框。运行一下你看。一个input,它就是一个文本框,它里面有个属性叫type type它有个值叫T,这个表示的是文本框,你不写type也是等于text。再来。你这个文本框呢,大家需要注意一下。我这个表单将来是要发给服务器的。好,我把这图删掉了啊。把它删掉。这是我们的服务器端,稍等一下啊,我把它画画出来啊。这是我们的浏览器。第一步,假设我们点击登录。我点击登录或者点击注册这么一个按钮啊,给服务器表示,给服务器发个请求,要请求登录页面,我要请求。Http request。我要请求login.htm页面。那么我们的服务器端有没有这样的页面呢?如果有啊,没有的话就会报报一些错误了啊,这个咱们后面再说。
04:05
好,我有这个页面,这个叫locking.html。那么我就会把这个页面的资源发给我们的浏览器。叫响应给我们的浏览器,好响应回去。那么响应回去的时候呢?响应回去的时候呢,它就是HTML啊,它就是黑的。他就是body。其中肯定有一个叫form。这么一个标签,它表示的就是表单,所以在我们的浏览器端就能显示出一个网页,然后这个网页当中有一个表单。啊,这边显示表单。然后我们这边有比如说昵称。好,比如说密码,比如说性别,我就把它写下来算了,性别。比如说爱好。比如说星座。啊星座呃,星座爱好,性别,密码,昵称,比如说还有这个叫个性签名吧。
05:02
或者叫备注。就这样子。好,然后呢,我们有一些文本框。好,我们把文本框画在这。好,就这样子。然后呢,我们把它复制一个。CT you c you。把它拉过来放到这。然后呢,我们再复制一个。CTRLCCTRLV,好把它放在这。差不多啊,再来两个把它放到这意思一下啊,这个不用画的很好看是吧,就差不多就行了,好然后呢,其中你注意了。昵称没问题,密码没问题,这个性别啊有点小问题,我们这个性别呢,我们要把它写成单选按钮。所以这边我要画出单选按钮。这个不太好画啊,反正大家将就着看吧,行吗,同学们。将接着看就行了啊,单选按钮。把它画一下。比如说第一个性别,性别第一个女。
06:05
后面比如说来。好,就这样子。再来爱好,爱好肯定也不是文本框。爱好。呃,爱好可能也会多个嘛,我们应该是一个负雄矿。所以这边也有框框。啊,这边会有个框框。这后面可能还有一些框框。反正差不多意思一下吧,比如说第一个什么,比如说踢足球是吧,或者篮球。篮球。啊,差不多意思,放不下就算了啊。差不多吧。就这样吧,啊意思一下后面不写了。星座,星座是啥呢?星座是个下大代表嘛。那行吧,咱们得换个下列列表。差不多啊,这个用个小箭头吧。啊,表示这个可以下单,就这。然后备注,备注是一个多行的一个文本框。
07:02
行吧,同学们,备注是一个多行的文本框。哎,差不多就就这么意思一下吧。然后后面再给他一个按钮叫注册。你这个到最后你得有个提交按钮啊,你没有提交,你别人怎么提交。啊,别人是没办法注册的,我得一个按钮,就这样子。所以当我们请求登录页面,或者我们请求页面,请求注册页面的时候,诶,他就能给我出现类似于这么一个界面嘛,实际上这些内容它外面其实是一个表单存在的。这个表单可以承载这些内容,那这个表单我们就称之为叫form。下面我们就来写第一个文本框。叫昵称,那同学们要注意一下。Input type等于text表示这是一个文本框。将来当我点击注册,将来啊,当我点击注册。这个文本框里面内容会不会发送给服务器呢?你注意了,并不是你能看到就表示会发送,不是的。
08:03
我们在这里面有个属性叫LA属性。这个name属性我们必须得写一下,比如说昵称叫nickname。如果没有name属性。这个文本框的值是不会发给服务器的。大家能听懂我的意思吗?是不会发给服务器的。一会儿呢,我给大家演示一下。所以我写在这边。Input type等于text。表示文本框。其中。Lamb。属性必须要指定。否则,这个文本框的数据将来是不会发送给服务器的。行吧,同学们,否则这个文本框的数据是不会发送给服务器的,行,这是第一个昵称。再来第二个,刚才我们写的叫密码,那我就写一个吧,Input type等于text,好,这是一个普通的文本框,同学们。
09:03
我现在运行一下昵称,昵称起个好一点的昵称。比如叫帅的掉渣是吧?不是甩的掉闸了。又叫帅帅帅。摔摔的掉渣是吧,密码我的银行卡取款密码9987。八七。这个大家都看到了。啊,这个是铭文,这是银行卡密码,记住了啊。那你注意了,这是文本框啊,如果想要的是密码框,哎,这个type必须得写password。我把它改成pass。这样它就变成一个密码框了。所以这个密码框我再来输真实的密码。大家是看不到的。啊,这个是看不到的是吧,就这样的。这叫密码框,同样的道理,它也需要name属性,行吧,同学们。没有代码属性是不会发给服务器的。
10:01
好,我们这边写一下input type等于password。表示密码框。再来。性别。性别是什么呢?Input type。呃,Input type等于什么呢?单选按钮叫radio。啊,这个叫radio。然后呢,我得写个name属性。Name等于表示的是性别。外面我写个男或者写个女,随便啊,CTRLC。拷贝一下。Could you?好。再把它对齐好看一点啊好,就这样子,那把它改掉,就改成铝。那我们看一下显示一个男一个女。但你要注意。上面的这个昵称和密码,我这里面输入内容,比如说我输个hello,你注意了,将来我提交给服务器的时候,这个文本框的值就是hello。
11:02
但是这个。单选按钮是不是你只能选中啊,但选中的时候它的值表示的是什么呢?不知道,我们要指定一下,通过value这个属性来指定。比如说我写个mail。这个value我写个叫female。啊,没表示男嘛,Female表示女嘛。或者你用一和二来表示也行啊。总之。总之你不写value,你选中它,我们将来发给服务器的时候,它不知道value值是什么。上面这个老师你没写。下面是文本框,同学们,文本框里输入的是什么内容,将来它的value值指的就是什么内容,能听懂吗?但下面这个没法输入。所以你必须要你下面一个没法输入啊,所以你必须要指定好,当我选中的时候,Value值应该是什么,当然这边能不能带value是可以的啊。请输入你的昵称。这是没有问题的,你看它默认是不是里面就有这个东西啊,请输入你的内称,当然平时大家在网页上所见到的啊,这个提示并不是用的value啊,用的是另外一个属性。
12:10
再来。这是单选按钮,咱们再继续啊,先尽量的咱们先先不分神,我们先在主线上先把这个先说完。再来,这是性别。再往下。我们需要一个叫爱好。爱好,我们需要一个叫复选框input type,副选框是啥呢?副总叫check box。叫check box name属性叫hobby。兴趣爱好嘛,好表示爱好的意思,好,我在外面写个叫篮球。那么这边我得写个value。一样的,这表示的是复用框。Basketball。啊,它是复用框,它也是用户不能输入的嘛,只能表示打勾吗?打勾它的外值是什么哦,外值就是叫basketball。那行,我们把它复制一下。Could you see。
13:00
好,KTV。嗯,篮球。比如说这个叫。足球。篮球地球是吧,好就。好,那这个叫football。好,这个叫饿死是吧?差不多意思一下嘛,啊就这样。那行吧,这是爱好啊,那这样我就付永光就有三个了,你看这个是可以允许选多个的,上面这个男和女你只能选一个。啊,不能选多个,这个能不能选多个,并不是因为它是单选按钮决定的,是因为这两个name属性是相同的,同学们我写个给大家看一下。一个叫阶等,一个叫阶等一,是不是两个name不一样啊?啊,再看一眼。来。驴。那这个性别就有问题了。啊,到底是男还是女是吧,这个这个这个这个有问题。所以说这个name。你这个名字必须得一致,它才会有一个互斥的效果。
14:01
才会有一个互相排斥的效果。啊,所以说这个名字,下面这个名字无所谓,下面这个名字,反正人家是可以多选的嘛,你名字可以不一样,但上面这个名字必须得一致。啊,当然说实话啊,这个爱好,这个名字也强烈的建议大家设置成一样的。因为设置成一样,将来我们发给服务器,服务器获取这边值的时候是比较方便的,是比较好获取的,行吧,同学们,所以这个名字也要也要写成一样。啊,这个性别呢,其实咱们除了男和女,其实呃,还有另外一个性别。啊。这个性别叫boss啊。这个性别叫boss,这个性别啊,就双性人嘛。双性人。就叫这属性啊。咱们还是按常规来吧,这个非常规就不说了啊,OK。这叫性别爱好。好复选框,那再来咱们还有星座。
15:00
星座。星座我们是下拉列表select,它表示的是星座,哎,这个和上面不太一样了。上面咱们都是input type不一样,你这个地方是星座不一样,Select。好,Name咱们写一下,比如叫star。18星座嘛。那这个star里面到底有多少个呢?啊,有多少个选项呢,叫option option叫选项的意思啊。这个缩进的太多了,咱们少一点啊好,就这样哦不行。那我们写一下,比如说白羊座。Can you see。给V,给V。金牛座。什么双子座?啊,什么时候天。天蝎座天秤是吧,行吧,有有天蝎是吧。啊,就就差不多意思一下吧,啊,这个星座,反正这个有些人还是蛮有蛮有研究的啊,以前这个以前这个有一个有一个老师啊,那个老师他会这个占星术。
16:03
他根据两个人的,他根据这个两个明星啊,这这个根据两个明星夫妻的这个这个星座能够算出他们这个什么时候离婚啊。还是蛮准的啊,后来发现不对啊,后来发现这个好像是明星就都离婚是吧。这个很很少说啊,也有一些这个明星夫妻确实蛮好的是吧,但是好像大部分这个都都离婚概率蛮高的。好,这个叫星座。好了。我们来看一下效果。你看这边就有星座。就这样吧。那咱们还有一个叫备注吗。备注,我们再写一下。备注呢叫多行文母框叫text area。这叫多行文本框。啊,叫text area,同样的道理,这边我们也得写个,比如说叫mark。就这样子。
17:01
好,所以呢,我们来看一下,你看它就多行文模框是吧。那默认的情况下,它只有两行。啊,这边字符我忘记是多少个了啊,一个两个三个四个五个六个七个八个九个十个,估计差不多20左右是吧。21或者22差不多啊,反正但是这个没有什么实际意义啊。那我可不可以去改变它,这个呢,是可以改变的,比如说入。默认显示四行。卡默认显示50个字符,能看得懂吗?好再运行一下,你看这不就变大了吗?是吧,这就备注就这样子。当然你一个注册页面,你这个信息让别人全填好了,最后你却没有给人家提交按钮,这个还是比较郁闷的是吧,应该不会出现这样的情况啊,所以最后我们要给他一个叫提交按钮。啊,咱们这边还是换一行啊B要换行。然后呢,咱们写个input。Type等于submit。Value。Value,咱们写个叫注册。
18:00
就这样子。我们看一下,你看它就多了一个注册按钮。我们点这个注册按钮,其实它是可以提交的,我一点击这个页面是有一些刷新的。哎,对的,咱们一个同学问了一个很关键的问题,刚才同学说踢到哪里去了。啊,踢到哪里去呢?我还没写呢。在这个form表单上面。我们有两个属性,哎,咱们这同学问的问题问的很及时啊,这个没有提前约好啊,啊这个不是托啊。Form标签我们写一下。Action。Action表示,我发送了目的地。比如说我发给零四.html这是可以的。啊,将来我就让这玩意儿去帮我去处理我的注册嘛,那我让这个资源他不一定是HTML了,有可能是其他的组件嘛。是吧,比如说我们写的是Java的一个组件嘛,这个Java的组件能够第一步帮我们收集这些信息,第二步帮我们保存的数据库,第三步再告诉你注册成功了,是这意思吧,啊,总之这边是发的一个目的地。
19:02
就是这样的,那现在这个代码零四呢,我先简单的把它写一下。CTRLCCTRLV04。咱们暂时先意思一下啊,就给他一个一就可以了。一。注册成功。一。那这个注册成功呢,咱们最好把它改成红色的字啊,看吧,这个标签也不用啊,大家不用去掌握。只是咱们现在没有讲CSS,我只能这么句写啊,这个缝的标签也淘汰了啊。那行啊,现在呢,现在呢,我这个再运行一下,我再点这个注册,哎,他就能给我跳到注册成功页面了。啊,就是这样的,这叫提交按钮,你要注意我写的这个按钮叫submit。表示带有提交功能的。我们的按钮呢,总总共有三个,还有另外两个,我也给他写一下input。Type等于reset。
20:01
Value,这个叫重置。注意啊,重置不是清空。重置是恢复到这个页面的默认状态。这叫重置。还有一个是普通的按钮,咱们顺便也把它说一下。But。啊,这是一个普通按钮。好,那普通按老师,普通按钮有什么作用呢?不着急,我们会用到的,放心好了啊,Type等于button,这表示这是普通按钮,Type等于reset,表示这是一个重置按钮。重置指的是恢复到页面的默认状态,不是清空,比如说昵称我随便选一个,这边我随便选一个,这边选一个。好,我点一下重置,它是不是恢复到默认状态啊,轻功是不是这里面数据应该也要清掉啊,他不是轻功,他是重置啊。这个是叫action。表示当我点击提交按钮的时候,发给某某某组件是吧,再来它还有一个属性。
21:00
还有一个属性叫method method咱们有两个选项值,一般情况下我们的表单,我们的发送方式是post。啊,我们的发送方式是post。那我现在把它删掉。我们来看一下啊。这边昵称我写一个Jim。我的银行卡密码。然后。男爱好。篮球足球星座选个天秤备注。我的地盘我做主,好,就这样吧,好,我点一下注册。啊,我不是底盘是吧,我的地盘啊。点一下注册,我一点就注册,是不是注册成功了,但是刚刚那个密码是不是我不想让大家看到。请大家看这。04H问号,诶,问号这个字有点小啊,等于Jim password,你看。是不是有了呀,接等是不是你选择这些信息是不是全绑定在后面去了。
22:05
这种方式我们叫get的发送方式,就是method等于get。啊,这个叫表单的发送方式。叫get方式,Get方式你看一下,全部都堆在这个地址栏了。第一,不安全。对吧,信息全能看到,第一个是不安全,第二个这个地址南啊,它是有长度限制的同学们。我印象中这个长度应该是2KB。假设你出的内容很多的话,超过2KB是不是就不行了呀?啊,所以说这个get方式呢,一般情况下我们这个表单啊,我们不要去用这个get方式,我们还有一个方式叫post。如果是post这个方式,我们再运行。啊,我随便写一个。好,我点注册,你看一下,我一点就注册,后面有内容吗。他就没有内容。哎,就是这样的。所以呢,我们这个表单啊,一般情况下我们会使用post方式。
23:02
当然了,我们HTTP发送请求的方式,除了这两个之外,还有其他六个。啊,当然了,默认情况下,我们HTTP下面它只支持这两个。其他的六个方式呢,我们等我们后面学到框架的时候,我们可以去再用其他的方式再再去发送。啊,暂时大家只要知道一下有get和post。还有最后一个小的知识点。我们的性别这边有两个。假设我想默认选中铝。我想默认选中。那默认选中我们在这边我们写一个叫check。等于。Check。这个就表示选中,我们运行一下,你看是不是啊,默认铝就被选中了。然后。当属性名,这叫属性名。等号后面这个叫属性值。当属性名和属性值相同的时候,等于属性值可以省略。
24:03
直接写成check。能看懂吗?同学们直接写一个checked就可以了。再来。爱好这个东西啊,你有三个,比如说咱们默认选中足球和地球吧。所以我也在这边写一个check,等于check的,那我就只写一个属性名。这也是一样的。check等于check的。再来看一下啊。运行一下,你看是不是足球和地球末日学中了。星座,星座里面这个地方我们注意一下。请问一下同学们,假设我选择金牛座的时候,发送给伏击的值是什么呢?啊,这边我们少了一个属性叫value。比如说白羊座默认是1CTRLC。我把它把它写进去。好了,12345。那当我选择金牛座的时候,发给服务器的是一个数字二,能听懂吗?我们页面上看到的是汉字,实际上发给服务器的是一个数字。
25:06
那默认情况下,我也想选中金牛座selected。等于selected。那你猜一下呗,这个等于谁来,能不能省略啊?可以的,省掉,就这样子。那你运行一下,你看它默认就是金牛座。行吧,同学们就是这样,嗯。好了,这个叫默认值啊,默认选中的一些值。好,这是我们的一个叫form表单。啊,我就把它说完了,那最后一步,最后一步啊,我刚刚和大家说的。我们可以就是说这是个表单,他能帮我们把这些数据发给服务器吗?啊,所以呢,我们要让他看一下啊。稍等一下啊,虽然说咱们现在还没有学服务器。我用浏览器打开啊,稍等我一下,然后我右键右键有个检查,检查之后有个叫network。我这试试啊。
26:01
好,这个把它关掉。然后呢,我这边输内容,我输个G,然后呢密码。性别,男,篮球,足球,地球金牛座。OK。那行吧,我这边点一个注册,我一点击注册,这边就给我发了个请求。给demo04.html发请求了点一下,点一下它之后,我在这边能看到一些信息。我是可以看到一些信息的。啊,他会给我发一些请求信息,然后下面有个叫form data。你看一下form nickname冒号,Jim password 999888ma前面这个冒号前面是啥。幕后前面是不是就是那。哎,这就是我刚刚所说的,同学们,这个name属性不能丢。行吗?同学们来,我故意把它name去掉。我把这昵称的name属性去掉了,看到了吗,同学们。咱们刚才是有的啊,刚才咱们有的时候它出现一个叫nickname啊,稍等一下啊,就被我关掉了是吧,稍等一下。
27:05
打开。右键检查。然后找到那个work行,现在我再输入abcd,昵称叫abcd,密码叫123来,好,全部选中。好,我点击注册。行,他给我发了个请求,请大家再看一下form data里面有nickname吗?没有吧,他是没有那个name的,因此这个name属性你不能少。啊,Name属性不要少了啊。下面呢,我们把这些内容简单的小结一下。回到这边来。Input type等于text表示五框,Input type等于password表示的是密码框。再来。Input。Time等于radio。它表示单选按钮。需要注意的是,需要注意的是name属性值保持一致。
28:05
这样才会有互斥的效果是吧,同学们才会有互斥的效果,然后呢,我们可以通过check。可以通过check的。切的属性设置默认选中。默认选中的项是吧,同学们。再来input type等于radio。咱们还有一个叫check box。它表示的是复选框。没错吧,表示副选框。啊,那么它也是可以通过check的属性来设置默认选项值。Name属性,属性值建议保持一致啊。建议保持一致,这样将来我们服务器端获取值的时候,获取值的时候获取的是一个数组。啊,获取的是一个数组。它也是可以通过check的属性设置默认值的,不写了啊。
29:00
再来下面一个,我们用的是select。Select表示下拉列表。每一个选项。每一个选项啊是option。啊,其中value属性,Value属性是发送给服务器的值,是不是同学们。啊,然后呢,Selected。表示默认选中。好,就这样子啊,表示默认选中的项,这是我们下的列表。再来。我们有单选按钮,有复用框。以下的列表咱们还有个备注,叫text area。Text area。表示多行文本框啊,其实也就是啊,或者叫啊或者。或者称之为文本域。啊,表示多文本框,叫text area。那它不需要有value属性,你要注意这个text area内部这个地方,你看我没有加空格,如果我这边一敲回车,那你注意同学们要注意一下这个text area它是有value值的,它的value值就是这个值。
30:10
来,我来给大家演示一下,CTRL加B回到这里面去,你看我选中看到了吗。是一个选中部分的,所以这个text area你不要轻易的去换行啊。这叫tax area。他表示,多行文本框。啊,它的Y值。它的value值。就是。开始。啊,结束标签。标签之间的内容。就这样的啊,这就它的value值叫text area。然后input type等于submit。表示提交按钮。Input type等于reset。表示重置按钮是吧?Input type等于button。表示。普通按钮。好,就这样子。
31:03
这是我们所说的叫form表单。
我来说两句