Web前端入门教程 04 HTML教程 04 HTML表单属性 学习猿地原创

好了，然后在这里边一样，我新建一个零三方，然后我们把剩下的这些属性再去看完啊，剩下的属性还有哪个快我们看了对吧，最小值最大值看了吧。这个multiplayer呢？讲过了吧，干嘛呢，只要你想做多文件上传，对吧，你就要干嘛，就要用它这个属性对不对，但是光是多文件上传嘛，也不是就是说。在这里面。SE，咱村还有个这个叫什么？这叫什么东西，哎，对了，下拉列表，然后里边配置列表项open对吧，那么在这里边，比如说我就直接123代替了啊。有四个，然后我们来看一下啊，这个下拉列表啊，目前我们选择的时候是不是只能选择一个。是这样吗？那这种我能不能选择多个呢？也是可以的，你要想选多个，那么ul把它加上，加上以后这个时候你看这个下列列表会怎么样被撑开对吧？当然了，它默认不会冲的那么大。

我给他横向重开啊。然后你看这个时候我是不是摁住CTRL键也一样，可以选择多个对吧，但这种情况下极少。呃，这种情况极少，我只是告诉你他能这么去用，能明白吧，哎，这是这个，呃，Multi player这个属性，然后再往下呢，还有哪个，还有这个pat这个属性，现在其实说白了，你们学不学没有什么用，因为什么呢？他需要配合正则的语法，那大家现在连正则还不知道是什么呢。对吧，正则表达式，那么你比如说你这个学爬虫对吧，那你就必须得会它啊，正则是什么呢？正则就是。相当于医生写的字是一样的，医生就是我们上医院看医生写的字，你有看懂过吗？

没有，从来没有看懂过，但是谁能看懂呢？医生能看懂对吧。我们看那个鬼片道士画那个符。能看懂吗？看不懂，但是倒是懂对吧？这个正则就只有程序员能看懂，因为它是由什么呢？它是由一堆乱七八糟的字符给它堆砌到一起，形成一种语法规则。这就叫正则表达式。啊，那一堆乱七八糟的字符，我给你简单的写一下啊，就你们先不用记，等到后期我讲GS的时候，我会给大家讲个正则表达式啊，比如说。我写一个正常点的吧啊。

能看懂吗？能看懂吗？啊，就是这么一堆乱七八糟的东西，就我只是让你看长什么样啊，这里边一个你都不需要了解明白吧，最终他是干嘛的呢？它是匹配一面标签的，匹配以面积标签用的。明白吧，啊，这个东西我不用记啊，我都删了，你只要看长什么样，跟他见一面就可以了，好吧，现在不是记的时候，所以这个属性呢，它是需要有正则表达式来配合了，怎么样配合呢？我可给简单大概说一下，比如说我们正常的表单是不是在里边输入什么东西都可以啊，对吧，比如说AX啊，然后我们来看在这里面你想输入什么输入什么对不对，然后呢，在这里面再来一个input，呃，SME，我们来一个提交。然后这里边我们来一个吧。

好，这个时候你看随便输入点击提交都可以对吧，但是一旦我使用了这个PA parent属性以后，我可以在这里边设置A-A杠。你刚好了，然后这个时候你看啊，我来输入一个六，我点击提交行吗。是不是立马做到限制，他告诉我提交不了了，对吧，哎，那我换一个，比如说我用一个这个空格吧。提交是不是也不行，或者我空格了，不用我直接提交呢，直接提交你看可不可以，这是可以的，对吧，要么你就直接提交，只要这里边有内容，有的内容。你就提交不了，但什么内容能提交呢？我给个A，你看可不可以。上来。掉下来了吧，那换过来我再给一个B呢。是不是也行C。D。E。行吗？不行了吧，哎，因为在这块我限制了A到D之间。

