Web前端入门教程 03 HTML教程 03 HTML表单(下) 学习猿地原创

好。然后呢，我们一样在这里边再来创建一个目录，叫做code，使我们今天的代码都会写到这里啊。然后右键用我们的电器打开啊。那么一样，我们还是继续学，我们HTML里边放表单的部分，那么这些呢，是新增的表单类型，那么新增的表单类型有一些是我们常用的，有一些是我们不常用的啊，那么咱们来看一下啊，比如说第一个它是新增的这个什么呢？Email对吧？Type等于email，可能有基础的人早就知道这个东西早就有了，对吧，但是实际上咱们在讲的时候就说了，HTML1999年就有了，对吧，所以呢，只是没人去知道或者没人用而已啊，所以这些东西呢，早就已经是有了的，我们是可以去使用的，那么在这里边。新建一个HTM文档叫零一。然后这里边要想写表单的话，一样还是放标签开始。把这里边的内容往里面缩进一下。

Method的方式，我们依然是使用改的方式，然后第一个我们叫什么叫做邮箱验证的啊，然后我们input给他的是什么是em AI l email对吧？那么邮箱验证的又是什么样效果呢？咱们来看一下啊，我们正常输入完内容的话，来，比如说这里边input s me，我们来一个提交。能看能看清吗？你俩看一个。啊，那加上这个标签以后啊，为什么说HTML比较简单，比较好学，你们现在难的就是我记不住这个标签而已。对吧，啊，那如果说啊，就是咱们说如果在真正开发的过程中，你说就是哪怕这些老程序员也都能记住嘛，他们也记不住。啊，就是常用的那十个他一定是记得住的，但是不常用的那些他也记不住对吧？所以说为什么我们在很多时候会说我们在开发的时候都是基于什么呢？基CV编程对吧？C编程这位知道是什么意思了吧？啊所以说就是这么回事，那现在你看啊，那咱们把这两个都加上来以后，我一个一个这个可以输入框对吧，一个提交，那么同样在这个表单邮箱验证之前啊，我再给他一个HR，然后在这里边我们再写一个普通的文本域啊sub命啊不对，普通文本域叫什么test，然后起个名，比如这个叫user，然后邮箱这个呢，我也叫email对吧，那现在咱们来看啊，比如说在这里边，我在这里面输入内容a me对吧？注意啊，邮箱没有输入啊，我点击提交，这是没问题的。

对吧，那么现在再来你看额的密邮箱里边，我直接打个的密行不行。行吗？他给我提示能看到吗？他说什么呀？请在电子邮件地址中包含什么东西？圈A对吧，这个叫艾的符啊，艾符以后不要再读圈A了啊，叫艾符，那么也就是说只要你加了一个艾的符是不是就可以了，那你再提交行吗？他说什么呀，按的不完整对吧？因为邮箱的完整格式是什么样的？

有了爱的福以后，后面一定会跟一个内容对吧，然后还会跟一个什么呢？点点后面还会跟什么。不一定是。com，有没有点CN。对不对，有没有点VIP有各种点，所以后面点后面也是一样，一定要有一个字符，它就会过。明白吧，这样的话，这个邮箱验证就会过，那么点击提交，你看过没过来。过来了吧，哎，所以说它就是什么呀，带有邮箱验证的这么一个规则，那么邮箱验证的规则就是里边要有什么，就是艾特前面要有一个字符，艾特后面有一个字符，然后后面还要有点点后面还有一个字符，这就是最基本的一个验证了。明白吧，所以我当我这么去写的时候，你看我再提交他一样能过来了。看明白了吧，这就是邮箱验证的一个规则啊，那么同样邮箱完这以后还有什么？

这个URL验证。URL验证，那我们再来看URL验证又是什么样的啊，来这个URL，然后这里边我们再来一个BR。看一下啊，比如说这里边我们给个3W点百度点com，这算不算。哎，对了，没有协议，当然我在里面打开以后，它其实你看我点击提交，他已经告诉我了，请输入什么网址，那咱们说了，我输入这个东西叫网址什么不叫对吧，这个东西叫什么叫域名啊，什么叫网址呢？必须带有协议HTTP冒号。这样可以吗？差什么差俩斜线是吧，杠杠对吧，那这个时候我再点击提交，你看是不是才提交上来看懂了吧？哎，如果你单独的去写那一个是不行的啊，那如果里边网址里面带参数，能不能提交呢。

