00:00
啊,我们继续来上课,那这节课呢,我们再来看一下我们HTML的表单相关的标签啊,那么表单什么是表单呢?咱们比如说上这个银行啊,我们去办一张银行卡,那么这个大行经理给我们一张这个单,对吧,我们去填填什么,填姓名啊,填身份证号啊,对吧?那么让我们输入这些内容,那么这一块内容就是什么呢?就是表单啊,这一块就是表单,那么我们在浏览器里边哪一块是表单,在浏览器里面只要我们的输入内容地方都是表单,比如说我们再来看啊。这里面。呃,好,比如这块对吧,你看在这块在搜索的地方,我是不是可以搜索内容啊,对吧,比如说我想搜索什么,搜索帅哥。帅哥。对吧,或者搜索美女,就这里面只要能输入内容对吧?哎,也就是说整个浏览器里面能输入内容地方都属于什么,都属于我们form表单的范围对吧?包括我们注册登录,那么注册登录我一点击注册一点击登录,比如说在这里面看吧,啊在这里边你看这是不是可以输入内容啊,哎,这属于我们的表单地方对吧?这是不是都是包括这里边我是不是可以选择我按用户ID,按邮箱对吧?按注册IP,按昵称。
01:08
对不对,哎,包括这里边还有什么用户组啊游客,你看这些是不是都是可以选择的,哎,只要是这样的都属于我们的表单,H条码表单啊,那么H条码表单一般分三种类型,其实在这里边我们都能看出来啊,那么哪三种类型呢?第一种类型,这叫什么输入型的。对吧,这种呢叫做选择型的,那么选择型的有两种情况,一种是这种的,还有什么,还有多选跟复选,比如说这种这啊。是多血了。对吧。哎,这就是复选框,那么还有单选的啊,单选一般按照性别来单选,对吧,你是男啊是女啊这种单选的啊,那么另外呢,还有一种分类什么呢?就是我们的点击型,你想这个搜索它就是一个点击型,我一点击搜索,他开的话帮我进行搜索对吧?哎,这就是一个点击型的表单啊,这就是咱们诶下面的表单内容,也就是说整个在浏览器里边,我们能去做交互的,能去做交互跟什么跟我们这个服务器端能去在做交互的东西,都属于我们表单的范围内。
02:09
能明白吧,那现在咱们来看一下,我们怎么去写这个表单呢?比如说啊,我们就写一个最简单的,咱们来看站点首页这里边,站点首页这里边是不是有一个登录啊,来登录就是最简单的,对吧?需要什么用户名对吧,需要什么密码诶。那输入完以后,你点击登录是不是就可以了,对吧,包括注册这里边也一样,它也是一堆表单。对不对,然后这里边还有一个什么,还有一个这么玩意,一个这叫什么,这叫复选对吧,可以选择也可以干嘛勾选掉啊叫复选框,那OK,咱们来看一下这个表单是怎么来实现的,在这里面一样,我们新建一个HTML的文件。叫做12啊,叫做表单。相关标签啊。
03:04
啊,表的结标签,然后呢,在这里面咱们说了,我要想在这里面去出编写表单啊,我必须要写一份表单,标签叫做什么?叫做form FM。结束的FM啊,这个form标签就是用于为用户输入去创建H条码表单,那么光写它就完事了吗?不是对吧,我们也看到了表单还有很多种类型的,对吧?有什么输入型的呀,有选择型的呀,还有什么呀,还有点击型的对不对?所以在这里边我们光写了它肯定还不够啊,我们这里边还要干嘛呢?还要去配合这个另外的一个标签叫什么呢?叫做引铺的标签,隐铺的标签,隐铺的标签就是为用户定义需要使用的表单项啊,需要使用的表单项,那么咱们来看啊,这里面我就光给了这两个东西啊,最终我们能出现什么效果?来,你看是不是有个内容了,看到了吧。是不是可以输入了,哎,现在我在浏览器里面可以输入了,那输入完以后我是不是可以点击这个提交啊,对吧?那我们先看一下提交按钮,提交按钮也依然是什么input,但是呢,这个时候你要指定它的类型了,Type类型,类型为什么呢?We代表什么?代表了提交啊,代表提交好了,那现在我就写到这些,这个时候我们再来看一下,来你看是不是有个提交啊,对吧?提交按钮啊,有个提交按钮,那么好了,那我不想让它提交,比如我想让变成登录怎么办?那我这里边value用值来干嘛呀,用这个Y6属性来区分它的显示,比如这块我显示叫什么登录,哎,更改它的这个默认值,那你看这个时候我们再来刷新。
04:32
来是变成登录了对不对,那比如说这里边登录一来再来刷新是不是登录一啊对不对,哎,也就是说这里边我可以用什么用type来控制这个引铺的类型,用value来做它的默认显示,没错吧?哎,然后呢,再来。你看啊,比如这里边一样,刚才我们看的是一个普通文本域对吧,那我这里边直接给他一个test,然后提示,比如说提示这块叫什么用户名。诶用户名,然后后面我给他一个换行BR。
05:02
BR对吧,那现在我们来看啊,在这里边再来刷新,你看用户名到什么后面你们写用户名了对吧?当然这个里边是不是也可以做提示啊,那这里边要做提示的话,我是不是就可以给默认值对吧?等于什么呢?等于叫请您输入用户名。好,现在我们再来看找你,诶请您输入用户名对吧,然后我点击过来之后,我给他删掉,删掉以后我这里边比如用户名我的我是不是就输入进来了。哎,输入进来一点就登录,登录以后我是不是要把这个数据提交到服务器端呢?对不对,那怎么才能提交呢?看好了,现在我一点击登录有提交吗?没有对吧,我们也看不到任何的效果,那么怎么样才能提交,我们需要去在form里面配合两个属性,一个叫做action属性sat啊,它是表示什么意思,表示浏览者输入数据被传送到的地方啊,一般都传送到服务器里面的某一个页面,对吧?比如服务器端我们会未来会运行什么运营PP脚本,对吧?那比如说这里边我传一个叫什么X的PP,对吧?就是这个意思啊,一般都是传送到一个PP页面,那么我如果不写就代表传输,传输什么,传送到当前页面,那现在你来看。
06:08
在这里边啊,我再刷新一下,刷新完之后我来一个额的命诶。Admn点击登录。有效果吗?好像也没有看到对吧,为什么没有看到呢?因为是这样的,我提交我这块什么都不写,是不是相当于提交到本页了,对吧?注意这里边什么都不写,就是提交到本页,或者你给个井号都是提交到什么,提交到本页,但是为什么我的这个一直都不能提交呢?是原因是在这儿你看好了啊,我这边给个井号也没问题的,原因是你提交的是谁,你提交的这个东西他没有一个名字来接收啊,所以在这里边我们必须要给他干嘛定义一个名称,内部名称。啊,随便可以写,比如说我们这里面是用户名对吧,那用户名比如我叫username username啊好了,那现在我们再回来看。同样再刷新一下啊,刷新完以后,在这里边我们来输入A的me,好点击登录,你看拿没拿到user等于A的me拿没拿到拿到了吧,哎,那一样,这里边我给的是井号对吧?所以它的地址最后有个井号,我把井号删掉,现在咱们再来看啊,这里边这些东西都不要回来了,来这是默认显示这个页面对吧?然后我输入我的密再点击。
07:18
登录你看是不是问号开始传参,Username等于a me,那么咱们通过这种方式,通过浏览器地址栏的方式的传参是什么?传参是不是盖的方式传三了对不对?那么咱们说了能不能换一种方式呢?你看你想一想,比如说我做一个用户登录啊,来再来个密码。密码,那么密码的话,我们肯定要给什么给他的密码域对吧,那密码域的话我们用什么呢?用这个依然是input type等于什么呀?PSSWRD密码域,密码域有个特点什么密码域不是明文的对吧,你不可能像输入用户名的时候,你输入个me。它给你显示这个东西对吧,那显示让别人从你电脑前一一路过,是不是就看到你的用户名和密码对吧?用户名给他看没问题,密码一定是什么安全的,不给他看的对不对?所以密码我们输入任何内容都会以什么以点的方式来显示,所以我们需要使用吗?使用password,然后同样就会给他起个名叫做PWD,然后value value的话我还需要给他什么呢?还需要给他默认值吗?没有吧,呃,密码里边一般不需要输入这个默认值,所以我就给个空的单位就可以了啊,然后这里面它是一个单标签,所以我们加上什么,加上它的结束符啊,好了,那现在密码这里边也一样,我给他一个B的法啊。
08:28
B2括号,好了,这个时候我们再来看整理。诶告诉我密码对吧,那密码这里边也一样,我比如说你看我输入个的密,你看输入完是不是都是以实心的点来显示的,那现在你看好了啊,用户名的密密码,诶错了啊ADMN密码ADMN来点击登录,登录完以后这个时候你看是不是问号U内传了一个ad me,并且密码PWD是不是也传了一个ad密。那这个时候你是把你的用户名和密码都暴露在浏览器里面来了,对不对,那是不是不安全呢?哎,所以大家记住啊,用户输入的内容,凡是跟用户相关的,一定要干嘛呢?一定要安全啊,那安全的话我就不能用钙的方式传输了,我就需要用什么呢?用一个。
09:08
隐藏的方式叫什么呢?Method来控制它的方式啊,默认为get。再来刷新,你看好了,最后换了啊,换成什么呢?换成大熊密码变成熊大,然后点击登录。来你看U那变成大熊了,PW变成熊大了,对吧?哎,默认我如果不写呢,它是get,写了呢,也可以指定get的对吧?还有另外一种方式什么呢?就是POSPOS的方式呢,是隐藏传输啊,那这个时候我们再来看POS的方式传是什么样的啊来这里边我们给他一个ADMM,然后来一个这个大熊嘛,密码是大熊啊点击登录来你看。有显示吧,没有了吧,我是不是已经提交走了对吧,你看再来IDMN密码大熊点击登录。是不是没有任何效果了,哎,这个时候它就不会通过浏览器传输了,对吧,而是什么隐藏传输了,那是不是就相当于安全了,对不对?哎,所以这里边我们传输方式有两种,一种是get,一种是posts get的方式呢,传递的数据量较少,但是传递信息会显示到浏览器上,对吧?而这个POS的方式呢,它传递的信息量会多,但是呢,它的信息不会显示到浏览器上啊,这是他们两个的区别啊。
10:15
好,那么接下来咱们再来看,那这里边在input的这个标签里边,我们还有三个属性,一个是type,一个是name,一个是value,对吧?Type属性指定的什么,只代表的是一个输入域的显示方式,对吧?你是选择是输入型的还是选择型的,还是点击型的啊,我这里边用了什么?用了两个输入型的,一个点击型的,没错吧?然后后面还有跟着什么,跟了一个name和一个value name代表什么呢?代表该表单的名称啊,所以大家记住,只要你把表单项写了,这个名称你必须要写,如果你不写名称,我们在服务器端,就是未来在服务器端是接收不到这个值的啊,然后这个value呢,就是什么?就是表单项的值,如果我不给代表表单项没有值,对不对?那需要用户输入,如果我给了,也就是说表单项会显示默认值。明白明白吧,那这里边我们改成get啊,咱们再来测试一下,来刷新你看啊,因为因为谁啊,因为这个用户名里边我是不是给了一个默认的value,对吗?那在这里边我只给个密码叫A的me,当我一点击登录的时候,来你看user name等于什么,是不是等于请您输入用户名,而PWD的什么等于a me看懂了吧?哎,也就是说只要我给了这个value,如果你写了用你的,如果你没写,是不是用我自己默认的这个了。
11:21
对不对?哎,这就是咱们的这个这三个属性啊,那么一样在笔记里边,我给大家也记得这三这几个属性了,你看这里边啊,必须的属性,一个X,一个method X是表示浏览者输入数据被传输到地方,比如一个PP页面对吧?Method呢是数据传输的方式,那么有两种方式,Get的方式,这个传递数据量较少,对吧?但传递信息会显示在网址上,而post的方式呢,传递信息多,而且不会把传递的信息显示在网址上啊,这就是他们两个,然后呢,在这里边input这里边有什么?有name value type对吧?Name是为表单项定义名称,Value呢是为表单项定义值,Type呢是代表一个输域的显示方式,你是输入型的还是选择型的,还是点击型的啊?那现在我们介绍了两个输入型的,一个test的,一个password,对吧,那么接下来我们再进入一个选择型的。
12:08
叫什么呢?叫做re跟这一个是单选,一个是什么复选。得了,比如说用户名密码输入完了,那是不是可能我让你选择个性别对吧,比如说这里边我们来个性别。性别啊,那性别,那input type type等于什么?A错了啊。等于ideal radio啊,然后name,比如说等于。然后Y6等于,比如等于一个。零吧啊,那我这块用女来表示吧,先是女士优先嘛,对不对,那这里话外面写个女是吧,然后再来引出还叫I do。然后name等于难,然后这块叫做value等于一,然后这块叫难。男好了,我做了一个男一个女,对吧,然后同样我还可以做一个保密input ideal。这块叫做保密啊,然后Y叫做什么呢?叫做二,然后保密,OK,那现在咱们再来看啊,好了,最后性别完事以后,我们给他一个B换行啊。
13:11
BR换行来吧,这里面我们再来刷新。小心哎,你看性别是不是有了,有了以后,比如现在注册个用户啊,注册用户谁注册大熊,然后密码选择,比如说也叫大熊了,然后性别呢,我选择个女,哎选错了,我选男。那你看这个时候是不是就有问题了,你看我又选错了,我选保密,你看三个都亮了,我再点点点点点能取消吗?是不是不能。对吧,那这样的话并没有我们实现我们单选的意义吧,对吧,我们单选什么效果,如果当年我选择女了,那其他他两个都是灭了,对吧,如果我选择男的,那这两个就是灭了,是不是这个意思?哎,所以大家记住我们再去用这个单选的时候,它有一个要求,什么要求呢?要求是这个内幕名称必须一致才会产生排斥,所以我给它都改成叫six,是不是性别呀,哎,都叫six,看三个都叫six了啊,这个时候我们再回来刷新。
14:05
好了,那这里边继续比如说。还是一样大熊,然后密码了,我们给他一个这个123吧啊,然后好选择性别,选择女,哎我选择错了,再选男,你看女是不明对吧,男我选择偶我不想要保密,那你看男是不是也灭了对吧?那这个时候我是不是就实现了选择一个了对吧?那选择一个你怎么知道选择的是谁呢?我知道选择是谁呀,你看我们是不是用Y6来区分了,如果提交的是零代表是女,提交的是一代表是男,交二是不是就代表保密了,所以这里边你看我当点击登录的时候,你看我six等于几是不是等于一,等于一是不是代表刚才我选的是南的。对不对?哎,所以我们用什么用值来去区分不同的选项,而这个内幕名称我们一定要保持什么保持一致啊,所以在这里面大家一定要注意,要想产生排斥内幕明必须一致啊。那么另外在这里面还有个问题,什么问题呢?你看啊刷新,比如说我选择女,你看选它是不亮的,我只能点这个点才让你亮,看到了吗?那我能不能说我点这个文字也让你亮呢?可以,那么我们可以用什么呢?用LA标签来绑定这个标注,怎么绑定,直接拿LA把整个这个标签括起来。
15:15
啊,标签加文字都括起来,LA开始结束的LA啊,整个把这个女都括起来,看到吗?把这个引put和这个女都括起来了,都括起来以后,这个时候咱们来看啊,我再来刷新,刷新完以后你看我点男是不好使了,对吧?但是我把鼠标放女,这点女,你看点女的时候这个点是不是也亮了,对吧?但点男行吗?不行。对吧?哎,这就是绑定标注的意思啊,我们用LA专门是为input元素定义标注的啊。这里面我们写个注释。引的元素。定义标注啊好了,那我这是一种定义方式,我还能怎么定义呢?我还可以这么定义看好了,比如我把这个难单独的用。
16:07
括起来结束的LA好了,然后用LA括起来以后,那接下来是不是得要他们两个关联才行啊,对吧?所以在这里边我定义一个for,比如说这个my six好吧,然后在这里边我通过什么的ID进行关联,关联谁了MY,那这个时候这两个就进行了关联,那么关联完以后,那他们两个就可以去使用了,那咱们来看是不是这样的啊,刷新这个时候我点女,点女这个文字可以了,那你看所点男是不是也可以了,点点女点男是不是可以,那保密行吗?保密还不行对吧,保密需要怎么办?我怎么还需要再去干嘛绑定一下标注啊对吧,那在这里边一样,我还是LA,然后放一个,比如说我再来一个什么呢?来一个这个呃。保密吧啊。然后结束的LA对吧,那在这里边我们需要通过一个属性叫什么属性,ID属性来去定义它,对吧?ID等于等于什么,等于保密好了,那现在我们再来看保密是不是也可以了啊在点击保密没问题,男没问题,女也没问题,对吧?哎,但是有的时候呢,我们刷新这个页面的时候啊,在这里边一刷新页面进来以后,默认人家就是给咱选中的是女对不对,诶默认要想默认选中,那怎么办?在这里边我可以给这个女,这里边女在哪呢?女在这呢,对吧?给这个女里面多加一个属性是什么属性呢?叫做ch take就干嘛了,默认选中的,你当前take在哪哪就是默认选中来,你看再来刷新。
17:33
你看女说末日神重的对不对,那如果说我把这个气剪切掉,放到男的里边来呢,放到男的这条信息里边,那这个时候你再来看。再来刷新默认选中是不是就难了,对不对,哎,这就是咱们这的属性默认选中了啊好了。那我们来看那这些单选的,我们知道那单选完是不是还有复选的,复选这里边比如说我们做一个什么呢?做一个爱好。爱好对吧,你都爱好哪些input啊,复选的这个类型叫做heck take box啊,叫复选,同样我定义一个名称,比如说ho ho,然后呢,这里边是。
18:09
我就随便给他给零。比如说爱好吃。然后爱好。呵。爱好玩儿。吃喝玩学。好了,然后这里边区分值就是0123呗,对吧,那最后完事以后我再给他一个B啊。BR好了,现在来刷新,你看这里边我们会多了一个爱好对吧,多了一个爱好一样,现在我点吃是不行的,因为我没绑没绑定我只能点前面的对吧,我爱好吃,爱好喝,爱好学是不是选了三个对吧?然后用户名比如说来个大熊,然后密码呢,也来个大熊男对吧?然后这个里边也点了点击登录,登录完以后你看我的爱好啊,这个唯一以后爱好ho呗等于零,并且号呗等于一,并且号呗等于三,是不是拿了三个ho呗对吧?那这样的情况下,我们在服务器端接收的时候是接收不到的。
19:03
啊,会接收不到,所以对于爱好他这种多选的东西,我们有个要求,什么要求呢?就在这个内幕名称之后,你必须给我加一个中括号。必须加一个中括号啊,那加了个中括号以后又会什么效果呢?咱们再来看。比如说这里边我们一样给他来个D密密码大熊男对吧,然后爱好吃,爱好玩,爱好学,然后这里边点击登录来,你看这个时候啊,这个时候你看跟刚才就不一样了,对吧?然后hobby这里边其实是一个中国号,然后等于零,并且hobby中国号的二还有hobby中国号的三是这个意思啊,因为它这是一组数据对吧?一组数据我们要接收的时候,也要以一组数据来接收,所以它有个要求就是后面必须给我加上中括号啊,所以大家记住,只要我们做复选的时候,后面一定要加上什么,加上中括号就可以了啊,那么等到后期我们讲到服务器端语言的时候,我会给大家来去接触这个值,那么这个时候大家就知道到底是什么意思啊,所以现在你只需要给我死记住这块要写就叫加中括号就可以了啊,这是咱们的复选框,那么一样复选框怎么默认选中呢?也可以啊,你想让谁默认选中,我就在谁上加take。
20:11
对吧,比如说我在河边学加这个的,那这个时候你看再来刷新这两个是不是就是默认选中的。对不对,哎,同样这里边我也可以干嘛用LA包签去定义标注啊,比如说在这里边我定一个ID等于吃对吧,然后这里边lab结束的LA。然后呢,在这块通过放来去绑定,绑定什么呢?绑定这个吃,那现在咱们再来看啊,我再来刷新,刷新完以后你看我鼠标放到吃上,你看是不就变化了,看到了吧?哎,所谓的复选点击一次选中对吧,再点一次取消,看到了吧?哎,这就是咱们复选的效果啊,这咱复选的效果啊好了,这是咱们复选框,那么一样,复选框里边也需要用什么用这个take的进行什么,进行默认选中啊进行默认选中,那么同样这里边有个问题,那单选你看复选框里边用了两个这个都能做默认选中,那单选框行吗?就单选框我在保密,这里边也给个这个的,能不能两个都做默认选中呢?咱们来看再来刷新。
21:10
算计好了,你看跟谁了,这变成最后一个桌面选中了,哎,就是你前面虽然有,但是在我这里边不起作用,它会干嘛呢?它会覆盖它,而在这里边会嘛,这里边不会啊,因为他本身就是多选的,所以他不会,而这种单选的,那后面的这个这个的会覆盖前面的这个啊,所以你前面给再多这个的都没用,它最后只以最后一个为例,所以这里边给多了就没有用了,就只给一个。啊,只给一个就可以了啊,这是咱们的单选和复选啊,好了,那咱们来把这些内容看一下,在笔记里边啊。一个是I Bo单选对吧,一个是take是复选,然后这里边level是为这个input元素定义标注的,对吧?那么如何标注呢?两种方式啊定义。标注。
22:01
方式一,干嘛。直接将。直接使用LA标签将什么呀,将这个input元素。及。文字信息包含在一起是不是就可以了?哎,这种方式呢,只是简单的为了包标标注在一起去用的啊,那么另外呢,第一件事干嘛呢?在input标签中定义ID属性对吧?属性值任意。自定义啊,然后在标签中定义for。For属性对吧,属性值。属性值属性值属性值是不是指定。Input的ID属性值即可实现关联吧,哎,这种方式还是用的比较多的啊。
23:02
啊,比较常用比较常用啊,为什么呢?因为我们CSS好控制这样的效果啊,如果你用LA去包含里面的CSS方法来控制啊。好了,这就是咱们LA标签,那么另外呢,这里边咱说了可以通过take的做默认选中对吧,那咱们看常用的属性,这里边我也有写,这里边有写take的嘛。没有。没有是吧,那OK,那我就直接在这写了啊,那这里边常用的属性啊,让。筛选。或者复选。做默认选中。可以加什么呀?加单属性ch he c KB啊,这是不是一个单属性啊,对不对,你只需要让谁选中的时候,你直接加上它就可以了,对不对,不需要等于任何东西啊,这就是咱们的单选跟咱们的复选好了,那这块完成以后再往下我们再看什么呢?看这个文件上传六啊,那在这里边比如说。嗯。
24:00
来要求你上传的头像对吧,那input。派等于H了。等于F对吧,然后name,比如说头像嘛,我叫pic了啊,Value没有值对吧,那OK。给他一个B啊,也就是说在现在这个阶段,你写的每一个音input的标,这个表单啊,这个标签你必须给我加什么,加上Y流跟name啊,就算Y6跟内你不用,你要给我写上名,写成值啊,那没有的话,比如像这种Y6没有没有,你要把这个属性给我写上,让它等于空啊,现在这个阶段你必须要给我这么去写啊。当练习了啊好了,那这个时候我们来看。刷新来,你看头像,这不刚选择文件,那选一个吗?打开选择文件一点,你看会直接我打开选择文件了,对吧,选择这张头像,那你看是不是选择了,对吧?当然我们一点击提交的时候,在这里面点击这个提交的时候,他会把这些信息都提交到哪,提交到服务器端,我们服务器端需要干嘛,需要做相应的处理啊,需要做相应的处理,所以我们光会这一个还不行,肯定还会服务器端才可以啊,但现在呢,我们就先记这个东西啊,先记这个东西。
25:14
那也就是说未来我们想做一张图片上传啊,或者是这个文件上传呢,是不是就得用到它了,对不对?哎,这就是我们的这个头像啊,那么一样在这里边我们可以跟一个什么呢?咱们在上传图片时是不是可以多选呢?对吧?现在你看我能多选吗?比如说在这里边啊,我选择123,我按住了CRTRL键了,已经啊,我摁住CTRL键L进行多选是不不行,只能选一个,对吧?所以在这里边我可以干嘛呢?通过一个属性叫做ul t multi play啊,它代表什么意思呢?代表的是复选的意思啊,多选的意思,那这个时候咱们再来看刷新啊,这里边选择。文件一样,我需要摁住CTRL键对吧,点1234好了,打开,打开以后告诉什么,是不是四个文件看到了吗?哎,也就是说当我设置这个属性以后,我就可以做什么做多文件的上传了,但是一样大家还要记住,如果是多文件上传,那这个后面必须要给的什么,给的中国号。
26:10
对不对,哎,这叫什么,这叫多图片上传啊。多个图片上传。对吧,那头像是什么样的头像呢?是长这个样子的BR。啊,头像咱就是一张图像对吧,一张头像是不是就一个图片了,所以我就直接引出的fair对吧?Pic啊或者叫做这个呃,ED。Piic吧啊hepic对吧,然后value等一个值,这就是咱们的单图片上传啊,那你看一样刷新单图片上传里边我只能什么只能选择一个对吧,选太多都多不了啊,而多图片上传里边呢,我按住CTRL键是不是就可以选择多个呀,对不对,打开。是不是就可以了,哎,这就是咱们的这个。文件上传表单啊。好,那我们这里边反过来记一下看好了,Fair等于name,在这里边我们也可以干嘛,叫做定义。
27:04
多图片。上传吧,多票上传的话,那需要重量第一件事干嘛呀,是不是在表单中添加允许多选。属性ul对吧,然后按住。键盘CTRLCTRL键啊,可以进行选择多个文件啊,好了,这是多选,那么要注意的是在做多选时,多选时啊名称。定义好后,必须在。后面跟中括号。中括号。中括号啊好了,这个是我们做多选需要注意了啊。那OK。那这些完成以后,我们再往下来,下面还有什么,还有我们的提交按钮,提交按钮我们用的什么,这个我们已经用过了,我就不再说了啊,那接下来还可以干嘛呢?我可以用图片代替提交按钮,也能做提交的效果,来咱们来看一下。
28:13
来在这块啊,我给他一个HR好,然后呢,在这里边我们就要。代替。提交按钮对吧,那这里边我们就是input,然后等于image,那type等于image,那等于image等于图片,我就需要干嘛给他地址对不对,给他地址,比如说当前目录以面积下边咱们有a.PPD对吧?那同样宽度我给变成什么100小一点对吧?那这个时候我们来看。刷新诶是不是张图片了,鼠标放在图片上是是变成小手了,变成小手了就能提交了吧,哎,就能点击了啊不能说提交了,那咱们来看能不能提交呢?比如在这里边你看啊用户名,我来个A的密密码大熊好了,别的什么都不选了,点击这个图片,点图片你看提没提交上来。
29:00
是不是也帮我提交上来了,对吧?哎,就点登录我能提交,点图片我能提交,因为什么?因为这个时候我是不是用图片来当这个按钮了,对不对,哎,同样这个out属性干嘛了,是不是当图片加载失败时,用于显示的文字信息,你看我说我给个AA啊,然后这里边变成提交,然后这个时候咱们再来看刷新。图片教验失败了,变成提交了,对吧,一点提交是不是也可以进行提交,你看好了,这里面咱们换一个。啊啊啊啊四个啊,我一点就提交,你看这个用户名这块是不是等于四个A了啊来。U name是不是等于4A是不是也提交了啊,这就是咱们这个图片提交啊。好,我给还回来啊。这块一样。当。图片加载失败时啊,用于显示的文字信息啊。好,它是一个单选。不者是一个单标签啊,标价回这个斜杠好了,那这个图片计算按钮完事以后我们再来看,还有什么呢?还有重置按钮啊,那input type类型为呃,Reet叫做从置。
30:01
那这里面直接写了写个重置啊,重置好,那么写了一个重置以后,当然内幕值我不需要啊,我就给个空,那这个时候咱们来看重置又是什么样效果啊,那在这里面点击刷新。来这块是不是有重置了,什么叫重置呢?你看好了,我这个时候输入额的密密码额的密对吧,我选择了你,原来我是爱好喝跟学,我变成了玩和知对吧,好了其他我不选择了啊,这个时候我点击重置,你看是不是还原到我表单初始的情况了。看到了吧,哎,这个是咱们的重置按钮的作用啊,比如说你选择了再多,那么当我一点击重置会初始化到什么,会还原到初始化的效果啊,就是表单的默认效果啊,这是什么呢?重置按钮啊,好了,那重置按钮完成以后,我们还有什么呢?还有隐藏域。隐藏域啊,什么叫隐藏域呢?咱们来看啊,在这里边。一样,我给一个BR。啊,这句话我还是写个注释吧,我就要写什么隐藏域啊,隐藏域,隐藏域那肯定就是隐藏的内容,对不对,所以这里边我可以干嘛隐藏的传输一些内容到服务器上,Hi dn啊,就内部名我给了一个什么呢?给他一个叫做hello。
31:12
啊,然后value等于什么呢?等于不告诉你,我不告诉你,我不告诉你,好来现在啊,咱们来看,当我刷新这个页面的时候,来点击刷新的时候,能看到这个这这个效果吗?没有对吧,但是好当我点击。登录的时候来。哈喽,是不是等于我不告诉你?看到了吗?是不是隐藏的传输一些内容到服务器端呢?哎,这就是隐藏域啊主要的作用。就是隐藏啊,传输一些内容到服务器端啊,当然你可以写一个,也可以写多个,对吧,我现在就写了一个,那比如说我需要传的不止一个,再来一个hid的,我还需要传什么呢?我还需要传word。对吧,Word等于什么呢?等于,哈哈哈,好了,是不是存了两条啊,哎,那就把这两个隐藏传输到服务器端了啊,这就咱们的隐藏域啊,那么在我们做第一个项目的时候,我们会。
32:11
用到很多次这个隐藏域的啊,用了很多次这个隐藏域了,好了,那再往下来还有一些,这再往下讲的这两个这几个按钮啊,按钮注意了解级别的就可以了,因为在现阶段我们用不上,到第二阶段我们去学习GS的时候才会用到啊第一个呢叫做什么呢叫做。这个input type等于b b button啊,Value等于等于一个值对吧,叫比如说叫普通。按钮它就是一个按钮,没有任何意义,它的作用只是让GS去给它干嘛,给GS提供一些服务,你看啊,我这里边来,我把这个表单还原,这些东西都删掉,什么都不要了,对吧,不要以后啊,现在咱们来看啊,我在这里边输入个内容,输入个什么呢?AAB,然后我点击普通按钮这里来走你走你来你看。有显示吗?有提交吗?没有吧,哎,也就是说这个普通按钮啊,没有任何意义,就是为了后期给谁啊,给GS使用的,明白吧,哎,让GS去加一些事件,一点击它可以通过这个事件来去处理一些东西啊,就是做这个用的,那么这个按钮可以这么写,也可以怎么写呢?我也可以写成这种形式,叫做引铺的标签,错了,是b done标签,Button标签结束的button,然后这里边我写成按钮。
33:26
普通按钮,哎,就是也可以给标签形式啊,普通按钮。好了,那么给标签形式以后,这里面依然需要指定它的type属性,等于什么呢?等于button啊,你依然需要指定type属于每button,这个时候咱们再来看这里边是不是又多了普通按钮,那么同样在这里边,我们给它来个a me啊,然后点击。这两个普通按钮随便点是不是都不会提交啊,哎,因为它没有任何意义啊,那如果这里边我不给他type又是什么效果呢?咱们来看啊,这里边BT。对吧,叫我是button标签做出来的内容。
34:03
好了,那咱们来看这里面再刷新,我是把标签就出来内容对,注意这个时候我没有指定它的type类型,对吧,如果没有指定它类型,这里面再来个me,你看我一点击走,你来你没有提交。是不是有提交啊,对吧,也就是说如果说我不用这种不用这个input的方式的方式,我用这种方式是不是也可以做提交啊。对吧,叫做。注意啊,BT的button标签如果没有指定,Type等于b button。对吧,那么这个时候他在这里边既。所以不能说记啊,那默认对吧,是什么呢?是提交按钮啊,默认是提交啊,也就是这里面的type属性会等于什么呢?默认情况下type属性是等于submit,当然我也可以给它设置,比如说在这里边咱们来看啊,CTRLCCTRLV,我再复制一个,这里边我来制作type等于SME,好了,那这个图我们再来刷新看看第二个这是一个对吧,然后这里边一样,我给它换一下啊,现在是我的密,对吧?来,来个大熊。
35:13
来点击这里,你看一点击是不是user name等于大熊看懂了吧?哎,这就是咱们这个button啊,那么一般常用的还是这个type等于submit啊,还要用的居多,但是这几种标签你必须要了解,你要知道才行啊,好了,那咱们回过来看一下这个笔记啊,那么这些标签呢,比较多,大家下来以后一定要多练习才可以啊,一定要多练习,你看这里边我已经说了,Type等于button,它就是个按钮,对不对,Button这是提交按钮,Type等于submit me也是提交按钮,对吧?然后这个这种写法呢,Type等于button,它就是一个普通按钮是吧?哎,好了,那再往下来还有什么呢?还有我们的多行文本输入域,以及我们的下拉列表,那我们把这几个都看完啊,咱们来看多行的输入义,那顾名思义就是可以一次性写多行的,对不对,那我一样,我再往下写了啊,在这块我们再写个什么呢?写一个描述。
36:05
和多行的数据比较特殊,是用a takes AA这个标签并不是用input做的啊,结束的A,然后在这里边我们需要给他指定name属性,比如叫con,对吧,内容嘛啊,然后呢,还可以指定什么,指定Rose,它有多少行,五行cos有多少列呢?比如50列。对吧,然后默认值写到这个标签中间叫请您输入描述内容,好,那这个时候我们来看。再来刷新。在这呢,对吧,我给他个换号啊。来一个。B、标签好进行换行。刷新刷新完以后,现在你看请您输入内容对吧,好了,我开始输入内容叫我。就是我不一样的烟火。烟火对吧,你看写完以后我点击提交,比如在这里面我点击用这个登录了,一点击登录来,你看我能不能拿到后面的,你看con等于什么,等于我就是我不一样的烟火是不是也提交过来了。
37:08
对不对?哎,这就多行文本输入率,那么刚才我们在做这个多行本数据时候,我说这里边是五行50列对吗?但是只能写五行内容吗?比如说这里面咱们来测试一下A这第一行。B第二行C3行D4行到E是不是五行啊,那我还能再写了吗?来看回车F是不是也能写,你看再往后随便写,看到了吧,哎,只是说他说这五行什么意思啊,他说五行是这个意思,你看AB回车BC对吧?E现在我没有回车,注意这边有垂直滚动条吗?没有对吧?来我再回车以后要写第六行的时候,是不是会出现垂直滚动条啊。对不对,哎,就是默认它会展示五行的内容,就是这个意思啊,当然我拖动它,我还可以放大缩小的看看到了吗?哎,我们也可以通过它来放大缩小看到吧,它会自动的,它会拖动看到了吧。哎,这是什么?这就是咱们的多行文本属于啊啊。
38:02
那么多哈顿输域啊,跟其他的略有不同对吧,它的这个内容默认的内容需要放到标签中间,它没有Y流属性啊,它没有Y流属性啊,这里边我写一个注意的啊,记得了我在笔记里面去写啊。读好注意,这里边注意注意。该标签没有value属性,对吧,可以设置属性属性以及cos属性。对吧,还可以设这些啊,好了,那多商分位数一完之,我们再来看最后一个,就是说在这个阶段啊,这只是HTML4里边的内容啊,不是HTL5里边,当然h hut5里边又增加了很多很多的样式和很多的标签啊,那么等到我们在第二阶段,我还会给大家再去讲这个标单啊,所以在第一个阶段我们只学最基本的,我们所学的这些内容够我们去写我们的第一个项目的就OK了啊,那是我们的入门项目,当我们把第一个入门项目做完以后,才算做入门啊,我们才能干嘛呢?进入更高深的课程来学习啊。好了,那再往下来我们开始去写一下,比如说这种这种下拉列表的,那就写一个什么呢?写一个婚否吧。
39:14
来混否对吧,然后secret不对,SE select啊选择了,那么选择这里边一样,在这里边你需要给他什么呢?给他一个内幕值对吧,比如说叫做婚否啊,那里边是不是就是每一个下拉列表的这个列表项啊,列表项我们需要通过open来去定义啊,这里边一样,Open里面去给它的默认值啊,比如说这个叫做单参。这块先不给干什么,给个open,然后这块我来个叫什么叫选择啊,杠杠杠杠,这块叫请选择是不选择啊,哎,如果单身呢,我比如说就像你为一,然后CTRLCVVVV对吧,还有单参。已婚。让你为二。然后三四我就给几个编号对吧,单身已婚,然后还有什么,还有离异,还有丧偶,好比如说我先给这四个啊,那现在咱们来看,我再返回到我的浏览器里边啊,这里边是不是多了一个下拉列表了,诶一点击你看是不是就可以选择了,对吧?比如选择已婚,那是不是已婚,选择这个上网是不是丧偶啊对吧?那么当我一剪辑登录的时候,来你看。
40:22
后来你看。婚否等于什么?等于四,四这个编号是谁呀?四的编号是不是就是上偶对吧?那如果说这里边咱们来看我把这个删掉了啊,把其中任意一个VALUE6删掉,这里边都可以不带VALUE6的啊,你都可以不带VALUE6,那么依然叫混否,最后我选择离一,因为离一里边没有VALUE6对吧?那咱们再来看它会什么效果啊,它能接收到什么值。把内容都删掉,删掉以后,现在咱们来看,在这里边我选择离对吧,选择离异以后一点击登录来,你看最后。这里边来,你看婚否等于什么呢?是不是等于离异了,哎,那么也就是说,如果。
41:01
这里面如果你设置了Y6属性,那将获取你Y6属性里边的这个值,如果你没有设置Y6属性呢,它是不是就获取这两个标签中间的内容啊,对不对?哎,这就是咱们的这个select跟open标签啊,也就是我们的下拉列表啊,那咱们来看一下在这里边一样,我下拉列表里边能不能做默认选中也可以,比如说我想要已婚,默认选中怎么办?我需要给他一个属性,什么属性呢?叫做。Selected select,当我设置完select这个属性以后,一样它也是一个单属性啊,那这个时候我们看再来回车以后,你看默认选择谁,是不是选择的是已婚的,看到没有,哎,这就是我们的桩默认选中的啊好了,那我们再返回来来看一下。在这里面select为下拉列表做默认选中对吧,那这里边我们给它加上来。
42:00
为下拉列表就默认选中,那这里边下拉列表里边需要定义什么啊定义。属性对吧,为什么呀,为下拉下拉。列表的名称对吧,而在这个里面呢,我们需要定义的什么?定义的是value属性。对吧,哎,该列表向的值对吧?如果没有定义Y6Y流属性,那么获取值,那么提交值的时候,那么。提交。值时会提交o open标签中间的。内容啊OK,这就是我们的下拉列表啊,好了,那这些看完以后我们再来看,这里边还有这些属性,对吧?那么这个属性我们已经介绍过了,Multi player干嘛呢?是不是就是在做我多文件上传的时候去做的,对吧?诶放到这里面来。啊,那么另外这几个还有什么呢?你看还有一个。
43:02
瑞的O磊干嘛呢?是输入域可以选择,但是无法修改,也就是说在有的时候我们是可以给用户去看,但是不能让用户去改的,现在这里面我是不是都能改对吧?比如说用户名这里边我不需要你改,那不需要你改怎么办?我们去找到。我的代码找到最顶上用户名字里边再说,这里是不是不需要你改呀,不需要你改好read同类就你只能读。对吧,你可以复制,你不能改啊,来刷新你看没有什么效果,对吧,但是我再往里边点点你看。好了啊,我是不是删也删不掉了,是不是获取不到光标了,哎,这个时候它变成什么,变成了只读属性了啊只读属性了,那么跟它对应的还有一个。对了,还有什么,还有一个disable disable什么,你看输入域无法获取焦点对吧?这个是输入域可以选择对吧,但是无法修改,这个是输入域无法获取焦点,无法选择以灰色显示啊,直接是禁用的状态,你看啊,比如说在这里边我再给大家设置一个,比如就在密码这里面设置一个Dis disc Dis好了,现在我们再来刷新,刷新完以后你看这里面是不是直接变成灰色,我连选择什么都选择不了了,这里边你看我是不是还能选择了啊,能选择了,但这个行吗?是不行了,哎,这就什么,这就是我们的这个disable属性啊。
44:20
那么另外这两个呢,还有两个对吧?这个弗Li,呃,这个place hoer呢,是我们在H5中执行新增的这个属性啊,但现在可以用啊,现在看第一个auto是干嘛呢?自动获取焦点属性什么意思?就是当我一进到这个页面以后,我让某一个可以可以可以干嘛?自动获取焦点,比如说用户名我让自动获取焦点啊,那这里边咱用户名里面就不要加read only了,对不对,用户名read only我都放到密码上了啊。刷新都在密码上了啊,用用户名这里边来,你看我现在是不是可以选择有光标了,对吧?有光标是不是可以删删除了对吧?那比如说我想当我一刷新这个页面过来以后,默认这块就有焦点了,对吧?那怎么做呢?那在这里边我就可以在它加这里边加一个auto,诶自动获取焦点属性,那这个时候咱们来看啊,我再来刷新。
45:08
你看一刷新完是不是就自己这里边是不是自己就有焦点了,看到没有,这里面你看再来刷新。是不是就交代了,哎,这就是咱们凹凸福高的属性,那么另外还有一个什么呢?叫做普号的p hob啊,普ho的属性干嘛呢?它的作用就是用来替换它的。啊,你注意啊,咱们这个比如说你像现在这里边我们做的什么,请您输入用户名,但是大家知道这只是一个提示对吧?那么这个时候我一点击,比如说我不输入,我一点击登录的时候,你看他是不是把这据内容提交到服务器端了,那提交过来我是不是还得判断了,对不对?哎,所以这里边我们如果单纯的就是用的做提示的话,我们可以干嘛呢?我们可以使用hoer。啊,普斯好德,它的作用就是用来替换value做默人提示了,来,我把这个提示内容放到这里边来,这个时候你再来看刷新,诶,你看变了就变成灰色了,对吧?这个时候你看我可以直接往里面写个A,我不需要删掉原来的内容了,对不对,直接写,如果把A删掉呢,你看这个提示又出来了,是不是比value的要好得多呀,如果是Y6的做默认提示的话,你看刷新。
46:11
复制一个出来啊,凹凸符号子不要了,嗯,这个叫优。嗯。也不要了。好了,把这段内容肯定S放到value里面啊,好,你看如果我用value做默认提示,下面是value做默认提示的啊,重新刷新。你看value做默认提示的话,我进来以后我输入内容,那是不是后面还都有,我需要干嘛,我是不是需要把这些都删掉才能输入内容啊,对不对?哎,而且内容删掉以后,默认Y里的值还会显示吗?不会对吧,但是用please hoer的呢,我给个A它就没有了,你看me,我把这个内容删掉,都删掉以后,这个提示是不是就出现了。看懂了吧,哎,这就是普斯hoer的作用,它的主要作用干嘛呢?就是用来代替value做默认显示的,并且它不会随着提交而去把内容提交,咱们来看啊,在这里边一样啊,我这个这个叫user对吧,这个叫user name对吧,这个我们还是看user内啊来我把表单。
47:07
初始化把这些东西都删掉啊,删掉以后咱们来看啊,我在下面给他一个。Me啊叫admin,然后我点击。登录。当我点击登录时候,你看user nameme等于什么等于空什么都没有对吧?并且user等于我是不是在下面写的额,上面是不是什么都没写对吧?什么都没写这个请您输入用户名这几个字会提交吗?不会吧,诶,所以他不会跟跟着什么跟着提交而去提交啊,这就是咱们的普斯ho的属性啊好了,咱们再来看下笔记,我们把这块补全一下啊普利斯homer属性对吧?主要的作用干嘛呢?作用。用于这个代替Y6。做。默认显示对吧,并且不会。随着提交数据而去提交。
48:03
来去提交啊好了,这就是我们用的这几个属性啊,那OK,这就是我们表单中啊,在我们第一个阶段里边,表单中需要用到的内容,那大家需要下来以后也一样,这里面内容比较多,主要是什么属性比较多对吧?哎,它的类型比较多,所以大家下来以后一定要多多练习啊,这一段内容至少你要敲个三四遍啊,至少要练个三四遍,好了,那这节课我就到这里。
我来说两句