看到了吗？就是abcd，只有这四个字母可以提交，明白吧？那问题来了，如果我AA可不可以提交啊？找你可以吗？不行，它只代表一个字符，就是就是这个框里边只能有一个字符，并且这个字符为A到D之间的任意一个字母。明白什么意思了吧，这就是我写这个正则的意思啊，所以这个属性呢，大家知道有就可以了，然后这个正则表达式呢，你也不需要去记，因为咱们还没有去系统学正则表达式，它属于编程的一种了。明白吧，啊，所以大家现在先提前你先见个面就可以了啊，然后再往下。这个see它是干嘛呢？设置跳步的数值，或者设定两个数值之间的间隔，那么它实际上用到哪里边也是用到我们既然说到数值，咱们这里边是不是只学过一个数值表达叫什么来着？Number。对吧，然后在这里边S不不不不不是T啊，不要干嘛来着，Min最小值现在给不给都没用，先这么样吧，来我们先看一下吧。

刷新，你看现在我默认的时候，它跳步是一对吧，就是123456788，在跳的时候是九，那么我可以通过什么？通过s step STP进行让它跳设置重新跳步对吧？这回跳单跳起跳二，那二的话，你看往上加二四六八十。看明白了吗？那我能不能做出13579呢？怎么做？对了，那就相当于是不是有个默认的也是最小值是几啊。一吗？来重新刷新。走你一对吗？走三五七九十一十三对吧，没有错，那也就证明它默认的时候最小值是谁。啊，默认的时候零吧，你是不是只有从零的时候，你看再来找你二四六八十是不是这样的，当然我一次能不能增五个。

那就看你自己怎么去设置这个跳步了吧。你看哟，我零，那我零起步还不对呢。对诶，我几起步啊。零对吧，加一次是50 15 20 25 30看到了吗？就是说看你实际需要你到底用用它跳步去挤，但这个属性用的倒也不多啊用的，因为一般我们再去增长的时候都是以什么以一为单位对吧，自增一或者自减一。呃，很少会有这种，呃，13579啊，或者二四六八十啊，对吧，这么去减的啊。好了，那再往下来呢。哟。No，干嘛呢，取消表单的验证，那现在我这里边表单的验证多不多。再加两个来input，呃，Test，然后这里边我们给他一个require，是不是我们是，哎，不对，是re。

I，是不是我们上去必须为这个表单赋值啊，对吧，现在好了，这个表单我再提交提交不了了。看到了吗？因为它有验证了，那么当我在这里边它只仅适用于什么资金，适用于form啊，当我在这里边给它设置为no时候，是取消这里面所有的验证，包括在这里边，咱们是不是还学过叫做什么e email email验证？对吧，然后我们给他一个AA啊。给个DB，然后你看啊，咦，我能不能提交来，这是email的吧，这会这个不是那个email不是。第一个是吧。这是email的对吧，来email的，我正常请写的情况下，我就给个密是肯定提交不了的，因为咱们不符合要求，对吧，然后这个呢，他还得必须强制为表单赋值，我还没赋值，那现在我点击提交，你看我能不能提交过来。

提交了吧，哎，也就是说当你加了这个属性以后，那么它会干嘛呢？它会让你的这个所有的表单的验证全部失效，全部失效，现在你看我把属性去掉了啊，我把取证去掉以后，咱们再来看，比如说这个这是email的对吧，我就给个me，这个是必须为表单赋值的，我不写了啊，这个这这两个都没有，我直接点击提交你看。是不是给了对吧，哪怕这个你给他过了，你再点的时候，这个时候还不过，因为它是require验证嘛。看明白了吧，能理解吗？各位啊，所以说当我加了这个属性以后，那么所有的验证项全部失效，重新刷新。你看是不是全部失效了，哎，那OK，这就是这个no，那剩下还有一组这些小家伙，他们是干啊这呢啊这三个他们干嘛呢？他们是针对于这个提交的时候，你要看清楚，这块我写的很清楚啊，你比如说这个nova data取消表达验证适用于form标签，它是针对于整个这个form取消的，并不是针对某一个表单项来取消的。

清楚吧，然后呢，你看在这里边这三个这一组用于干嘛呢？在提交按钮中，也就是说当你提交那一刻，你要做什么。能明白吧，你比如说。来呃，提交按钮说他呀。这里边FM。Action，当我提交的时候，我让他HTTP梦幻实现3W点，3W点百度点。com干嘛呢？我往百度上提交，那这个时候你看可不可以啊，现在刷新，当我点击提交的时候，你看是不是来百度了。看到了吧，哎，就当你提交这一刻，你要干嘛，甚至还可以干嘛呢，比如说这个FM form method，当我提交的时候，临时改用什么，改用POS的方式提交，对吧，那我用POS方提交，我往百度上去传，比如说在这里边我就随便给一个啊Q的帅哥来这个时候你再来看啊。