百度点。com下边，比如说index PP，然后问号A等于ABC，这能理解吧？哎，那这个时候我们点击提交可不可以？可以看到了吗？哎，所以说什么叫UR，大家要分清，你单独的是这么一个东西，它不叫UR，它叫什么呀？它叫域名好吧，哎，所以这个大家一定要分清啊，这就是带有这个URL验证的，那么再往下还有什么呢？还有带有这个。数值验证表单啊，Input等于number对吧？Type类型等于number，然后name一个值，然后这里边都没有value，它默认给了个ID对吧，那在这里边也一样，我们给他一个B。B。你只需要你你前面的课你没听过，前面的你没听过，你只需要现在记现在就行了，它就是一个标签，一个效果记标签记效果能明白吧？啊那再来刷新，这里边有一个数值验证表单，数值验证表达什么样的，你看当我把鼠标选中以后，它会有一个。

这叫什么东西上下标对吧，我点上它可以加，我点下它可以减，对吧，然后呢，在这里边我还可以干嘛呢？我自己输入是不是也可以啊，但是我输入ABC行吗？我输入了啊，你看我键盘一直在响，但是内容没有进来对吧？我只能输入数字，那能不能输入小数点呢。可以吧，点击提交告什么呀。行吗？输入你是能输入的，但是人家给你一个提示说什么呢？说有效值，诶这个有点太大了啊，我给个这个1.1吧，来点击提交，他说有效值，这两个最接近的有效值分别为什么呀？一和二，就是说你要么是一要么是二对吧？哎，所以说它只能放什么只能放。这个整数值对吧，整数值里面包含什么？包含着正整数零还有负整数对吧，我给一个负十，你看行不行。行不行，能提交，我这里边提交没有值是因为我没写什么呀。

Name，哎，对了，必须有name他才能提交到这个地址栏上，对吧，所以在这块我们给他一个复十走你。是不是可以？那问题来了，这个表单里边能装的最大值和最小值是多少啊？不知道，你可以拿值试一下呀，永远都是九，这已经很大了，对吧，我给了好多点击提交传不上来。传上来了，看到了吧，这么多酒啊，那么算一句话来说，这个表单能装能装的最大值，在盖的情况下能存的最大值，是不是刨去这些的站位以后，剩下的都是他的了？能明白我这么说是什么意思吗？咱们get地址栏里边能存储65535个字节，对吧？一个字符就是一个字节，那么也就相当于它能存六万多。是这样吧，那好，比如说这里边我占了五个，这里边我占了6789。

十、11、12。13 14 15 16 17 18 19 22 12232425，二六，二七，二八，二九，好了，剩下都是他的。对吧，就拿6万减去它，剩下是不是都是这个数值表单了，对吧，但是咱们平时存肯定不可能存这么多嘛，啊那也一样，记住只要是数值表单里边就一定会有一个属性，什么属性。最小的还有。最大的max对，一定就会有这样的属性的出现，最小值比如说我告诉他为多少呢？为零，最大值为多少呢？为十是吧，比如说像我们那个，呃，叫什么购物车，购物车上是不是有加减的符号，它购物车跟他是那个那个表单是长得不一样，对吧？但是呢，购物车有加减符号跟它是一样的原理，你在点购物车的时候，你永远不可能点到零上。对吧，就最小值是几一是吧，我这里面最小值是零吧，那现在你看啊。

