00:00
我们来看一下我们今天的第三个大点,我们称为表单好,首先呢,我们看一下表单的目标是什么呢?啊,第一个能写出我们最常用的注册类的表单,再一个呢,能说出我们I input常见的表单属性好,那么带着这两个目标呢,我们去学习一下,说到这个表单呢,哎,我们其实并不陌生的,比如说我要去办一张银行卡,或者是办一个信用卡,银行人员总是先让我们填这么一个单子,代理们呢,让我们写上我们的身份证号呀,啊,或者是你的电话呀等等之类的,那他让我们填这个单子的主要目的是为了干什么呀?哎,是不是就是为了收集我们的信息的,哎,现在什么数据值钱呀,是不是就是用户信息最值钱?哎,你的电话是多少呀?动不动发一个银行贷款,你需要吗?哎,请问你需要办理银行贷款吗?哎等等之类的,让我们去做这一个好了,那我们情况下这个是银行卡里面弄的,但是我们想想我们以后我们做的网站是不能让每个人去那样填单子的,这个时候呢,我们也想干什么呢?哎,也想让网上的用户来填一下,那网上的用户怎么填呢?哎,就需要用到这样的叫网上填一个单子了,并不一定非得是纸质的,对不对,用纸张去写,不用,那我们在网上有这么一个单子之后呢,用户也写上去,写完之后一注册,OK,您就是我们的会员了,哎,请把你的手机号留下,是不是动不动我就给你发个短信,哎,好了,那这就是我们说我们这个HL里面表单主要用途就是说让用户群体在网上填写单子,我们把他们的信息收集起来。
01:36
OK,这就是我们说了,表单主要目的是为了收集用户信息的,在我们H码中呢,一个完整的表单通常呢,包含三大部分,首先第一部分我们称之为表单控件,哎,什么叫表单控件呢?就是我们说这一个手机号啊,还有一个图片验证码,诶我们打开看一看,这个表单呢,和我们前面学的标签呢都不一样,这是小米的一个注册账号,你看这个手机号码,我把光标定进去,我竟然可以输入内容,这个是不是我们以前的标签所不能做的,而他能做,哎,这就是我们说的表单了,让我们填写的和别的不一样,那这一个框框,还有这一个框框呢,我们又称之为表单控件,OK,这是第一部分,好,第二部分呢,我们称之为提示信息,所谓的提示信息呢,或者是叫提示文本,就是这一组,什么手机号呀,图片验证码呀,这一组左侧这一栏,那这一栏的目的呢,就告诉用户你要做什么东西,这个表单的主要目的做什么的,比如说这个呢,是选择国家和地区的,而这个呢是填写手机号的,而这个呢是立即注册的,这些呢,我们称为提示信息啊,或者叫做提示文本,还有一个呢,非常重要的呢,叫做表单域,我们的表单是不是有许许多多的,那当我点完立即注册之后呢,我们不能一个。
02:51
表单,一个表单呢,往后台里面送,而是我们整一大片的,就把这一片表单都送过去,那怎么办呢?哎,我此时需要一个叫做表单域的表单的区域,哎,把这所有的表单包起来,当我们点了立即注册之后呢,他会把这个整个区域里面的所有内容一起放到送到后台里面去,OK,那也说一个完整的是不是有三部分组成,第一部分表单,第二部分提示文本,还有一个呢,大的一个区域叫表单域。
03:20
好了,因为那个提示文本呢,咱们没必要特殊强调,这个提示文本呢,我们用的时候直接写就行了,所以说呢,这个咱们忽略掉,再有一个这个表单月,因为它是一个整个一个大的月,这个呢,我们全部讲完表单之后呢,再回来写,所以说呢,大家跟我来看我们左侧的结构啊,咱们呢,最后呢,才给大家讲一下我们的表单域,那提示文本咱们就不再讲了,好那么我们重点是给大家讲解是不是里面这些小框框,这些小表单呢,所以说呢,我们来看一下我们这些小框框到底他们是用什么样的表单标签来表示出来的呀,哎,我们呢,先来看一下第第一个就是叫做表单标签。讲完表单变签之后呢,我们再看表单域,但表单标签里面呢,又包含了很多我们最常见的就是属于import类的表单空间了,就说这里面我们看到这一些,这些框框,框框这些通通都属于input组,但是呢,还有两组特殊的,比如说第一个叫test area,叫类似于我们那个留言版的,还留言的那个比较多的,还有一个呢,叫做下拉菜单的,这两个呢比较特殊,所以说呢,我又单独把它拎出来了,OK,也就说咱们重点是看还有这个IM input组,当然简单介绍一下label标签,那不管怎么说,这四组里面是不是都属于我们这一类的表单标签呢?我们来看一看我们学哪些东西啊。好了,那我们先看一下我们的第一大类叫做import空间,Import首先我们知道这个它的语法格式非常简单啊,Import它不等于什么value等于什么,当然了还有其他属性,这个import呢,首先第一个你要注意,它是个单身狗标签,还记得吗?哎,我们称之为单标签啊,好了,那单标签完之后,再一个这import翻译过来就是。
04:57
输入的意思,哎,你你看看这个框框本身我们就可以是不是往里面输入内容了,哎,包括我们这一个,你看打开我们这一个本身就可以往里面输入内容的,所以说呢,这个呢,我们就属于输入类的表单啊好,那么这个再有一个呢,就是type属性值设置不同,用来指定不同的类型控件,这个比较有意思,也就是说是这个import呢,有好多属性,那这是属属于import的属性,什么type呀,Name value size check,还有还有maxs这些呢,都属于import的属性,而每些属性是不是有不同的值啊,其中我们import里面最重要的一个属性叫做type属性,因为这个type属性值你给他一个不同的值,它可以来指定不同的类型来决定的,你这个输入框到底是什么类型是。
05:45
输入框还是密码框,还是单选按钮,还是复选按钮,当然了这个单词会比较多,不要慌,同学们,我一点一点呢,带着你们来写好,我们先准备好,我们一个页面打开完之后已经有了,好那么我们里面写上我们什么呢?第一个比如说我输入用户名,咱们直接上来写代码,用户名那直接放input就可以了,好叫回车哦。
06:07
不对啊,Input是个单表签,有时候不要太相信这个提示啊,有时候它比较傻瓜式的啊,有,有时候也太聪明了好import什么呢?第一组叫做type等于什么就可以了,好,那么看等于T,我写完B之后,同学们给我来UUG打开看一看啊,写完之后你会发现哦,这个框框竟然立马就出来了,哇塞,竟然这么简单呀,确实是,而且你看我输入123说果然是可以的,原来我们想输入一个。用户名的框框是不是原来就这么简单呀?Input tap等于text就可以了,好,我简单给你写一个注释,那么就是说,哎,Input我们直接写啊,如果是tap t tap属于什么呀?Test,那说明是一个什么,是一个文本框,我给你注释起来。OK,那有了这个之后呢,我接着再来一个,比如说我接着再来一个什么呢?哎,密码有用户名之后呢,我输入密码啊,看好了,那我还能直接这么写吗?Ctl加C,我复制一份到这来啊,同学们跟我来看,我说刷新一遍走有密码了,我问同学们这个你敢输入吗?
07:11
说不敢呀,哎,我可真不敢,我的银行卡密码我可不能告诉你,你这么一写直接显示出来,反正这个网站要我,我不敢上。所以说密码框应该是不能让别人看见的,诶,所以说呢,这个密码框它不能这么写,它不再叫test等于呃,Type等于test了,它不属于文本框,它有专门自己的名字叫做什么呢?密码框,密码框password,我们称为密码输入框,也就是说你我们只需要通过这个type修改type属性的值,把值给它改过来,就可以修改它的输入类型了,好的,那我给他改过来看看啊,那么我们把test改成pass。好,我改完passw之后,同学们再来跟我来看啊,见证的奇迹的时刻刷新OK啊,那名户用户名我叫安迪,没问题,可以输入密码呢,哎,我不告诉你,你看能显示吗?哎,不显示,以小点点的形式来显示哦,So,这就可以了,哎,这就可以了啊,这才是我们真正的密码框,那我就加个BR吧。
08:15
好了,那么让它画下来也行啊,哎,老师没有对齐啊,先不用管对齐,我们后面再说关于对齐的问题啊,现在就别扭着看,没问题啊,好,那密码框我们输入完毕了,所以我们得出一个非常重要的一个概念,那import中有一个非常重要的属性叫做type,这个type翻译过来就是类型的意思,你属于什么类型?好,你给他一个不同的值,它就显示不同的类型,你给个test就是文本框,你给个password,它就叫密码框,给什么就改什么,诶,这个非常厉害。除了这个之外呢,它还有另外的一个属性叫做value value值,Value呢,它翻译过来啊,你看刚才我们说的它属性啊,你给个test就是文本框,给password就是密码框,这有提示,那value指是什么呢?它翻译过来啊,这个单词value单词翻译过来就是值的意思,它翻译过来就是值,看它就是值的意思,OK啊,那在这里面的话呢。
09:09
它具体怎么用呢?我先给你看一个这个啊,你看我们下面这账号中,你打开之后,你看这儿框框里面默认是不是有中国两个字啊,而这个手机号码里面,框框里面默认的有个请输入手机号码,是不是有这么几个字呢?哎,那我们想让我们的框框也显示这几个字,是不是显得用户体验会更好一点呀,让用户说按输入手机号码吧,哎,那我们也可以来做,你只需要在我们的啊用密码框咱就不写了啊,反正小点点你也看不出来,我给我的密用户名写上一个value等于什么呀?请输入用户名,哎,我是不是里面就写了几个字啊,写完毕之后再我刷新一遍看效果啊,走一个怎么样子,是不是请输入用户名立马就显示出来了。你这里面写什么,它就显示什么,请输入哎用户名,然后123,你看当我改完之后,它就显示请输入用户名123,是不是就显示我要的内容了,好你就不要的话,你就删除掉,然后直接输入我的名字就行了啊再输入什么,那这一个的话。
10:08
到这个交互效果还有颜色,我们现在不要改,具体效果我们后面再去改就行了啊好,那这个呢,是我们给大家讲的这个用户名哎中的有个type,还有一个value值。虽然他们两个啊,我们讲了一个我们银input空间组里两个非常重要的一个属性,两个重要属性,第一个是type等于test,它决定了这个表单到底属于哪一种类型,你是文本框还是密码框,比如说上面这个呢,就是个文本框,因为它叫type等于test,而我下面这个呢,它就是一个什么呀,密码框,Word。他passwor啊好,那第二个第二个属性这个Y6值,它是决定了你这个表单要显示的内容,显示的字,你看我写完之后呢,在这里面是不是把字给显示出来了,要显示的文字样式在这里面的话,我们是不是给他讲了一个关于type和value属性的。
11:02
他们通过修改值可以看到我们想要的一个效果。
我来说两句