这里面点击提交。过来了吗？过来了？带他过了哪儿了？Search搜索error，就我们看这个字义能不能看明白，是不是搜索的错误页面呢，对吧？原因是什么呢？原因是我乱加，给他加了参数。看到了吗？哎，一会我会跟你讲，为什么在这块我加，我先把它删掉啊，先删掉我们重新来过，看它是不是啊，来重新刷新，把这个东西再给它删掉，然后点击提交。诶。我没删掉吗？H form action。哦。不行哦。因为我的提交方式又改用了这个post方式的提交，所以他会给我转到搜索的页面，我换一个网站吧，那还是京东吧啊。京东吧，京东应该没有问题，来重新刷新。

然后我看一眼啊，我们去访问京东，然后我用POS的方式提交，但是我们带一个参数过去对吧。起码我们能看到来就是这个了啊诶这个有参数吧，诶诶来点击提交。提交以后到没到京东来这回到了对吧，因为他不需要搜索，那参数能看到吗。看不到因为什么呀？哎，对了，我们是通过什么提交的，通过post的方式提交的，所以呢，看不到了，对吧，那你要想看到，比如说我在这里边能不能传呢。A等于ABC，你看这是不是一段地址？是一段地址，后面我可不可以给他传参数。可以对吗？那么这个时候你再来看可不可以啊，这里边刷新，然后。点击提交。过不过来。过来了吧，哎，因为它不是搜索对吧，它不会去影响百度的这个URL的规则啊，那么你看也就是说在只要是有地址栏的后面，我是不是都可以穿插。

对吗？都可以吧，哎，所以这块大家先清楚一下啊，一会儿我会再给你去深入讲解的啊，那好了，这是这两个，还有一个这个form ec type，它是干嘛呢？就是在提交的时候修改表单数据的编码类型，还记见过这个东西吗？Ec tab。什么时候见见过的？哎，不是，表头是做文件上传的时候，我是不是说了，只要是有文件上传，你的表单就要给我加一个enc type等于from。对吗？见没见过这个in吧？见过了吧？那么它表示什么意思？就是只要是你提交那一刻去改变这个编码规则。能明白吗？这个不用演示了吧，哎，那好了，那我们就来看这个什么呢？这个地址啊啊，看这个地址，我在这里边新建一个啊零四。叫做URL。因为放表单这里边确实有一些，呃，会出现一些奇怪的现象，比如说现在我们来看me的方式，然后我们用盖的方式，然后在这里边input，我们给他一个。

Test，呃，Username，我就叫user吧啊，然后再给他一个input，我就以一个演示为例啊，那么现在我们来看在这里边，诶，没写什么提交提交好了，现在我们来看啊，当前这个页面是不是一直访问的，属于到这个位置，然后呢，我是通过盖的方式提交的，我一输入内容，我一点击提交，是不是提交过来了。对吧，那么咱们知道这个X属性是不是会往里面放一个地址，那么既然放地址了，我是不是就可以传参数，就好比这个A标签一样，A标签。然后我给他一个叫我是超，我是。超链接。

链接对吧，然后呢，在这里边咱们正常给是不是什么HTTPHTTP什么一段地址，比如说先给个百度吧，我们先往百度跳一下啊，来一点击是不是跳百度去了。对吧，也就是说这里边是支持地址的，那么问题来了。如果我往本页面挑呢？我能不能传插啊。来，我先把删掉，我直接问号能理解吗？直接问号不理解，你看啊，现在我什么都没写，什么都没写，它是不是代表本页，我点这个A标签，你看注意看这块，它本页会刷新的，对吗？然后你看啊，我把鼠标放上以后，你看哪呢？你看这个位置。我现在画红线这个位置啊，看到了吗？来放上去。给我读下下面的路径是什么？是不是跟三种网址是一样的，那是不是就相当于是本页，那既然是本页的话，那相当于前面的这个地址，我省了对吧，我不再去写什么logo house的什么冒号，什么63342对吧，我直接写什么呢？我直接写一个问号，然后我传一个什么呢？传一个name等于大熊。

