00:00
好,那一破,那我们就讲完毕之后呢,再给大家介绍一个新的一个标签,叫做label保标签,那这个标签呢,其实它不属于表单的,只不过呢,经常和表单一起搭配使用,一般有了表单就会有它,所以说我们在这里面给大家介绍一下,那这个雷保标签的主要目的是为了提高用户体验,就这么多,当然它作用呢,又哒哒哒哒说的这么多,我先给大家演示一下,我再给大家带回来去看一看,哎,先让你尝一尝,觉得它好不好甜,咱们再回来再学它,好吧,那比如说我们前面刚说了一个用户名,哎。在这里面,那它的表单怎么写嘞,Input,然后呢,Type等于里面的test,这个呢是我们说的叫做用户输入的,哎,我们右击浏览器中打开,我们刷新完之后看效果啊,走一个,那是不是就有了,那现在用户想输入内容,只能把光标定到这个框框里面去,是不是才可以啊,哎,我们说的光标就是这个一闪一闪的这个光标,只有把光标定进去才可以那。
01:00
就不太友好了,我们想做一个效果,想做什么效果呢?哎,想我们点一下用户名光标就可以直接进来,能明白我的要求吗?这样点击是不是增大了我们这个点击的范围啊,哎,你比如说有一些哎,有一些年纪比较大的,他光标盯啊盯啊半天订不过来,那干脆我点一下用户名过来,是不是岂不是更好,是不是增加用户体验呀,所以说那我们label的主要目的是什么呀?当我们点击label标签的时候啊,被绑定的表单元素会获得输入焦点,这有个叫做绑定啊,我们先不用管,你就知道有一个表单会获得输入焦点就行了,就是我们这个光标,诶当我一点这个就可以过来,它的使用就可以来。这么一个效果,那如何来绑定元素呢?所谓的绑定就说是label标签和这个po呢,它俩绑在一起对不对?所以叫绑定,OK,那么它有两种方法可以实现绑定效果,第一种是最简单傻瓜式的,用label标签直接包含input就可以了,怎么做的呢?哎,Look me啊,Look me,看我怎么写的,你只需要把它呢全部捡走,然后呢,在里面输入我们这个label啊,Re label,看好它叫label,不叫table,然后呢,是B啊,这个千万不要和表格写反了,看RL加V能看好明白啊,然后我直接用label标签把它们全部都包进去了。
02:18
能看懂我这种写法吗?这是我们的第一种用法,OK啊,这里面我写的,呃,比如说我这来一个。H4,哎,第一种用法,哎,直接包含。Label直接包含表单啊labor label直接包含我们的表单,OK,写完之后呢,我们来看效果啊,它发生了一件什么样的事情呢?你看哈,我把光标定到这儿可以定还可以呢,当我把鼠标放到用户名上,然后一点击哦,光标是不是自然就跳到我们这个相应的表单里边去了。那这一个呢,就是我们label标签的第一种用法怎么样,是不是用户体验非常好呀?什么叫用户体验啊,就是说是你做的网站呢,让第一次来的用户感觉,哎呀你提供的服务太贴心了,感动的痛哭流涕,下次哭着喊着非得要来你的网站上。
03:10
来买东西,哎,那就是好的网站,好的用户体验,那你像这个就是其中的一个小方面啊,点一下用户名就可以跳过来了,这是我们刚才讲的第一种用法,当然了还有我们的第二种用法啊,第二种用法呢,是通过for ID来进行表单绑定的,那这个呢,和我们前面学的锚点有点相似啊,也就说是可能。这呢是label直接包含了input的,但是后面呢,还可能它不能实现直定包含的关系,特别我们学了后面布局的时候,因为表单呢,可能是和这个内容呢是分开的,不不方便直接包含,能懂吗?哎,我们马上要做一个案例,就用到这个地方了,你呢就先来知道我们有两种方法,要求这两种方法你都要学会才可以啊好了,那么第二种方法,第二种方法啊是通过啊,通过for和ID来控制的。
04:02
啊,我们的ID又一次出现了啊,又一次出现了,和我们的锚点定位特别的相似,好了,那么for和ID到底怎么来控制呢?它是这么一种写的,有可能呢,我们的label标签呢,是写在外面的,不方便直接包起来的啊,Label特殊情况是不方便直接包,而我的用户名呢,还是在后面。好,这个呢,我改个名字,比如说叫做昵称。昵称OK啊好,那写完B之后呢,我们在这里面去看一看,CTRL加S保存,那么在这里面我把昵称的CTRL加减走,然后放到这里面去,也就是说这样的会存在一个情况,就是label是包含了内容,而表单是不是在后面呢,它俩呢并没有连在一起,我说了特殊情况它连不在一起的啊,这个第二情况你要知道就行了,好,然后我们刷新一遍之后呢,我们还想点击一下昵称光标是不是可以定过来呀,哎,现在点是定不过来的,那怎么样给它们绑定在一起呢?就说是这是牛郎织织女啊,我们插一条线时候把它们连起来啊,把它们绑在一起,那可以通过for和ID来控制它的,具体的用法呢,就是这么来写,在label包里面去写一个for,我为了你,我为了你准备,为了谁呀,为了你我们准备啊,好比如说我就叫做昵称,看好了吗?我叫NCNC啊。
05:16
啊,或者叫PC都可以叫NC,好,那么for你CNC,那么在这里面它呢,必须呢,给它写成一个叫做什么呀,ID就可以了,ID等于NC,那这样他俩就可以来进行绑定了,能看明白吗?在label里面加了一个for什么什么,而在我的import里面加了一个ID等于什么什么,你们一猜就知道他们两个的名字要求一模一样,是不是特别像我们以前学过那个锚点啊。哎,锚点也是差不多这么一个原理,只要你保证它们一样就行了啊,通过括号ID也能够把它们连在一起,好,我们刷新看效果走,你注意啊,我点一下昵称,一点击诶光标是不是也过来了,这个一点击诶光标是不是也过来了,这两种方法哪一种都可以。所以说呢,这是我们在啊,在我们的DEMO保里面已经给你演示出来了,你看这个呢,For sex,那这个呢,ID能sex,只要for和ID一样就行好了,那最后呢,我做一个总结,Pink老师一句话说出他们那label标签到底是干嘛的呢?哎,Label标签呢,主要目的是当我们鼠标点击了label标签里面的文字的时候,哎,你看当我鼠标一点击label标签里面的文字,光标就会定位到这个表单里面,就这么简单,光标会定位到指定的表单里面去,这就是label保标签的主要用法,是不是提高了用户体验,当然呢,还有一些其他的效果,咱们后面学了,学的时候呢,咱们再反复,但是呢,这句话是这个作用是维保标签最主要的用法。
我来说两句