是不是永远都点不下去了，我加。当我加到九再加十的时候，再往加的时候，你看是不是也加不动了，对吧？当然了，那我手动输入能不能输入个11啊，这是没问题了，但是能提交吗。你看他告什么呀，值必须小于或等于十，看到了吧？而且大家有发现这个表单原来默认是挺大的，当我把值一旦设小以后，表单是不是也在缩小啊，看到了吗？哎，其实表单这里边还有一个属性是可以控制它的大小的啊呃，我拿这个普通文本域来写吧，比如说给他一个size属性，然后我给个三，然后你看它就缩小了。看到了吗？代表这里边AAA其实就能存三个吗？肯定不是，你看啊，我徐肖。熊，这是它的默认大小，看到了吗？但是它不是绝对的好吗？不是绝对的啊，你看我再给个A，这个A就显示一半了吗？看到了吗？哎，那OK。这是咱们这个，呃，Size这个属性，这个属性，嗯，记一下吧，啊这个属性记一下吧，用的比较少啊，因为什么呢？因为后期我们可以通过这个。

宽高对吧，可以通过它的宽度来去减小这个它默认的大小的样子和通过宽度来去给它放宽，对吧，所以说这样的值呢，我们用的就会比较少了，好吧。那OK，这是带有数值验证的表单，然后再往下还有什么呢？还有这个叫什么滑块表单，它是一个范围内的验证滑块。表单滑块表单长什么样呢啊？Round RA怎么写来的？RG是吧，好了，然后我来一个。验证的英文怎么说？CPCK来。看到这样的了吗？就是长这个样子。啊，就是长这个样子，当然了，这个东西肯定也大家要你见到就只要见到这种死的东西，它一定未来要配合着GS才能做活，对吧，你比如说这种这种效果，我们平时见没见过。

见过吧，在哪儿？登录验证里边可没有这个吧，登录验证里面是让你从左滑到右滑一下做验证。啊，划一个图片对齐，但是它不是用这个那个可不是划块表单啊，划块表单是有值的范围的，知道吧，你看啊，比如说来其实你们这你们调过鼠标那个那个就是这个鼠标那个针的这个快慢调过吗。哎。太对了，来。这种见过吗？后面是不是有值的跟着呢，最小值是零，最大值是不是100，这是在什么呀？范围内的验证就是你只能是零跟100之间，你想再小小不了了，再大大不了了，看到了吗？啊，那这个时候你看啊，嗯。

哎，这里边也一样，既然说它有这么个验证，那是不是就有这个MN最小值啊，为零对吧？Max最大值我也给他十，那现在也就代表的我们可以想象一下啊，这个表单就是这个滑块，就是从零到十的范围对吗？但是呢，它默认是在中间的，中间相当于是几啊五，我能不能给它调整一下呢？是不是还有一个Y6属性啊v lue，这是不是当前值对吧？当前值我给它设为十的时候，你看我再刷新它是不是就满格？对吧，当天值我给它设为零的时候，我再刷新它是不是就在头上了，看明白了吧，所以这个东西它是什么，它是在一个范围内的验证。啊，它是一个范围内的验证啊，然后再一个就是说，嗯，像刚才我们说了这个。HTML我说了这些验证是不是防君子不防小人的，就好比这个华，这个叫什么数值表单，咱们是不是给他了，如果给11我能提交吗？

提交不了对吧，我改一下。你们只需要看啊，看我能不能提交啊，来找到这个11，这是不是我设置的好，我给他设为12，这个时候再点击提交，听没写上来。看懂了吧，所以它只是防，防什么防君子不玩小人的，你只要会他，就没有那过不去的东西。明白吧，所以前端的所有的验证都是一样的，原理能清楚吧，啊，那OK。好了。这个东西你不用学啊，这个东西你不用会啊，这个东西没有用，我只是给你演示一下而已啊，好了，那滑块表单完事以后再往下来还有什么。Search搜索。来一个BR叫做搜索，那么以后我们在布局的时候，如果你涉及到搜索框的时候，知道用什么来做了吧。没打错吧？SERCH。

然后我们再来看这个搜索啊，搜索好像没什么效果是吧，搜索里边以前在写的时候还是要加一个什么属性，它会有一个什么呢？它会有一个小图，就是有一个小这个，这个叫什么放大镜，哎对，有一个小放大镜的那个效果。就相当于就类似于啊，当然这些东西都是自己后做的啊，就类似于这块，你看这块是不是有一个这个这个呃，照相机的这么一个小图标，对吧，而这个搜索小图标呢，他他原来是在这块有一个那个那个一个小圆圈，一个小圆圈带一个小小小杠，就像小搜索那个小图标似的啊，但是呢，现在咱要那图标没什么用，因为后期你都会给他改掉了知默认的效果不是你要的效果知道吧，但是呢，你只要用了这个搜索域的话，它会就是浏览器会知道这是一个搜索的表单，仅此而已。明白啊，然后再往下来还有什么。再往下这些都没有，没有再往下的都没有用了啊，Color的可以给你看看来。