相当于我直接传差了，往哪传，往本页传对吗？这能明白能反应过来吧，那现在你来看啊，我来刷新当前我这参数是优者ad me是不是通过他提交的，当我点击这个超链接以后，你看是不是name，等于大熊又提交过来了。是不是可以接收到参数？这能明白吗？能吗？那好啦，那既然这块可以这么样去做，那咱们说了X，它是不是只的提交一个页面也是放一个地址的，那如果他放一个地址的情况下，这里边能不能传参啊。试试呗，问号我也传一个，传一个什么呢？传一个呃，Name等于呃王明伟。我是不是还我没前面前面的内容没写，是不是代表传本页，那么这个时候你来看啊，我点击提交有传过来吗。

没有看到了吗？那我说我再来一个大熊，我再点击提交，你看只把这个优大熊传过来了，看到了吗？但是我这个地址有传过来吗？没有没有的原因是什么，大家要清楚啊，只要是能能写地址，他就一定能传参，这是必然的，但是在这一块我们看不到，看不到原因什么呢？因为这里边实际上在点击提交那一刻，他执行了两步。执行了两步啊，第一步干嘛呢？第一步是不是往这个页面提交。对吧，注意啊，是往这当前我没写这个页面，没写这个页面相当于景嘛，对吧，相当于本页，我往本页提交了，那么提交这是第一步，第二步干嘛呢？我是不是就会把参数，把这不是参数，把这里的内容又带到那个页面去。反而这个内容又是通过什么方式提交的？Cat。是不是两个都走get呢，所以有冲突就跟什么呢，就跟现在咱们来看跟这个是一样的，你看啊，现在我这个表单提交的数据是不是又点大熊啊，我换一个来熊大我们点击提交，你看优者是不是等于熊大看到了吗？那么好了，我点超链接呢，当我一点超链接时候，是不是马上把那个熊大给他替换掉了。

看明白了吗？所以表单提交的时候也会隐藏着有两件事出发，第一件事是把这个值带过去，带过去以后，紧接着他会拿表单里的值，就会把这个值给覆盖掉。能明白吗？明白我说的什么意思了吗？各位啊，那如果说既然因为都用的盖的方式都是走走地址栏的嘛，所以它会覆盖掉，那如果我用post呢。来看一眼啊，现在我的内容是用POS的，对吧，也就是内幕所接收的值，我换一个徐骁雄啊，然后我们点击提交，你看到了什么。看到了王明伟。看到了吧，能想明白是为什么吗？能理解吗？不理解。你呢？你呢？

有点费劲，行了，不用不用寻思了，来看好了啊，刚才我说那个盖那个。能听明白了吗？也也没理解是吧，行。来，你看啊，我给你画图，给我认真听，别笑也别瞅我，我脸上没有答案啊，你看啊，刚刚的时候咱先不管刚刚吧，咱就说现在啊，现在我method用什么方式提交的，Post的方式提交的对吗？Post的方式提交的数据会显示到地址栏里面吗？不会，所以就是准确说POS方式提交数据，地址栏里边是看不到的，对吧，那么好了，那么我这里边有没有get的方式呢？有action，因为它是走地址栏了，对吧，它是代表传输到某个页面嘛，那么它一定是走地址栏的，那么在这个地址栏后面，我紧跟着我自己加的这个参数。对吗？哎，所以说这个时候，当我一点击提交的，当我一点击提交这一刻，那么。

