00:00
好,那我们继续来上课,那么这节课呢,我们再来看一下跟我们这个表单相关的这些标签啊,那好,那么我们来先新创建一个表单的文件啊,来新建一个。文件啊叫做零四。FMHTML好了,那么在这里边我们要讲的是表单相关的标签。的标签啊,那么都有哪些标签呢?首先第一个啊,我们有一个叫做什么field set,它是干嘛呢?将表单内的相关元素进行分组,什么意思啊?比如说正常我们在做表单的时候,Form,对吧?然后这里边我们可能有一些input,这是填一些基本基本信息啊,比如说input再来一个这个tab啊,不对,是test啊test OK,就调这么一个基本信息啊,这也是一样,Name给他一个值对吧?然后value等于一个值,那么比如说这就是一组信息,那么这组信息我可以用一个标签给它什么,给它包含一下,就叫做field set,叫Fi field set。I。
01:01
BLB,诶。好了,那么给他包含一下。那OK,诶。好,包含完以后,现在我们再来看啊,返回来不是这里面了,我们先打开一下。什么效果,你看是不是整个在它外边给它加了一个什么,加了这么一个边框对不对,哎,你现在这个标签都是自带边框的啊,因为这个表单我们给他来个换行啊好了。然后。再来对吧,那这样的话我们有什么作用啊,这个东西其实就是给他做一个分类对吧?当我们如果真的是需要向用户去填写那种有分类的时候,我们才会用到,一般情况下呢,我们还很少用到啊,然后包括呢,这里边我们还可以干嘛呢?比如说既然已经分类了,我是不是可以给他定义一个标题啊,对吧,我可以在这里边通过一个叫做呃。Led ne lay n的这个标签给它干嘛呢?定义标题,比如说这个叫什么健康信息表啊,健康信息表对吧,那现在你看把一来刷新,你看标题是不是定义到这块了,诶健康信息表啊,这就是这个field set啊,它是配合这两个标签一起来使用的啊,它呢是专门为它来定义标题的,他呢就是将表单元素给做一个什么,做一个分组来处理的啊。
02:20
好了,那这个完事以后,接下来还有什么需要我们知道呢?还有一个我们你看啊,我们这里边field side和L这完事,还有一个叫OPT group,它是干嘛的,被下拉列表定义分组了,那好我们再去做我们这个项目的时候啊,我们做的什么做的这个,嗯,分类的时候是不是就有这种下拉列表,对吧,比如说OPT,然后有什么呢?有这个,比如说有这个编程语言,编程语言。然后。在这里面再来op t编程语言里面包含什么呢?包含PP对吧,CTRLCCTRLVVV好了,比如说还包含了这个Java。Java对吧,然后还包含了咱们这个H5对吧,前端啊,然后还有什么呢?还有比如说Python pyn,好了,那么有这么多以后,现在啊,我们来看这个下拉列表来刷新一下,那么一点开是这样的对吧,那么过当然啊,这里面一样,我给他来一个op t open叫做什么呢?叫做杠杠杠八。
03:19
杠杠杠杠叫请选择好,那里边可能不光有这个编程语言,可能还有其他的对吧,比如说像我们之前写的那个分类,还有什么叫做什么国内新闻对吧?啊,这就是不是又是一个顶级类啊,那国内新闻里面会包含什么呢?包含的这个,比如说这个,呃。娱乐,娱乐新闻。娱乐新闻对吧,然后还有什么,还有这个军事要闻。军事要闻对吧?哎,包括其他的等等都可以放的来放来以后现在咱们来看啊,我再来刷新,那么在这里边我们能看出来层级关系吗?是不能啊,其实编程语言下面是不是就这四个编程语言,国内新闻下面是不是就这两个新闻。
04:01
所以这个时候我们可以干嘛呢?在他这里面给他进行分组。那么编程语言会包含了这么多对不对,所以在这里边我们可以通过这个叫做嗯。Op group。来。把这变成语言,我注释掉了,不要了啊,然后呢,开始干嘛呢,OPT。OPT group OK,把它和谁圈起来,比如这一类的我都给它圈起来,好圈完以后现在咱们来看啊,我先来保存一下啊,来刷新,你看这里边是不是单独变成二级的了,那它的标题你看这块是不是应该有个标题啊,标题是不是就是我们的一这一级分类,所以在这块我可以通过这个labor。属性给它定义这个标题叫什么呢?叫做编程语言。编程语言好了,那现在你看好了,我们再来刷新,刷新完之后,诶,你看编程语言下面有这几个,看到了吗?编程语言是选择不了的,对不对?哎,同样国内新闻也依然如此,在这里边我还是把它剪切掉啊,然后呢,Op pott group。
05:08
然后一样给进行。这里边这些选择选调啊,包含一下,包含给它进行一个缩进,对吧,然后这里面同样我用LA给它写一个名字叫什么呢?比如说叫做这个,呃,国内新闻。好,那现在我们再来看刷新,你看往下拉,诶没刷新没保存上来吗?保存一下。走,你来。标签打错了。Otg。G。Up啊。这个对了,OD加o up。好了,刷新来。诶还不对,Op PT go g啊,这个GR这对不对了,看看啊optgt OK,好了,来再来刷新,刷新完以后,这回你看国内新闻是不是也有了,哎,这两个顶级的是不是都保选择不了,下面的子类是不是都没问题,哎,这就是咱们的这个OPT这个标签干嘛呢?将这个下拉列表做一个分组啊,做一个分组好了,那这个标签知道以后我们还有什么呢?还有一个可选数据列表,这个可选数据列表干嘛用的,你看好了,比如说我们在任意一个地方,比如在这里边我们搜东西,这是不是一个列表,对吧?你看我一打div,你看下面给我出了一趟趟的跟div相关的,看到了吗?比如如我打一个X,你看下面跟X相关的。
06:32
到了吗?它是中英文都都给你加在一起了啊,这个是比如说我我用,那我就用中文吧,来来个新,你看新。新冠病毒对吧,是不是都新开头的,哎,然后比如说我这里面再来一个来个小。你看小姑娘,小米小说,小猪佩奇是不是小小的都有都有啊,哎,那OK,这种东西啊,并不是说像我们浏览器给我们什么,给我们这个存储记录了这个信息啊,这就是可选数据列表来做的,那么可选数据列表怎么做呢?首先可选数据表我是不是得有一个表单能让用户输入内容对不对,那比如说这个就是用户输入内容的表单,那接下来呢,在这个下边我们来一个data list的数据列表,然后同样里边配合着open啊,比如说有小小姑娘。
07:16
小姑。娘,然后CTRLC,喂喂喂喂,我多给一些啊,还有什么呢?小娘子小娘子小娘子娘子嘛,来小娘子,然后还有什么大。大雄。对吧,然后这个。大大。八人。大官人应该有大官人啊,大好人大好人好了,然后还有小小小对吧,然后再来。再来一个,比如说小不点,然后这个呢,大大美人好了,那OK,比如说给了这么多对吧,那么现在咱们来看啊。我在我的自己的这个页面,这个页面。
08:01
我还统一用一个浏览器打开了,来这呢,啊好了,在这儿呢,你看啊,我点开我输入,比如我输入个小,你看有弹有提那个框吗?并没有对不对,所以我要想这个框提示我肯定要干嘛,把他们两个给它关联起来才可以,那么他们两个怎么来关联呢?我在data list这里边通过一个ID啊设置ID,比如说就是ID等于等于什么呢?等于这个my list我的列表对不对,然后呢,好,我在这个。Type就是input这个标签里面通过list的属性进行关联,关键谁呢?关联这个my list,这个时候他们两个才有关系,有关系以后现在我再来刷新,你看好了。比如说我输入小。你看小姑娘小娘子,还有小娘子小小小不点是不是我刚才在这里边可选数据列表里边我定义的都拿到了。对吧,哎,那么一样,比如我输入大,那你看大熊大人,大官人大好人啊,然后大美人是不是都有了,那么这你看我是不是可以选择一个诶。选择诶。
09:00
为什么选择不了看看啊,你看我选。选是不是跟人家不一样,你看人家的是什么,你看下来我选是可以选的,而我们这个呢,是不是有点太low了,你连选都选不了,哎,选不了其实是选不了,不是是选上了,选上的原因什么呢?因为这里边我都是空看到了吗?要么比如说大人这个啊,我把这个Y6给它删掉了。我把value属性删掉了,删掉了我获取的是不是就open的标签中间的内容,那么这个时候你来看啊,刷新一下来大。点大人,大人上没上来,上来了吧,但是除了大人以外,其他的,比如大熊你看。大官人是不是都上不来,哎,原因什么?你要是设置了Y6属性,那好你就在这个Y6里边也给他值,比如说小强子这个我给个1111啊,那么现在咱们来看啊,我来刷新我一点这个,哎,不行,换小啊,我一点小娘子。哎,不对,我不是小娘子吗?啊小姑娘啊,来,再来我点小姑娘,你看这变成111了,哎,所以这里面记住你要是设置Y6属性,它获取是你Y6属性的东西,如果你不需要的话,对吧,你就让他标签中间内容的话,那你就不要给这个Y6属性了。
10:06
不要给这个外流属性啊,不要给Y流属性,你不给外流属性的时候,这个时候你看好了,我刷新这回你就都能获取了,比如说小来小姑娘是不是小姑娘对吧,然后再来我说小小娘子,你看是不小娘子,哎,这就是我们的可选数据列表啊,那么他需要干嘛呢?配合这两个属性啊,在这个普通文本域里边,我们通过list子的去干嘛去跟他进行关联啊。来这里边我们给他记一下啊,在这里边要注意的是,注意的是如果使用可选数据列表对吧?需要跟什么呀?跟这个文本域进行配合,那么在可选数据列表中定义什么呀?ID属性对吧?然后在这个文本域中定义历史的属性,关联关联谁关联这个呃,ID属性即可。没错吧,然后还要注意什么呢?就是这个,呃。
11:03
可选数据列表项啊,用什么呀,Op IO。标签。标签来定义,OK,好了,这就是咱们这个data list的这个功能。啊,可选数据列表好了,那可选数据列表完事以后,我们再往下来看,下面还有什么内容了,这些标签我们掌握了,那再来看新增的其他的这些类型啊,这里面类型会比较多,对吧?那我们就挨个给大家来看一下,演示一下啊首先第一个叫什么叫做email那个对吧,那我直接在这里面了啊来来个input,叫做em Mae mail email干嘛呢?它是自带邮箱验证的emal。现在你来看好了,我在这块给一个华丽的分割线吧,来个HR,好,然后我们再回过头来刷新,你看啊,这里边比如说大家知道这叫给邮箱,对吧,我随便给个内容好了,我一离开你看他说变红了,哎,变红了,注意我没有提交按钮,对吧,我们这里边给他一个提交按钮啊,Input sub me,好了,来个提交,那么这个时候我们来看刷新。
12:09
来我一点击提交,他告诉什么,请输入电子邮件地址,看到了吗?哎,电子邮件地址它匹配的是什么呢?只要这里面加了一个艾特服务,后面给个字母,再给个点,再给个字母就行了,这就是符合的对吧,这时候你看我再提交,这就没问题了,哎,这个邮件地址我是不是提提交出来了,哎,所以说这里边是干嘛干嘛自带邮箱验证的,那有了自带邮箱验证还有什么呢?还有这个URL的啊来来个BR。这块eal错了。Email email的啊,然后这里边我们给个BR,给它复制一下放到这里好了,那下一个叫什么呢?URL的也有自带URL验证的啊,这里边我给他一个input URL好了,那这一样名称我叫URL,那这后面我还是给他一个BRL,那我们再来看URL验证什么样的来刷新。URL的,比如这里面我来个3W点百度点com,这是不是一个URL啊,诶鼠标人告诉你,请输入一个urr地址对不对,那现在我离开,我点击提交,提交不了,他说什么请输入一个URL,我这是不是URL,我这不叫URL,我知道什么我叫域名,什么叫URL啊,URL是不是要把这个东西给它拼接出来才叫UR,你要加上它的协议完整的一套下来才叫UR,这时候再提交,你看是不是才可以。
13:21
看到了吗?哎,这就是什么自带URL验证的啊,然后再往下来还有什么呢?还有这个数值表单叫做number um b啊,那input type类型也叫做nu b。好了,那这里边一样,我比如我给个um啊,后面那我依然给个回二好了,那现在我们看这个数值表单的,那这里边你看它自带上下间隔,你看到了吗?哎,我一点加一减一看到了吗?哎,然后同样比如说这里边我直接给他一个,我给他一个10.1111 10.11111,对吧,那么它又变红了,我一点击提交的时候,它说什么呀?请这个值要在十和11的范围内,对吧,选择一个有效值啊,有效值你给小数点是不行的,你要么就给什么给十。
14:04
啊,要么你就给11,它是不支持小数点的啊,但是呢,所有跟数值相关的表单都支持两个属性,一个叫man,一个叫max,什么意思是它最小值,Max呢是它的最大值,比如说最大值是十啊,那现在咱们来看,我在这里面再来刷新。刷新它,哎,好了,来,你看好了,我给个一对吧,我点点点,你看我点下面是不是减下去,我点上面加没问题,加加加加加加加加加加到十以后再加是不是又不好使了,哎,就最大值是十,你看我手动输入输入个11行不行,行,当我鼠标一离开不行,我点击提交的时候,他说请选择一个不大于十的值,看没看着,哎,他帮我干嘛了,自动做这个数值的验证啊,包括这里面还有什么Y6属性吧,Y的属性就是当前值嘛,那我给他一个五,那我当前就是显示我一刷新。一刷新当前是不是显示五啊,哎,这就是咱们数值表单number啊,记住啊,所有跟数值表单相关的,它都可以干嘛的,都可以设置这几个属性啊,一个最小值,一个最大值。
15:05
好了,那再往下来还有什么呢?还有这个wrong滑块RA,在RA它就相当于直接是在一个范围内,只能在这个范围去选操作了啊into的I来run,然后这里边也一样in吧,好了,那现在咱们来看啊,我这里边来刷新。你看是不是多了一个滑块对吧,你就可以左右滑呀,然后这个一样,那这个滑块的数值是多少呢?它肯定是有大有小对不对,那这里面我就可以通过min,比如最小值是1MAX,最大值是十对吧,或者最大值是100,那现在我们来刷新。你看啊,来刷新它现在默认,你看它是不是取中间了,相当于中间是不是就50啊对不对,那OK,那现在我给它去改变它,我能不能改变它可以啊,通过当前值va Lu value来改变嘛,那改变给他写成很少,比如说给它写成50,那这个时候它才标准。中间了对不对,那一样,我比如说我不要50了,我要要100呢,是不是最后尾了给他拉到最大了,那你看我一刷新是不是到100了,对吧,那同样我要给他一个一呢,给他一个一,它是不是就最小再刷新是不是到这边来了,哎,所以他就只能在这个范围内进行什么进行选择。
16:16
啊,这就是咱们的wrong好了,完事以后还有什么呢?还有我们这个搜索表单,搜索表单其实没有什么效果啊,那在这里面咱们来看叫SE ch search。然后input search,也就是说以后我们在做搜索的时候啊,SE ch在做搜索的时候,你就可以用这个搜索的表达了,那么。来,我也给它复制一下好了,这回再来刷新,你看好了搜索这不就跟普通文本域一样,你看我普通文本域哪,这就普通文本域吧,你看是不是一样的,哎,但是我说了浏览器在执行它的时候,它浏览器知道这是一个搜索的表单,对不对?哎,所以大家记住,只要是用我们用到搜索了,我们尽量可以干嘛使用这个设置,不要再使用这个。
17:01
Test的啊,当然使用test也不犯毛病,但是什么呀,它不是最好的对不对,哎,那么一样,这里边这里边应该也可以设置水是一个属性,Re re。S。Uts吧,好像可以设置这么个属性,能让它显示一个什么,显示一个这个小放大镜的效果。刷新。没有是吧,那OK,我看看是哪个浏览器啊,它是不兼容的嘛,这个属性不是兼容的。Re re,也不对吗?也没有是吧。资源的re so。等于N。都没有了,都没有了,没有,我应该没有记错啊,我应该没有,应该就是result啊,Re Su rets result。啊,应该就是它等于设置等于N,原来在火狐里边,在谷歌里,在这个火这个谷歌里边会显示个小放大镜,这块会显示小放大镜啊,火狐一直是没有效果的啊,火狐一直没有效果的啊。
18:10
所以这个东西呢,这个样子我们要不要无所谓啊,不需要去记。只需要知道我们以如果以后如果做搜索,我们把它的这个type类型变成什么,变成search就可以了啊,包括我们还有什么,还有颜色选取的表单color。Input color,那这里边比如说我就叫color了,然后后面也一样,我再给它一个BR,那么我们再来返回这里边再来刷新,你看这里边是不是想选颜色了,哎,那你就选呗,对吧,包括我可以这么选,选完之后我一点击确定,确定完以后这个颜色你看好了,我一提交。看好了卡了,里边是不是给我拿到了这么一个值啊。对不对,哎,这就是什么六位的16进制啊,六位的16进制,这个就是六位的16进制啊,我们如果用PP接收过来以后,就是六位十六十六进制,因为在这里面它会把这些符号转移,你看就好比刚才我们输入的这个。
19:01
行就email吧,比如说A艾a.a来你看我再点击提交啊,你看我点击提交的时候,你看它是不是把这东西给我转移了,百分号四零代表什么,代表着艾特符了,对不对,那所以这里边有个井号,就百分之二三看到么?23%代表什么,代表井号,然后后面000000是不是六位的16进制,哎,所以通过通过这里面拿的都是什么,都是六位的16进制啊。好了,然后再往下还有什么呢?还有电话号码表单,电话号码表单也是一样啊,没什么效果,Input TL,哎,但是呢,你如果你要用户输入电话的时候,你就给这个表单可以了啊。来刷新,你看这就是一个普通文本域,你说我给他英文都行,你看我点击提交是不是可以,哎,这个没有验证啊,这个没有验证,因为电话号没办法验证,有的电这个电话号你可以往里面放手机号对不对,然后你还可以往往里面放什么放。正号没错吧,哎,所以他没有没有办法验证啊,OK,这是咱们这个电话号码表单啊好了,那这些完事以后还有什么呢?还有我们的一些时间类型的表单啊,时间类型表单大家作为了解就可以了,有这个date。
20:04
Input等于data。然后再来。引出他。呃,不对,Date完成,还有time啊,Date就是时间对吧,Time呢,就是这个日期啊,不是date是日期,Time是时间啊,说反了啊,来,再来个time,然后每一个后面我都给了一个BR啊,以及这个week wek,那就是我们的周。呃,一周。来个we好了,然后周完事以后再来,还有什么呢?还有这个月month input month我就都写到这里边来了啊完我们一会一起看,然后还有什么呢?还有data time。叫做data time。Date time呢,这个不支持啊,Input data date time。Input data time,你看我连快捷键都用不了,看到了吗?我没有打错吧,打错了data啊,Date time,这也是data,好了,来,走,你OK,这个好了啊。
21:06
好了,再来一个回车对吧,然后再来还有什么呢?Date time on local。然后。Input date time gone。OK,那么现在我们来看啊。刷新。看好了吗?Take time你看是不就普通文本什么没有你看。看到了吗?这个时间还行,时间我们可以往里边。输入我就是输入。只能输入点看到了吗?第一个横杠不好使啊,年月日,哎,这个日期终于有了,就年月日好使,看到了吗?这不就年日好使,这时间都不好使啊,时间我都选择不了。你看时间我都选择不了,看到了吗?剩下都不好使,所以这个大家记就记这两个就好使了就行了啊,一个什么一个date,一个time,一般我们用date用的是居多的,对吧。因为这个时间居多的啊,因为这个time都比较少,那么在这里面是不好使的,在哪好使呢?也不是说都不好使,在在这个谷歌里面好使,对吧,因为H5,咱们说H5诞生什么,是不是由这个这么多浏览器厂商一起来研发的,对吧?你看在这里边都好使,但是它的datatime是不好使的,Time在哪呢?在open浏览器里面好使啊,然后呢,这个this time-local呢,是属于相当于什么本地时间啊,完整的这个日期啊,本地时间,然后这里面你看我一选择。
22:27
这里我是不是就可以选了,然后比如这点这点,然后OK,你看是不是到对吧,这个不好,这个一选一个月看到了吗?这个周呢,一选就是在一周的看到了吗?然后这个时间呢,对吧,你还是可以正常这么选择的,然后这个年呢,那也一样,不是年啊date啊说错了,Date看到了吗?哎,在这个火狐里边,呃,这个什么谷歌里边是都好使的啊,只有这个data是不好使的,所以这个date呢,我给大家标注一下,这个不兼容啊。嗯,不好使,就只写不好使就行了,好了啊,这两个你记一下就行了,剩下的东西作为了解就可以了啊,这就是咱们新增的跟时间相关的啊,好了,那新增的这些东西完事以后啊,我再教大家一个表单的新玩法啊。
23:12
表达的新玩法怎么玩呢?咱们来看在这里边啊。嗯。我们再去写这个,我就直接在这个页面啊,算了,换一个页面吧,来新建一个页面,叫做PHP,不用来下面文件,然后叫零五,我们要做一个表格,Table杠,Form表格加表单,对吗?加合同莫勒,那么在我们去写这个项目的时候,在我们去尤其是做后台是用了大量的表格跟表单了,那么表格里边我们最难区分的是我们到底在表格里面套着表单,还是在表单里面套着表格,这是我们最难区分的,对不对?比如这里再来个TD啊,这个来个用户名。对吧,然后这里边我们经常会是这么写的input对吧,然后呢,我们一般是干嘛呢?一般情况下都是表单包含的表格,为什么呢?因为表单里边没有正规的格式,表单里边没有正规的格式,你表单里面放影铺的。
24:08
可以,但我不放引input的,我放个P标签也可以,我放一行内容也可以,对吧?所以对于form来说,它没有固定的格式,但是tableable里边有没有有cable里边只能包含什么呀?Cap表头TRTDTH对不对?所以尽量不会不会去破坏表格的样式,因为什么?因为表格标签本来也多,属性也多啊,所以尽量我们是不会去这么去做,所以一般都是表单套的表格啊,这是我们之前的做法,那么你大家知道表单套的表格这一两个还行,对吧,但是如果一多的时候谁写的都懵,没错吧?来,你看好了,我还是一样给它打开。你看哟,我这个表单这么厉害吗?我写的是什么啊,怪不得呢,来给他一个test啊,这里面都叫test,这里面都叫test,好,那现在。来,比如说这就是不同的内容嘛,不同内容这是我表格套表单里的,哎,那么咱说了这个内容一旦多,看起来就会很乱,那么这个时候怎么办呢?其实HTML5为了排版方便,允许表单内容脱离表单标签。
25:09
了吗?表内离表,比如说我再给一个我N,然后这里给来个input叫做提交对吧,那这块呢,咱们这个叫做,比如说这个叫。啊,这个叫A。哎呀,错了错了给错了啊,给错了给错了,我们得给他内部属性才能提交走吧。Name等于一个A。再来,Name等于一个B。A。然后再来一个n me等于一个C好了ABC3个对吧,那咱说了HTML5为的排版方面,它是允许表单标签脱这个表单项啊,脱离这个表单标签了,那么这个时候注意啊,我第二我measure的方式还是用盖的方式,那么现在我能提交吗?
26:04
看好了刷新。不是这个页面啊,再来一下。来刷新啊,你看好了,123123123,来你看我只能提交吗?是不是提交不了啊,对吧?哎,这个时候你要想提交需要去做两件事儿,哪两件事呢?第一件事儿,你要为你的这个form标签添加一个属性,添加一个什么属性呢?添加一个ID属性,比如说我叫做my form,诶我的表单对吧?然后这个时候注意我要把谁提交走,我这个提交按钮要提交到哪,是不是要提交到这个标签这块对不对,那OK,在这里边你就用一个form属性,Fom属性去关联它就可以了,关联谁能关联这个my form my form。好了,那现在我们再来看。刷新啊,然后点击提交,诶能不能提交看到了吗。提交了吧,内容都没有了,你看提交,但是内容又提交过来吗?没有对吧,你光给这个不行,因为这些内容也要提交吗?那你也可以干嘛呀,继续form等于等于什么呀,等于my form,注意这个时候代表什么,把这个内容提交到。
27:08
这里面这是提交C啊,这是C的内容。来你看刷新一下啊。前两个肯定不会拿,C叫什么呢?叫321123,看好了这个我在这点击提交C,你看C是不是等于321123是不是拿到了,哎前两个不行吧,哎,那前两个要想要想这么做怎么办?我是不是也可以继续什么呀,Form等于一个my form,只要我给它设置到这个,设置到这个属性跟让他俩进行关联以后,那么是不是就我可以提交了。那你看现在啊,提交的这个是B啊。嗯,把它关掉啊。这个什么东西也给它关掉来这个这回你再看啊,刷新一下,然后这里边我一样啊,比如说这个叫ABC,这个呢123,这个也叫123321好了啊,那现在你看提交C,提交C的时候,你看B等于123拿到了,对吧,然后A等于321123是不是就没有也拿到了,但是A是不是没拿到,对不对?哎,所以这就说如果要A也提交,那A继续设置没错吧,那么包括比如说我这里边需要有两个表单,再来个form,诶,那其中这个A呢,提交到另外一个表单里行不行也可以啊form。
28:14
Form,这里边继续method方式,我还是用get对吧,然后设置一个ID等于什么呀,等于my form2对吧?那么它提交到哪呢?提交到my form2那一样,这里边我给他定义一个什么form属性等于MY。FORM2,好了,那么一样,我还有需要一个提交按钮吧,这里边提交按钮CTR a ctrl v,再复制一个,它在往那提交呢,往二里面提交,这个叫提交A,好了,那现在咱们来看我这里边是不是就有俩按钮了啊。有俩按钮吧,那么咱的话这里边我给个123来,我点击提交,你看是不是A等于123呢,对不对,那其中这两个的提交呢,这两个提交我是不是可以用C啊提交C,你看B等于123 C等于123,你看这个时候是不是相当于我往两个表单里面提交都行了,哎,所以它的用法就比较方便,而且它没有破坏结构,看到了吗?看起来是不是就比较整齐了。
29:06
就是咱们这个H出为这个标允出,但对不对,那OK,咱们把这个给大家记一下啊,这里是没记的。好嘞。在这吧,叫HTML啊,不用我这块都讲完了,我在这啊,在属性之前HTML5的表单新玩法啊。HT和莫勒5HTML5。表单新玩法。那么咱们说了这个在。HTML。五中啊,为了排版方便,表单标签。允许跳出。Form表单之外对吧?但是要实现提交功能需要做两件事,哪两件事呢?
30:01
第一我们需要干嘛呀,为form标签添加ID属性对吧,第二呢,这个为。需要提交的元素。添加form属性,然后指定什么呀,指指定这个第一步一步。设置的ID值。即可啊好了,这就是咱们表单的新玩法啊,好了,那么了解这些以后,我们再来看这些相关的属性,其实这些属性有一些我们已经是了解的了,对吧,那么一样我们再来看一下啊,在这里边我把零四,因为零四里边我们写的这些内容是比较多的,对吧?包括下拉列表什么都有啊,我就直接用零四来做操作了,零四这里边我们给它复制一下啊,复制然后再来粘贴一下哟。错了啊。来在这里边。粘贴。OK,三天后我们给它改了名叫什么?叫做零五,零五叫做form form form at tibu attribute属性啊,At tibu OK,好了,那这个时候我们要演示的是表单相关的属性,OK,都有什么属性呢?刚才我们也看到了,那么第一个属性叫做什么?这个瑞的欧美是不是只读啊?
31:21
来,我就直接在这写了啊,叫做read read only read only。NL。Y啊,那这里边我给他一个值啊,这是默认值。好了,某人就某人吧,然后返回来到第四,第四这里边。刷新一下不是这个页面了啊,我们把其他都关掉吧,来。关闭。喂。关闭哟。关闭其他标签页呢?关闭所有呦。
32:02
关闭标签页好了,就留这一个啊,这一个以前也不要了,给它关掉得都关掉了啊,都关掉我火狐火狐重新打开。好了,重新打开以后,现在我们来看这里边是不是有是某人值啊,那么这时候我再往里边点,我往里边输入内容是输入不了的,对吧?这个内容我可以选择可以复制出来,你看我复制出来粘到这里,这没问题,看到了吧,但是你想修改是修改不了的,这里边获取不到光标了,看到了吧?哎,这就是咱们的这个read欧美属性,那么同样有瑞的欧还有什么呢?还有一个这个。我再来一个啊,叫做这是默认值,OK,那么这里边我加一个什么呢?加一个只读的属性,叫做disable Dis AB disable好了,那disable这里边我再来刷新的时候,你看它是什么,它成灰色的,我连选都选不了,注意啊,我选择完以后,你看我CTRLC我复制的能复制出来吗?来刷新粘贴,这是默认值,诶复制出来了。让复制了,原来不让复制的呀。我还能给它复制出来。
33:01
哦,那还可以啊来。这是默认值,我打的对啊,因为这两个是不一样的,对不对,那OK,可以复制了啊,可以复制,但这里边什么呢?它是直接是禁用项,对吧,我没有办法去选择,没办法获取焦点,这个呢,我read only呢,我是可以可以去选择的啊,但这里边现在它怎么也能选择了,正常这个是不能选择的,那我换个浏览器试一下了,我看那个这里呢。D disable,我没有打错吧?Re,应该没有打错来。我再来刷新一下这里边。你看它这个框是可以被选,被选中的啊,我复制一个。是没问题对吧,这里边。那也可以了,看到吗?只要只要你能选,那肯定能粘贴了啊。来再粘贴看到吧,这是默认值可以了,对吧,那他们两个现在唯一的区别是什么,就是一个是什么,一个是这个相当于。能获取的对吧,但是原来原来它是干嘛可以获取这个光标,光标能在那一直闪,现在不行了啊,但是这个呢,Disable这个呢。
34:05
直接成灰色显示对吧?哎,看的更那什么啊,这一个是什么,一个是只读,一个是这个禁用啊,但他们两个其实有一个区别,区别在哪呢?咱们看我这里面有没有提交按钮啊,我看有没有提交按钮,OK,有提交来你看好了。我把行来刷新,我刷新了啊,这回的我提交,提交完以后注意呃,Email从email开始,这两个没给名吗。这两没给明白,你看好了一个A。一个B,我给大家起个名了啊,起上了一个A一个B。那么接下来咱们再来看,我在这里面再来刷新,刷新,我一定要把后面所有的传参我都删掉啊,回车,回车以后我点击提交,提交的时候你看A这是某人值,B能收到吗?B是不是收不到啊,哎,所以这是他们两个的区别啊,Read only可以把值提交,但是deiv它已经被禁用了,值是提交不了的啊OK,然后再往下来还有什么呢?
35:01
看好了,这个select,这个不用说了,这可在下拉列表中做默认选中的,对不对,还有一个auto自动获取焦点,什么意思啊,比如说在这里边,呃,我看有没有普通文本域啊。Email吧,比如这个email对吧,这个email它本身排名都不排到最后,是不是排到这儿呢?对吧,我想做什么,当我一刷新进来以后,Email是自动获取焦点的,这就叫自动获取掉,是不是有个光标一直闪烁,哎,所以在这里边我可以在email这块给他一个什么呢?Auto fo cos,好,那现在我们再来你看好了,我在这里边刷新一刷新,你看email是不是就自动带焦点了,带焦点了相当于你看我这里边一刷新,我一输入内容,你看email是不是直接就进内容了。哎,这就是auto这个属性,那么同样有这个auto还有什么呢?还有这个对应的还有一个叫police hoer,它是干嘛呀,做默认值提示的啊,它代替了什么呀?代替了VALUE6的属性,做默认值提示,它不会像VALUE6属性把值随着提交去提交啊,你看做默认值提示啊,我点击提交,提交以后你看URL有这东西吗?是不是没有啊,诶我只有在这里边输入的时候才会有,比如说我输入一个啊啊,这里边再让他过a and a.a那OK,点击提交,你看这个时候我的UR是不是才有值啊。
36:17
对不对,哎,如果说比如说这里面还有AI的a.a我不给这个里边就不写东西,你看这个桌面认值提示这几个字会提交吗?走你。有东西吗?是不是就没有啊?哎,所以这个police holder就是用来干嘛的,用来做默认值提示的,代替value做默认值提示的好好了,那再往后还有什么呢?比如说这个number啊,我想让它必须有内容,如果没有内容的话,你就不能提交,对吧?那这里边我可以给它进行设置,叫做什么呢?Require re require,当我给他设置完这个属性以后,那么表示什么呢?用户必须为该表单赋值,如果不赋值不允许你提交来,你看好了我再来刷新啊,这里边。呃,Email我给了对吧,这个哎哟,我这块有默认值啊不行。
37:05
Y,这里边不给值啊,不能给值,你就给值了,它默认就有值了,所以肯定不用输入了,好了啊,这里边你看a and a.a得让它过呀,对吧,这两项我都让他过了啊,然后点击提交,提交以后你看这里面到了请输入一组数字,是不是告诉你必需要你输入不输入你看你走不了对吧,你随便输入,输入一个零行不行,他说请选择一个不小于一的值,因为这里边我给限制最小值是一对不对,所以我给个一。来点击提交。这回是不是可以了,哎,零一不也是一吗?对不对,哎,你看round,呃,不是round number是不是拿了个零一,哎,这就行了啊,这就可以了。好了,然后再往下这个完事以后我们还有什么呢?还有一个这个多选的,多选的,但是一般针对于什么,针对于这个文件操作我们会用到啊,比如说在里边我们来一个这个吧。Input input film,这是文件操作,但是记住如果设及多选我们的名称后面一定要加个中括号啊,这就跟我们什么跟我们这个呃复复选框啊,跟我们复选框是一样的意思,一定要加一个中括号代表什么,代表的是一个数组啊,那我PP获取就是一个数组,那么这个时候来看啊,我刷新这里边是不是多了一个什么,多了一个这个东西对吧?来点击浏览,那么现在咱们来看啊,我比如说找到我这里边有一个。
38:29
下面有pic。Pic,好了,咱们看啊,我到这个图片目录,我现在按住CTRL键点点,我能选择多个吗?这不行,只能选一个对吧,那OK,那么我加上这个属性,比如说叫做什么呢?叫做这个呃,Beauty player,哎。MU对ult MU player,当我加了这个属性以后,这个时候咱们再来看啊,我再来刷新,然后点击浏览。然后一样。这里边我还是要找到以面积下边的pic。
39:03
还是找到出位图片,然后一样,我还是按住口径键,看现在我是不是就可以选择多个了,选择多个我一点击打开,你看他告诉他们是不是已经选择了八个文件,看到了吗?哎,已经选择了八个文件文,我鼠标放的文件名也会给我列出来,看不看到?哎,这就是咱们的这个MU play可以干嘛呢?可以实现多选啊,可以实现多选。好,这块我也给个BR啊,给个BROK好了,那这个完事以后,我们再往下来,比如在设置这里边啊,我再给一个属性叫做什么呢?叫做这个。什么意思?是不是正则表达式?哎,这里边我告诉用户必须给正则,大家是不是对正则特别头疼?来刷新一下,看好了,我的正则在哪去了?我给的是谁给的是设置对吧?哎,现在啊,我给的随便东西我都能提交诶。不让我提交,不让我提交看到了吗?他说请匹配要求格式,为什么?因为我这里面什么都没写对吧?那OK,给个中号A到Z,是不是只有一个字母A到Z啊,哎,只要给这么一个就行啊,那OK,我这回再给A来点击提交。
40:06
嗯。刷新好了,这回来提交是不是可以提交了,对吧?我要给一呢提交这回不行,跟他没关系啊,来你看这个一是不是也是红的,请匹配要求格式对吧?那如果说我要给ABCDEFG不对,错了啊,我要给1234567,然后再来一个A好了,这个时候能提交吗?走你。也不行,看到了吗?我这块给这么一个,它就代表一个。就代表一个,就代表你这里边只能有一个看到了吗?只能有一个啊,如果说你想给两个,那怎么办?我第一个比如说你看好了,我给他限制,第一个是这个W,第二个呢,我是这个还是W,第三个都W,然后第二。对吧,点二我要不要给他转移,我给他转移一下吧,然后A到Z。加啊好了,那现在你看好了,我来刷新,我给他一个W。
41:00
不WWW点对吧,然后A到这家,那我就给个A好了,这就可以提交,看是不是就可以过来了,看到了吗?可以走了啊在哪呢,找一下设置,设置在这呢,看到了吧?哎,那咱说了,只要是这里边呢,3W点百度是不是都是符合要求的。对不对,你看我一点击提交这块又要给数字了,来点击提交是不是也可以提交走。看到了吗?哎,这就是干嘛,我直接在表单里边就可以写正则,让你按照我的正则来走啊,按照你的正则来走好了再往下来。还有什么呢?还有这个number这里边number number number这里边我是不是已经设置了最小值跟最大值了,哎,这两个属性我就不说了啊,那么还有一个什么呢?我还可以在这里面设置它跳的这个。跳多少,比如这里边啊,一到30吧,啊一到40也行,一到50吧,然大一点,那大家知道这里面你看好了,刷新一下,我number这里面的最小值是一对吧,往下减是减不了的,然后最大的值我可以一直往下加,加50,但是你看我每次加的时候它是不是都加一啊,那现在我不想让加一了,你看我可以进行设置对吧,比如说叫做。
42:07
呃,跳步跳步STP。STPOK,哎,设定这这个叫做什么?设定跳步的数值,或者说设定这两个数值之间的间隔,对吧,那我从一开始,比如说我叫他跳五个。跳舞就是六了啊。来吧,我应该从零开始才对。没事,但大家明白这意思啊,来,你看我现在刷新是一对吧,往上点是一,这是一,一往上走五是不是就六啊对不对,哎,然后再往上11,这每次都是这样的,那我应该怎么让他设置跳几个跳四对不对,跳四我从一开始呢,就让少跳一个呗,来再来上一,再上五,再上九也不对。也不对吧,因为只有第一次是对了,我再往后加四是不是还不对,所以我这里边啊,你看我最小值是一没问题,那么我想下跳,我应该当前值是零对吗?然后这里面给他每次加五,那这个时候你再来看刷新。
43:03
重新发音好了,现在大家是不是零啊,加一个一对吧,然后再加诶。我给错了吧?呃。当前值给它设置为一,最小值给它设置为零,对吧,最小值给设置为,当前值给设置为一啊,然后他每次跳五,这个我们来看啊刷新。好走你五,再走十十五二十,这回是不是对了,哎,你看这位是完每次走五,然后我再往上点到50,再往上点,点不上去了,看到了吧,哎,这就是他设置这个跳步的。值啊,叫使用什么使用STEM来进行设置啊,好了,那这个完事以后再来,现在咱们看啊,我表单中是不是各个表单都在验证,如果说咱们来看,我在这里边,我把所有东西都给他清空,诶错了,扫一个什么扫一个了。我先点击提交,是不是肯定提交不了啊,哎,这里面各种验证,我一个一个都在给他输入过,这里面什么验证啊,刚才给的什么提示。
44:05
好了,这回能走了,看到了吗?哎,我的email的验证怎么没给我验证呢?以email为空啊,以命不为空,对吧?以命不为空。Number require强制赋值了哦,那好,我们换一下啊,在URL里边我也给个require,我让他干嘛呢?你就必须得给我给值,你不给值我都不要你提交,我是这个意思啊,现在你看好了,我来提交是不是都给你爆红了,哎,那OK,那有的时候我就不需要你这些提示,我能不能做到呢?也可以,我可以取消你所有的这些验证,怎么办?我在这个form标签,注意在form标签里边我加一个属性叫什么呢?叫no。No,干嘛呢?取消表单验证,取消表单验证啊,这个时候你再看啊,我来再刷新一下,刷新完以后我点击提交,你看我是不是直接提交了,所有验证都没有用了,你看啊A标签我是A个email标签,我就给个这个内容来点击提交走没走是不是走了URL我给个这个内容点击提交是不是都好使,看到了吗?就我不按照规则都可以了,数字我给个这个提交是不是数字都能走了,看到了吗?哎,这就是咱们这个nova date这个属性啊,可以干嘛呢?取消所有表单的验证,所有表单的验证啊。
45:16
好,然后再往下还有什么呢?你看啊,我当前提交的方法,默认的时候是不是get呀,对吧,默认就是get,我不写这个方法也是get,好我想用POS提交,当我提交这一刻,比如说当我在这里边点击提交这一刻,我采用POS的方式提交,怎么办呢?我可以通过form叫做。呃,Master的属性来设置为post,这个时候一点击提交,直接这里边内容都为什么都为post了,那现在咱们来看啊,我一样这里边刷新,我把这里边东西都清空掉,清空掉以后,现在咱们看我这里边先给一个值吧,给一个值啊,我一点击提交,如果提交走了,这个值是不是就变没有了,哎,Posts是不显示在这里的啊,来点击提交,你看值没有了,这块内容是不没显示。哎,那也代表什么走POS的提交了吧,包括还可以干嘛呢,我还可以设置提交的这个页面啊,For for。
46:09
X提到哪了?比如说我提交到当前目录叫做div加CSS,点赫特莫勒,哎,也就往这个页面走了,看到了吗?然后这块呢,大post,那就postose吧,好吧,那这里边你看好了,我再来刷新一下,然后呢,我点击随便给一个吧,点击提交,你看我搜到哪了,是不是到div加CS在这里边来了啊,也就是我在提交的时候也可以去改变它的这个路径,对吧?包括我在提交的时候还可以干嘛呢?还可以去设置它的这个表单的传输方式啊,咱们再看这里边我给大家记了啊,用于在提交按钮中修改当前表单页面提交方式,对吧?这也是修改表单的啊,这是提交的页面,这是提交方式,这个是提交的这个数据编码格式啊,然后包括no取消表单验证对吧?适用于form标签我已经说了啊,然后再往后ste设定跳步的数值,然后parent multiplayer max这些我们都已经给大家介绍过了,那还差最后一个叫什么呢?Cable index切换索引属性什么意思?咱们来看啊。我现。
47:09
它当前在这里边,在email里边是不是有索引了,光标只要一走人是不是有索引啊,我按一下table键是往下来,你看它是不是按照顺序一直在往下来,看到了吗。我按一次table键,它是不是就往下来呀。好了,现在我给它切换索引,我就拿这四个演示了啊,拿这四个演示了,比如说当天在week里边,我切一次下来,再切再下来,再切再下来,是不是这意思啊,好,你看好了,咱们找到这四个,这四个里面我为了大家能看出效果,我给它一个默认值啊,这里面value,比如说我给它三。这个Y6我给他一。这个Y我给他四。然后这个Y6VALU我给的二好了,我就是12344个,我是打乱顺序的,对不对,那么现在打乱顺序无所谓,只要当外面选到这,我再往下往下。诶找一个呢。
48:03
Time time,这里面色没有用啊。嗯。这里面改一下吧,Y6为二。这里边为四,这里边为一,这里边为三,好了,这个没有用对吧,这个没有用,我就给它关掉了啊好,那现在我们来看啊。对。刷新刷新完你看31242有了吧,我光标选上来,你看下下下对吧,再下就到这儿来了啊,那现在我table index干嘛呢?就是来设置这个切换的索引,比如说你看好了table。Index等于几等于三啊,我我要的跟这个数值对应,是为了大家好记啊,来再来table index等于一,然后这里面再来。四啊,然后table index等于四,然后这个table index等于二,OK好了,那现在都写完以后,你看啊,我来刷新一下,刷新一下我把鼠标放到壳里面,这是不是三,我切到哪了。
49:07
是不是到四这来了,看到了吗?我如果把这个光标放到一,你看好了,我切是不是到二,我摁table键摁到二,再摁table键到三,再摁到四,我摁shift加table往上反321。看到了吧,哎,就是干嘛呀,指的是你切换的这个顺序啊,你可以通过它来去改变你切换的顺序啊,好了,这就是咱们HTML5中新增form标签相关的所有内容。
我来说两句