Color干嘛呢？Color是什么意思啊？颜色选取对吧，那input type等于Co color，然后这里边我们给他一个color，然后你看一下它长什么样子啊。走，你看到了吧。这是不是元帅选举啊，嗯。对吧，我可以任意的去选一种颜色，当然这个只在这是红红白黑的范围，对吧？那么我可以通过它来去调不同的范围，对吧？然后它这里边什么RGB是不是三原色呀，对吧？HSLHSL什么意思知道吗？它能支持的颜色要超过RGBRGB最大能支持255种颜色，而它能支持65535种颜色，它就叫真彩色的，相当于就是你在大自然界中看到的所有颜色都可以用HSL来表示，这个HSL叫叫叫，什么叫色相？色相饱和度。

亮度哦。啊，色相饱和度，亮度，它是通过这三个来拼的颜色啊，等到讲到CSS时候，我给你们调出那个图表，让你们看一下啊。然后呢，就其实正常在咱们布局页面的时候，说白了咱们能用到这么高的颜色吗？基本上用不上啊，没有对局颜色有这么高的这么一个需求了，除非你做的什么呢？做的是这种专门是针对于颜色，或者是针对于这个美工设计的类型的网站的时候，可能我们会给他提供更多的颜色的选取，对吧，否则的时候我们做不到用不上啊，就RGB足够你去使用的，这还还有这是什么东西。16进制了对吧，然后再回来2GB，它这里边一共有三个选项啊，可以供你去选，然后再往下来，这是咱们颜色选取，颜色选取完之后是不是还有一个电话呀。这个就。真没什么用了，来给你看看啊，正常来，咱们理解电话选取单，那应该长什么样子呢？

没写中文吧？给一个啊，叫做电话表白。看看吧，这里边正常写电话是不是这么写13812341234，这没问题吧，我加俩行不行。怎么不行呢，提交上面没诶诶。看好了啊。呃，号。哦哦哦。有有有，那得你先坐谁那看谁的电脑，你先坐他旁边吧，搬到这来吧，坐到他那可以看他那个那个显示器。要不你坐我旁边也行。坐这。

来你看啊，这是电话号啊，1234 1234没有问题，总共11位对吧，我再加两位来点击提交过没过来过来了，他只是代表了电话表单，他没有电话验证的功能，明白吧，为什么说没有呢？因为有的电话还是什么样的，比如说中国区的应该是加括号八，哎，哪去了八六，然后后面空格才写电话对吗？所以他没有办法做到完整验证，还有的电话号是什么呢？是这样的。对吧，是不是还有这种座机号，哎，所以说他没有办法去给你做验，只是代表什么呢？当你用了这个表单项以后，浏览器知道这一块是电话表单。明白吧，然后再一个是什么呢？就是在移动端的时候，能通过它能调取数字键盘。

能调取数字键盘，明白吧，咱们你大家有没有发现，你比如说你上那个，呃，就是你拿着手机端登录网银啊，就是网就银行里面做的这个是要求的最高，其他的软件可能会比较少一些，当你在网银里边输入那个就是用户名，不用咱们输入对吧，那个密码，咱们那个银行密码是要在咱们输入的吧，当你调取那个银行密码的时候，你会发现它那个键盘会自动变成不同的，对吧，比如说你的这个这家银行，它可能就要求数字，它会马上打开的，第一个是数字键盘。他不需要你再去调整了，你比如说正常我们聊微信的情况下，你打开肯定是你默认的那个叫什么英文键盘对吧，然后就是打正常你平就平时设置好了嘛，然后你要用的时候呢，你可能比如你要打数字的时候，你需要再切换成数字的，打英文时候再切换成英文的，是不是这样的啊，那么它就是什么呢？它就是默认先给你调出数字键盘来，然后你让你正常输入数字，它是这个意思。能明白什么意思吧，但是它不是没并没有达到完全的一个实现啊，但是呢，我们在做移动端布局的时候，它会有特意这个特定的控件，我们这个特定的组件，我们通过拉对应的这个组件来去实现啊，所以这也是一个细节，其实说白了我们主要做的是干嘛呢？就是提提升这个用户的体验度。