这个内容会被提交走，他是通过方什么方式提交走的get，所以在这个地址栏里边我们看到了name等于王明伟对吧？而表单里的内容呢？他是通过什么方式提交的post，由于post是隐藏提交，他并不会走地址栏，所以这里边的内容跟他有冲突吗？没冲突。所以我们在地址栏你们能看到。能明白吗？这步位置能明白吗？那我们再返回来说，那如果是get的情况下呢，对吧，如果是get，咱们现在再来看，我在这里面输入大熊，我点击提交的时候。没刷新啊。来大熊，我点击提交的时候，你看到的是什么？是大熊啊，为什么这回看到是大熊了呢？是因为当我点击提交这一刻，是不是先把它发送过去。发送到地址栏里边，那么这个时候地址栏应该是什么？应该是name等于王明伟对吗？呃，你先不用管看到的结果，但是咱们说了一点击提交肯定是先发他对吧？Name等于王明伟，但是紧接着数据表单里的内容啊，那么由于这个内容是通过什么方式提交的，Get get是不是都走地址栏，那么这两个冲不冲突冲突对吧？冲突了，那么紧接着下面的就是这个优者里面所接触的东西就会把谁呀，把这个王明伟给替换掉，所以最终我们看到就是U着等于大熊，也就是表单里的内容了。

能理解了吗？这回我说的。能了吗？那个你俩呢？确定吗？没确定，我再讲一遍都行。那。确定你别不好意思，你花钱来了。真确定吗？我瞅你的眼神还有点迷离呢，你要是没去一会儿不行，我上你旁边再给你讲一下也行啊。这个为什么我要强调一下呢，就是这个东西呢，现在啊，你哪怕有个印象也可以，其实因为等到后期我们再去做数据传输调动的时候呢，我们还会用到。

你知道吧，后期我们是什么样的，我跟大家讲一下啊，就是我们前端，前端在做数据响应的时候，其实不难，我们难在哪呢？我们难在了逻辑上数据响应我跟你讲后端会这么样的，我看看有没有。我那个API叫什么来着。算了，我记不住了，比如说后端会给你这么样一个东西。我瞎写了啊，这是地址，人家会标注啊，比如说ul对吧，然后呢，下边也会有什么呢？PI参数啊，然后又会告诉你，比如说呃，你需要带name参数啊，你需要带这个token参数啊，对吧？然后你需要带这个比如说aside参数，我瞎写的啊，然后需要带这么几个参数，然后会有一个什么呢？会有一个这个返回值。返回值re，让吧结果吧，啊返回什么东西呢？一会可能会告诉你说这个返回这个，比如说呃，商城首页所有数据吧，啊比如说商城首页所有所有数据，诶人大概就是给你这么样一个东西，这就什么呢，这是接口。

对吧，这个接口，然后我们前端干嘛呢？我们前端通过，比如说我们未来会近期啊，最快会学这个Ajax阿贾克斯。啊，他呢，就是一个异不应求，那你要往哪请求呢？我是不是就要往这个地址去请求啊。对吧，这个地址是什么地址呢？你前面一定是有一个网址的，就好比我这块是不是就是我的网址对吗？那就相当于是从这儿开始。从这开始，下边的index，下面的ASD，这才是它的绝对路径。啊，就现在你明不明白都无所谓啊，我就大概跟你说一下去请求他，然后你用什么方式去请求，那请求方式刚才我们看到了，有可能是通过get方式请求的，对吧？然后请求完之后呢，我这里边还需要什么呢？可能我们需要去去传一些数据对吧？那好，比如说我在这里边给他一个花括号，数据有什么呢？比如说有name等于，比如说等于大熊，然后还有什么呢？还有token等于。

呃，这个。一串乱七八糟你也看不懂，我也看不懂的东西啊，然后。等于一啊，比如说是这样的。能明白吧，就是你要把这些东西。发到后端你才能拿到对应的数据，明白吧，那你比如说一旦是表单的情况下呢，那你就要知道你这个数据有没有成功的发到后端呢。对吧？哎，所以到那一块的时候才是真正有用的时候，对吧？所以现在呢，你说我要全都给你演示一遍，那不可能我越演示的越深你越懵啊，那么你只需要给我记住的就是一旦你的表单传输方式就是它里边数据传输方式是get的情况下，那么X后面不能给参数，如果给参数它搜不到。对吗？是收不到吧，哎，所以如果说你的这个表单传输数据的方式是get的话，这里面不能有，如果是posts的情况下，这里面可不可以有参数。