对吧，你只要让用户开心了，那么你的软件就是你的前端的责任是不是就OK了，对吧？如果用户用的不舒服，他觉得这个就很麻烦你我本来就是要输入个数字或者打个电话的，你非得先给我调出这个汉字的，就是这个这个拼音的键盘，然后还得自己切成数字，那他就很不爽，对吧？所以归根结底做互联网开发，其实说白了就做一件事，为懒人服务。你想想是不是这个道理对吧，是不是就为懒人服务，那在为，那你要想做出这个软件，能有这个很好的用户体验度的话，那你就让用，让用户变得更懒。其实说白了就是这样的，对吧，你让你的软件更智能，用户就会变得更懒。没错吧，哎，所以做这个就相当于是为懒人服务一样，所以你的心一定要细，一定要去注意好那些细节，就像今天早上我给你们测试一样，我提前已经告诉你们了，测试题里边有坑，对吧？那你们就要心细一些，那你们没有达到那个效果，那今天早上测试你们没有达到效果，原因是什么呢？原因是你们再去写跟练，还有看的时候太少了，就每写一个标签。

你们下来练的时候，一定要像我给你们讲的时候，你看我每打一个标签都会在浏览器里面刷新去给你们看。对吧，只有这么练才是最管用的，其实你说这些标签，那我自己他我写完之后，他会出现什么样，我脑子里没有印象吗？我一定有的，对吧，我基本上都会记住这些标签，它会出现什么样的效果，所以你们也要这么去练，只有你们这么去练了，你们在拿笔和纸去写的时候，你们的脑子才能会去跑代码。明白我说的什么意思吗？啊，就像今天你们写表格似的，你自己写完之后，你其实你的脑子就是你的浏览浏览器，你已经能出现这个结果了，这个表格是对还是不对了。

能明白吧，哎，好了，再往下来电话完事以后还有什么，还有这一组时间呢，对吧，Date time week Mo date time-local，那来我就直接给他一个横线了啊，然后这是时间范围的input，第一个什么date错了，Date。然后这是什么，这是日期对吧，嗯，一个一个看吧，来吧。看一下日期长什么样，年月日，然后我们可以进行什么进行去选择，对吧，包括呃哪一年。看到了吧，但是注意啊，这个东西它不是所有浏览器看到都是一个效果的，对吧，这个我之前跟大家就说过啊，只是每个浏览器看到的效果是不同的啊，它这个在这个是什么呀，谷歌里边是长这个样子，那可能在火狐里面它就变样了，对吧？所以最后呢，我们统一还是用其他的组件，就是来去写的明白吧，那这是我们的这个叫什么？呃，日期选取日期完事还有什么，还有时间选取的input time。

看到这个时间了吧。啊，就是十分嘛，但是他没有秒啊，他没有秒，他只有这个十分，然后再往后呢，还有什么呢，还有这个周选取叫we。每年的第多少周看到了吗？比如说我往上选啊，咱们去找到，呃，一月份一月份这是不是就第一周了。看到了吗？啊，然后再往下往下推，第二周就是从它是按年开始算的，就是一年的多少周啊，然后还有月。月的单词怎么拼呢？NTH是吧，嗯。来。哪年的哪月，这个一选就是一个月了，看到了吗？是不是一选就一个月，哎，这是年月，还有最后一个是什么。Data time跟local对吧，其实它实际上啊完整的就正常，还有一个什么呢？还有一个是data time，但是data time不支持input，叫做data time，好了，你看一下啊，我的data time长什么样。

这什么东西？它是不是就是输入框了，对吧，其实这里面你想啊，我给你们写一个好玩的，有大熊的这个输这个这个类型吗？一定没有，但是是不是也是一个输入框对不对，就是说其实要么说HTMMR特别好学，好学在哪呢？就哪怕你真不会，你随便往里边写，他也不会给你报错，而且还能实现效果。这是他的好事对吧？那当然，你说这个大熊的表单能提交吗？我这个叫DX吧，来看看能不能提交123 123走，你提没提交，你看他还提交，但大家都知道没有这个类型，这是我自己写的对吧？哎，这就是他这个原因啊，然后呢，这个data time，诶错了啊，Date time。

我不是要打钢老口啊，正常情况是有的，但是只有欧朋浏览器支持，就欧鹏里边会显示，其他浏览器里面是没有的，所以说就不用它了，那用的什么呢？用的就是这个datatime-local，它是一个完整的时间表示，看到了吗？完整时间表示什么意思啊，就是把这两个合一起了嘛，你刚才我们是不是学了一个date，学了一个time对吧，那data time加一起了嘛，就是这样的一个，就是具有着什么，具有着年月日时分，但是没有秒。没有没。看明白了吧，哎，那OK，这就是时间选取表单这个几个表单，时间选取的这这几个加电话这个作为了解就可以了啊，颜色选取表单用的也少之又少，然后网上的这些像搜索呀，数值验证啊，邮箱验证啊，URL验证啊，这些用的是比较多的。能明白吧，哎，那OK。好了，那这是我们的这个表单一样下来需要你去记啊，然后再来看这里边常用的属性我又都给你们列出来了啊，那这里边。

诶。我再来新建一个文件，比如说叫02FOM。就是你们的代码创建完是不是也像我这个样子的，然后呢，大家别懒，你别上来就哐哐哐开始往这写啊，你先把这个缩进的格式给他排出来以后再去写啊，然后form。设置里面，对，在设置里面可以改。主要我不更懒吗？其实我应该改一下，理论上来说，因为我打的太多了是吧，来这里边input来一个，比如说我们做一个什么呢？我们做一个会员信息的修改吧，来会员信息修改你们有没有见过，就是那种在修改信息的时候，有一些选项你是无法修改的，但是你可以看到见过吗？

HR见过这样的效果吗？哎，你说的对。比如说啊，银行卡，银行卡。谁能记住自己的银行卡号？身份证号能记住，烟卡记不住？好了，然后咱们要想让这个表单里边默认显示出这个值，我们是不是就要给通过value来控制了，对吧。62284个零。1285040518。我银行卡号我能记住。然后我们来给一个，你别别别往里转账啊，我不退啊，好了咱们来看啊。我这里边是不是有一个银行卡号啊，对吧，那你想啊，我们比如说再去修改信息的时候，我们可以修改什么呢？比如修改电话。

TL，然后同样我们给他一个value流，我们因为在做修改的时候，他一定是把你原数据都查询出来的，对不对，然后比如说1573。334672299，没拿错吧，没有电话，然后我们再给他一个B，然后还有姓名input taste，然后咱们叫username，然后value v Lu，然后来一个徐骁雄。好，现在咱们来看啊，这是不是相当于我的基本信息了，对吧？然后我们再给他一个修改的一个按钮，给他一个BR，然后input sub，这回叫什么叫修改，好OK，这是不是一个基本信息改修改啊，那你说咱们说了卡号肯定是不能让用户更改的，你可以更改什么呢？比如说你手机号换了，我可以更改个手机号11223344，这没问题，对吧？或者哪天我名改了，我给改个名，正常名肯定改不了。

对吧，名也是改不了的啊，所以说这个时候咱们来看啊，我能不能提交啊。没问题，咱也用不着提交了啊，咱就看吧，现在卡号是不是也能改，因名也能改对吧，但最终这两个咱们说了肯定都是改不了的，那么改不了的就有两种情况，第一种情况给的设为什么呢？Only。什么意思啊，你们这英文你不天天读英语吗？就读成对了，只读吗？对不对，Read是什么？读only的仅仅对吧，那是不是就是只读啊，哎，那OK，现在但是变成只读了，咱们看啊，我选中了吧，选中以后我选中了看到了吗？我能打吗？我一直在按着键盘对吧，根本就打不了了，就是你只能看。