可以对吧，你实在不理解，你这么给我背，这不难吧？能明白吧，哎，那紧接着第二个问题，有的人就会比较钻牛角尖，那我就想用盖的方式，我还想把这个穿数传走，有没有办法。你们都学过？你看啊，我说的什么就是记，我记这个东西我得用get方式传，然后呢，我还想把这个参数给传走。并且关联的符号谁教你的？按符往哪加往哪加，是不是只有我在教大家地址来的时候我才说了，当我们遇到暗的符以后，表示开始传输第二个参数对吗？但是你要知道这里边既然我这块选get的方式了，你传N多个参数都会被它替代掉了。

是这样的道理吧，因为它相当于执行了两步，就相当于我这块执行了一步，我还有个超链接又执行一步，他俩永远是冲突的。能理解我说什么意思吗？哎，所以说这种方式就行不通了，如果你用钙的方式还想把这个诶。我去。诶。我按了什么快捷键。这让我很尴尬。我还摁不出去呢。出手太快了。脑子跟不上你的手。啊。这我也没见过呀，我都不知道我刚才摁了是哪个。

录屏的。不会啊，他没有，他的快捷键都在我的大脑里边呢，是这个家伙的吗。但是现在你们看是不影响是吧，能看到我整个屏幕吧，先将就看吧，啊就是这个就跟我们上网吧是一样的感觉，一有事网管重启一会，我重启一下啊。然后咱们来看啊，那有没有方式传的呢？也一样是有的，在这里边我们学没学过这么样一个标签叫做hi dn。什么东西隐藏域，我在学讲的时候是不是说了，他经常是干嘛呢？隐就是隐藏传输一些数据到到哪到服务器上对吧，那什么时候用就是这个时候用嘛。对吧，你现在盖的方式，你还要传一些数据过去，那我要传什么呢？刚才我是写的内幕名，然后值是什么呢？值是。王明伟对吧，那现在你再来看啊，来我重新刷新一下，刷新完之后呢，我在这里边先打一个大熊，然后我们再点击提交，你看user等于大熊and name等于王明伟提交过来了吗？

看明白了吧，哎，所以说大家记住你，其实你就哪怕真不理解也行，你把这点给我记住对吧，一旦你这个东西是盖的方式，你还想往服务器提交数据的时候，对吧？那么这里边你将选用什么用hidden方式把数据代入。能明白我说什么意思吧。那个能理解吗你。都能是吧，你你呢，啊行啊好了。完事了吧，还剩最后这一个属性切换索引，这还用说吗？知道这是长啥样的吗？不知道说一下吧。偷个懒都不给我机会。C index。这个就蓝点了啊，我就不写那什么了啊，直接就input value，然后C。我发现你写的对哈，好来吧，比如说呃，5312。

七六我总共几个，给我数数。四。八个八个是吧。那这个是八。这个是四。好了，那咱们来看啊，默认情况下我的页面不是它，是这个家伙。哎呀。好难。我给他变成竖排，只是为了提高大家的这个。可读性啊，好。现在你看啊，咱们正常选表单把，把它一选中以后，你输入完内容以后，接下来你怎么办，是不是要切换到下一个表单，你们怎么切换呢。哎，你看都知道table键，那么1TABLE是不是就切换了，对吧，那就是table键默认的规则。对吗？那么我可以去改变它的规则，比如说咱们来看，在这里边我们给它table index缩写为。

五代表是你第五次才会切到，切过他明白吧，然后这里边table index 3table index为一。然后table in2。Table index为七。然后table index为六。还有table index为八，以及最后一个table inex为四，好了，现在我们来刷新，刷新完之后我什么都没有按，对吧，我直接按table键，是不是第一个被选中了。我再按table键，第二个再按table键，第三个是不是跳跃了，第四个第五个第六个第七个第八个看到了吗？我想回退呢。哎，对了，回退咱们是不是按shift table啊对吧，那当我回退的时候，你看shift加TABLE7654321是不是回退回来了。看明白，知道他这个属性怎么用了吧，哎。哎呀，我这个玩意儿。

这到底按了什么，你给我个提示啊，我也不知道我按了什么。东西。哦。好像还真是我的录屏。录制全屏。我先截一下子啊。