但是我能给它复制出来看到了吧，哎，这就什么，这就是只读属性啊，然后还有一个什么呢？还有一个就是禁用的叫Dis。来，看到徐枭雄这个被禁用了吗？看到了吗？他不能CTRLC复制，是不是也能复制出来，但是他们两个的区别是什么呢？如果说你加了这个，呃，瑞德only的话，这个表单它还属于处于激活的状态。还属于处于激活的状态，现在我没有办法给你演示啊，等到我们讲到CSS时候，我会给你演示这个东西就是表单，它还处于激活状态，就是正常操作还是可以的，明白吧，而当你设了这个disc的时候，这个浏览器在执行到这块的时候，他会默认为这个表单就是什么呢？就是被禁用的状态。啊无法使用钻，所以它最终你看它是以这个叫什么？呃，对与这个灰色方式来显示的，对吧，而且你也选中不了了，这个呢，起码你看我一选中的时候，他这个这叫什么东西。

呃，这个叫这个框对吧，还有这个一个黑条，其实在可能也分一下浏览器啊，咱们来测试一下。呃，在这个叫什么火狐里边来。你看它是不是都有一个选中的一个效果，对吧，你看这个还有吗。没有了，看到了吧，这就是被禁用的一个选项，能明白能明白吗？啊，那好了，那再往下来看，还有什么属性啊。这里面属性就比较多了，Select为下拉列表定义，默认选中这个我们学了吧，啊，那OK，我可以过了对吧，然后再往后呢，Auto什么意思，自动获取焦点，什么样叫自动获取焦点呢？咱们来看啊。比如说在百度这里边，我点击登录。嗯。而且我什么图打开的百度呢。来，点击登录。假的。

有网啊，我百度都能访问了。他只是慢吧。可以的。能拼得通。就是慢而已。这也关键，这也太慢了，换一个我看看，其他的来京东这看。360嘛，360相比这个要。好一些。这不怨人家，是咱自己网啊，这都访问不？还不了。我觉得我的这个我的这根网线的网速还没有你们那个色的网线的网速快是吧啊。不是不是跟我设备没关系，妥了，这不好使不好使，我也演示不了了，这爱莫能没，没办法了，这个这个属性先过了吧。

对，没事，我用我一会自己写吧，来为什么要说有又要有这个属性啊，比如说在这里边咱们再来一个啊HR我们给它分开，然后我们自己去写一个登录这种行吗？写了登录以后，然后这里边要有什么，有用户名，然后给它这个input test test，然后我们写上，呃，不对，叫UUU。然后给他一个这个BR，让他来个换行用户名完之后之后是什么密码吧，密码啊，这个密码我就不用密码域了，我还用普通文本域，我用普通文本域的目的是我输入内容你们可以看得到好吧。然后来一个BR，然后接下来是什么？登录input me叫登陆。好搞定。用户名密码，这是不是相当于一个登录页面对吧？最简单最难看的登录页面出来了，那么登录页面里边我们是不是还要给用户一个提示啊，那用什么属性做提示？

啊，Pleaseer，对吧，你可别给我拿这个value做提示，我在讲的时候是不是刻意说了value可以干嘛，可以去显示默认值对吧？哎，所以提示的时候不要用value，用什么呢？用这个p please hoer，比如说这里边请您输入用户名，对吧？那么现在你看是不是就有了，有了以后，那么当你比如说你调出这个登录页面以后，当你点击它开始输入内容，那个提示就会没有，当你把它删掉以后，提示是不是就出来了，对吧？但是这个时候咱们说了，咱们要想用户体验度高，是不是让它变得懒，但是用户要点一次。是不是才能输入，那现在我让它变得更懒干嘛呢？Auto auto好了，你看我只要一刷新进来你看啊。

一刷新关了它。重打开是不是相当于我调个登录页面，你看进来就选中它了，我什么都没动，我鼠标都在这边放呢，我自己直接往里面输入那种，看到了吗？哎，就是方便你用户直接输入了百，我为什么刚才要拿百度，因为我记忆中百度登录好像就是进来以后你就可以直接输入，不用去选择。所以我就要想去调他，就是这个原因，你们有网好，你们自己试一下吧啊。我是加两个。啊。什么加两个？加两个奥真有思想，来加两个听谁的？听上面的，听下面的，来这里边刷新刷新，听上面听下面的，他走的是什么？走的是第一个，我没有复制错吧。Auto auto默认第一个存在是吧，那好了，咱再看一下，你就知道我把这个放这个是不是激活了来。听谁的？

他永远听第一个的啊，他跟其他的不同的原因，我告诉你除了这个属性以外的其他属性基本上都是最下面的，他的不同原因什么，因为用户你不管放多少用户的第一笔。对吧，他要看用户的第一笔是谁，你不你没你们就算你们正常上某一个网站登录时候，你可能从下往上输入吗？不可能吧，你不可能进来，诶我先给个密码，然后我再上网上去，我再输入用户名，肯定不可能，对吧？而网站比如说做做登录，因为登录和注册表单用的是最多的，对吧，那么第一项是不是往往就是我们的用户名。对不对，哎，所以说它永远都是在第一个里边啊好了，这是咱们的这个奥。再往下please holder不用说了，对吧，然后这个比较有意思。干嘛呢？强制用户必须为该表单赋值，那么先来了解一下这个词，什么叫为这个该表单赋值啊？

哎，对了，就这个表单里面必须有东西，没有东西不好意思，你走不了，就是这个意思，就是你到我这儿来是吧，你不给我留点东西，你就想走，那肯定不可能来。咱把这个过完咱们再休息啊，看一下input不行，我再来一组form啊，这是我的第三组，然后。Method的方式为get，然后这里边input来一个，还叫taste呗，你看其实表单那么多，我反复用是不是还是这几个对吧？然后这里边我们来一个用户名。给他一个BR。然后再来一个密码，这回我要用这个了啊，PSSWY。D。然后给他一个PWD好了。然后来个登录，登录现在咱们来看啊，这又是一个登录的，对吧？那么问题来了，我不输入用户名，不输入密码，我能登录吗？或者我用户名不输入了，我只输入个密码，我的密点击登录可不可以可以对吧？那你见过哪个哪个网站上就是你做登录的时候不输入用户名，或者是只输入用户名不输入密码，或者只输入密码不输用户名就能登录的，肯定是不行，对吧？但是他们不一定是这么做的。

啊，他们是什么呢？现在有很多新的网站会用到这个属性，如果是老的网站，因为当你点击登录那一刻，或者是当你鼠标，你看啊，现在是不是鼠标选选中了这个表单，当你鼠标一旦失，就是这个表单一旦失去焦点，什么叫失去焦点，就是这个鼠标这个小，这个小光标键，这不有个小竖杠在一闪一闪的吗？当这个光明键没有就是失去了。这个单现在用户名这个表单是不是失去焦点了，当失去焦点的时候，它会触发一个事件，它会通过这个阿贾克斯做异步请求，异步的就是上服务器端去请求数据，就是去看这个用户名有没有，比如说我们再去注册的时候，经常会问，比如说我用用大熊来注册，他马上就告诉你对吧，你这个一离开以后，他就会告诉你这个大熊已被注册。

见过这样效果吧，哎，就是因为什么，因为当你这个光标一离开以后，他就会来去检测，上数据库里面就去检测了，检测有没有这个用户名是这样的对吧？那你想想，如果你没有输入是为空的话，它也会给你提示的，对吧，但是这个时候是走了一次后端对吧，走了一次后端你就查一次数据库嘛，查一次数据库，数据库是不是就累一次，相当于让你去记一个单词，你记一个你就觉得你大脑脑细胞死一次。是不是这样的，哎，所以说那现在我们前端有属性了，肯定用前端来去做，那你看好了。在这里边用户名肯定是不能不写的，对吧，Reqqu require，这个时候你看如果我只给密码的情况下，我点击登录，他告诉什么呀。

请填写此字段对吧，就是这个字段必须有值，你绕不没办法绕了对吧，所以说在这里边我要干嘛给他再加一个值，再点击登录，你看use mepw me是不是才提交走啊。看明白了吗？能记住不？下课休息会儿，下节课开始练习。