尚硅谷前端基础 (100)

好，那么关于这个表单呀，它的使用方式其实相对来说是比较固定对吧，比较固定的啊，就是诶你用什么项目诶找到什么样的标签，比如说你用文本框啊密码框，那这些肯定就是input，诶你诶但是你要注意它的type是什么，你用下拉列表，那就是select对吧，你要区分出不同的标签就可就可以了，所以嗯，关于表单这些东西呢，我在这儿我就不去详细的再说的特别细致了啊，然后呢，我们再补充一些东西就完事了啊在这我们还是零五接着来说这个表单啊，表单的话，我们这个步骤啊，创建表单首先还是先来创建这个父母标签。Form标签里边action属性，Action属性指向的是你服务器的地址，现在我们也没有服务器，那么我就直接指向我的这个插给2M苗，然后就是表单项的问题，对吧？表单项那比如说我们比较常见的就是我们这个文本框，叫做一个这个input，你看你直接写完了input就自然而自然而然就就就出来了，对吧？Input type等于typeags，就是一个无门框，然后还有一个主要比较重要的属性，一个naname，比如说我写一个username，那这样的效果就是你等于是给你这个属性起了一个名字，那这样你这个属性，你这个值用户一填，比如说我填一个孙悟空，哎，孙悟空，那这个时候这个数据就会被提交给服务器，提交给服务器那数据也需要有名字，那这个数据的名字呢，就叫username，那后边的服务器就可以根据这个username来获取到这个值了，啊就这么简单对吧，这么一个东西，然后的话，其实还有一个重要使用，叫做一个Y6 Y6主要是干嘛的呢？Y6主要是给那些有就。

就是那些像什么check，像那些select，哎，那个选像拉块，哎，像我们这个input的那个radio单选按钮，还有我们多选按钮，这些东西它不是让用户填的，它是让用户选的，所以它的主要作用是给这些东西指定值，但是不是说只有他们能指定，在我们这种音input里也可以指定，比如说我给他写1HELLO，那这个hello其实就等于变成了一个它的默认值，那这个时候你在提交表单，他提交就是谁呢？提交的就是hello，所以Y6也不是说只能在在我们这个某个编签里用，在我们这些表现项里都可以用啊，都可以用，然后呢，在这我们来写两个换行，哎换行完事以后呢，在这我们再写一个音input的，你还可能需要写一个提交按钮，这个按钮的作用就是可以来提交我们这个表单，你看这回提交就hello了，你说这时候的效果就是你不写，那默认值就是一个就是一个哈啊，就是一个hello，那我们除了这个input的T等于T的话，其实我们可以直接对照着文档看一下。

我们找一下这个input input标签，它的type包含有很多类型，诶你看type等于button，诶Type Check box type是一个color tap是一个date，是不是有很多的这种类型啊，哎，很多这种类型，那我们简单说几个啊，比如说tap等于button input现在这是一个submit，嗯，Submit的话，我们这再来一个啊，再来一个我们叫做一个type等于一个这个BB，那这个的话，你看它就没有没有字了啊，没有字我们可以写一下Y6等于一个这个按钮按钮。

那这个typeb等于button是干嘛的呢？它就是创建了一个按钮，这个就是一个什么呢？这个就是一个普通的按钮，什么叫普通的按钮呢？这个按钮不像submit submit，我一点表单是不是就提交了，这个按钮没有任何作用，你点完了还是这效果啊，它没有任何的作用，那这是干嘛的，它只有一个用，就是可以被点它，作用就是点点，你可以点它，但是点完了没有任何效果，诶那同学说老师，那这玩意儿有啥用啊？哎，其实这个东西是用的最多的，为什么呢？因为它之所以没效果，就是意味着我们实际上可以通过GS去给它添加效果，那有了GS再加上这个按钮，我们就可以有无限多种可能，所以往往是这种功能比较弱的，反而功能可能是更强大的，所以像这个我们以后可能会用的比较多一点，那还有一个类似的啊，我们这复制一下，我们叫做一个reet re set叫做一个recet recet叫一个什么呢？Reet叫一个重置按钮，什么叫重置按钮呢？看着啊，我这改一个内容。

它就可以把我们这个表单里边的值改成什么呢？改成这个默认值啊，叫一个re重置按钮，非常简单啊，非常简单，好，这个是我们这三个按钮啊，Submit reet，还有我们这个button啊，这是我们这个重置按钮，然后的话跟他们三个对应的，我们还有一组标签，我们叫做一个button，诶button呢，这个叫做一个这个提交，诶提交我这写两个，我写个范畴，然后呢，它里边也是typeb属性，你可以写submit，哎，或者也可以写什么呢？哎，也可以写一个这个reet re reet，你可以写一个重置，然后呢，还有一个叫做button啊，BT to。

Boton这个呢，就是一个单纯的按钮，单纯的按钮这个按钮吧，那我的这个按钮呢，跟上边的按钮是一样的，这个submit跟这个是一样的，你看效果是一样的，重置也是一样的，也是可以对这个表单进行重置，按钮也是只能被什么呢？只能被点击b done啊，少选那个按钮也啊，刷新一下按钮也是，它只能被点击，没有其他任何作用。那这三个标签跟上面标签是一一对应的，功能都是一样的，唯一的不同点啊，Input是一个自结束标签，它只有开始标签，没有结束标签，而我们的这个button呢，它是一个成对出现的，有开始有结束，也就是说你的这个button的话，它是一个成对出现的，成对出现就意味着它可以编写一些更加复杂的结构，诶，比如说我可以在button里边我放一个图片，那这样是不是就能把一个图片作为按钮了呢？哎，它更灵活一点，所以这几个按钮相比较起来，我们的这个button会用的更多一些啊，会用的更多一些。好，那这。

接下来我们再看一下啊，嗯，我们就说一个吧，拿一个拿两个举例子，一个是我们这有一个color color叫什么呢？Input等于color，所以我在这可以直接写一个啊，我写一个啊，写一个我们叫做一个input，哎，Input我们这来一个这个color，呃，Color的话我们直接看效果啊，看效果color顾名思义就是颜色，你写完这个以后，它这可以出现一个颜色，一个什么呢？颜色的一个选择框，那这样你可以在这去选择颜色，然后去提交你在这这这这出现的是不是一个一个这个等于是一个调色板这么一个效果呀，哎，可以提交一个颜色，那相对来说用的比较少啊，用的比较少，用的比较少的主要一个原因，并不是说它说它没用，诶，它比较少的一个主要原因是什么呢？它的兼容性可能不是特别好，也就是说它并不是所有浏览器都支持，你要看的话可以在最后看，呃，我们来看一下文档，在最下边它会有一个兼容性的列表啊，每一个都一样，兼容性的列表的话，我们。

再看一下啊，Color color group20支持14支持firefox，哎29IE叫什么？No，也就说这个东西IE支不支持不支持，所以如果你把它放到IE里的话。IIE是不是什么也没有啊，全系列不支持啊，全系列不支持，所以这里边很多的这种新的标签，它的支持性并不是很好，所以这就导致我们实际上你再去做一些PC端的时候，用的也不多，以我们就了解一下最常用，就是刚才我们刚才说的那些是最常用的，那现在我们说就就了解一下，然后当时你感兴趣啊，你可以自己呢，往下往下过过，我们就不一个个说了，因为这一个个说确实也没什么意义，说完了你也记不住啊，大概过一下有一个印象就完事了，然后的话，我们刚才看到一个叫做一个email email的话，其实你看上去的话，它跟那个文本框呢，很像email。

在这我们直接来一个这A别写，这写在我们上面，这我们直接来一个input input，我们这来一个这个em ma，这是一个这个电子邮件的一个框，那在这儿的话，其实你会发现它跟那个文本框很像是吧，你也是可以打字的啊，可以打字的，但是它就会有一个特点，当你去提交的时候，它会对你的格式进行检查，你看这儿给你提示了，告诉你，诶你这个邮件格式是不是是不是不正确呀，诶不正确，不正确，那对不起了，你就提交不了，你必须得写一个正确的格式，并且还要提示文字，这个应该比那个color的支持度要好一些。他应该是IE10啊，这些应该都支持，你看我写一个点提交是不是都支持啊啊，但是其实也会发现有问题，就是虽然也支持，但是他给你的提示文字它不太一样啊，它不太一样，所以这个时候的话也是我们一般的话我们不会用它，因为显示效果不同嘛，我们之前也提到过这问题啊，不怕你长得这样，也不怕你长那样，就怕你在不同的浏览器中长的是是不一样的，所以这个东西我们也是避免去使用的啊，避免你使用的，那我们要真要写的话，可能我们就需要用GS去自己实现一些啊实现一些了，那这两个我们就了解一下啊，了解一下不多说了，然后下边还有一些我们就不一个展示了啊month呀，这都是显示什么呀，Data显示的，显示选择日期的对吧，Number是表示数字的，哎，然后radio我们都说过了，Re，都说过sir是什么搜索框，哎，它有什么电话号码对吧，它会有一些的这些这些东西啊，那这个东西可能在我们移动端的时候会用的多一点，因为这像这种隐卖啊，像这种ta啊电话号码这种东西手机号嘛。

Email电子邮件它在我们移动端里边还有一个特点，因为我们移动端是通过这个虚拟键盘来输入的，所以像这种东西，如果你是在移动端，哎，你用了这么一个input的，它是email，当你去输入这个内容的时候，它给你弹出那个虚拟键盘，它会是专门的这个电子邮件的键盘，你输入手机号的话，输入电话的话，它会给你弹出一个专门的什么呢？专门的手机号的一个键盘，所以这个东西在我们移动端里面作用比较明显，但是啊，在我们PC端里，我们就先了解一下，后边我们讲移动端写到表单的时候，其实一写就明白，非常简单，然后的话再往下看，再往下看的话就是还有一些属性attribu啊attribus这个是我们的这个，哎，这个input里边给我们提供一些属性，诶你像什么这个auto auto FOX，什么disabled，什么read required什么什么什么一系列的值，哎，一系列属性，那这个呀，我们简单的示一个。

简单演示几个啊，这里边呢，我们来创建，我们复制一下，复制一下，呃，复制这么三个框。复制三个框，呃，那这里边呢，我们来把这个value啊，我给它去掉。哎，明儿改一个啊，这叫A，这叫一个B，那第一个我们要说的一个叫做一个，你看啊，当我去选中这个东西的时候，它里边会弹出一个什么呢？是不是弹出一个提示信息啊，哎，提示信息，那这些提示信息是什么东西，这些提示信息都是一些我之前在这里边我输入过的内容啊，所以在这儿就会有所体现，能给我显示出来啊，能给我显示出来这叫一个什么呢？自动的一个表单的一个补全啊补全，那有的时候我不希望比眼这个功能，当然有时候其实我们用这功能也挺烦的是吧，可能有会造成一些不太好的用户体验，我不希望你给我提示，那这里边我们就有一个属性叫做一个auto too auto complete啊auto complete叫什么呢？叫做一个这个自动完成啊，自动完成我们这儿可以直接写什么呢？哎，我们可以写一个这个on啊on就表示什么呢？表示开启它是不是就有这功能啊，哎，或者你也可以写一个off off表示什么呢？表示关闭，那这个时候就没有这个功能了，所以这个属性可以什么呢。

诶，它可以什么呢？诶它可以关闭，诶关闭我们这个自动的一个补全啊，你这回你给它设置成这个以后，他就没有补全了啊，他就没有补全了，但是这个东西只会影响他自己，不会影响别人，但是下边这个由于我我这是A，我没有写过东西，我也改成username，我们来看一下这个时候下边是不是依然有提示啊，只是上边这没有了，下边这依然有提示，所以如果你想把下边这关了，你同样需要在下边也写一个这个auto come写一个off，下边这个就也没了啊，这是关闭我们这个自动补全的，那你说老师我这一个个关挺麻烦的，我希望什么呢？我这表单里边所有的都不会自动补全，怎么办呢？你直接把这个auto啊，Complete放到这个什么呀，Form上，这时候就都没有了啊，这时候都没有了，所以这个是我们说的第一个属性，它是一个自动补全的一个关闭，然后再来说我们的第二个属性啊，第二个属性在这儿呢，我给它指定一个Y6，呃，Y6的话，我们这儿叫做一个写1HELLO吧。

一个写一个，现在有一个默认值了，我们这有一个属性叫做一个read的only read的only表示什么意思呢？这个就是光有一个属性read only表示的是我们这个表单项，将我们这个表单项设置为只读啊设置为只读，那这样的效果就是你看这哈，你就改，你就改不了了，你只能什么呢？只能看啊，看改不了了，只读的嘛，诶瑞登里只读还有一个和它类似的，我们叫做一个disable disable的叫什么呢？叫禁用，哎叫禁用，将这个表单项设置为什么呢？设置为这个禁用，禁用呢比那只读还还还严重啊机印劲应用禁用的话，禁用的话这时候你连选都选不了了，而且就是点都点不了了，之前我们还得看的是黑的，这个时候是变变成一个灰色的，诶点都点不了了，那这个其实跟那个瑞德利的差不多啊，基基本上是这个是。

这个是这个类似的啊，是这个类似的啊好，那这个是我们说的一个这个哈，但是这里边我们来看一下，我给它，我把这两个给它住了，我们看看对比一下，我点一下提交，诶这个时候你会发现我的disable，我的那个username是不是都没有提交过来，哎提交过来，但是我如果换成这个瑞利呢，我们来看看会不会提交。

一天诶瑞德only利是不是会提交啊，哎，会提交，所以这两个还是有一些这个区别的啊，会有区别的，诶只读只读干嘛呢，只读它会数据会提交啊，会提交，然后我们这个disable呢，我们这个数据不会提交啊，注意他们的一个区别啊，Disable瑞登力好这是这个属性，然后的话还有一个叫叫叫叫叫叫叫把这去掉啊，这这可可以留着，还有一个我们这儿叫做一个凹的，叫做一个FOX啊o two的叫一个FOX，那这个玩意儿我们叫什么？叫做一个FOXFOX叫做获取焦点。获取焦点，诶设置我们这个表单项啊，表单项哎，自动获取焦点，什么叫auto FOX，什么叫焦点？我们先说你看啊，我们这个内容我这一块，当我去点它以后，我在这边我是不是可以输入内容啊，哎，当我点这个玩意儿，我在这里边是不是可以输入内容啊，诶为什么我点它在输入在这儿输出，我点这个输出就在第三个输出，为什么？因为这个时候它你看它跟别的状态就不一样了，它现在就是一个获取到焦点的状态，所以我现在所有的操作都是对它来进行了，当我点这个玩意儿，它就获取焦点了，懂这意思吗？点谁谁就获取焦点了，获取焦点那个我们就会输出，所以FOX就是焦点的意思，Autof FOX叫做自动获取焦点，所以我给第二个input加上一个autof FOX，那就是一个什么效果呢？第二个input会自动获取焦点，所以我们看到效果，当你刷新页面以后，你看你的那个光标是不是自动在第二个出现。哎，那这就是auto FOX效。

自动获取焦点，就是你一直接打，就是在这个里面去打啊auto FOX自动获取焦点，这是一些比较常用的，对吧？比较常用的啊，内幕我们就不说了是吧？哎，Value type我们也不说了，所以我们就简单的过这么几个属性，还是了解一下就行了，哎，说多了也确实记不住啊，大概混一个两熟以后，我们用到的时候，你能给它，哎想起来啊，能知道用哪个就足够了啊，就足够了。好关于表单的话，它这个样式的设置呢，就是我们刚才讲的都是一些那种标签，那当然表单也涉及到一些样式设置，它的样式设置基本上和我们的别的标签是没有什么区别的，但是唯独一点你需要注意，当你去选中表单，你看一下啊，你看一下它的那个，它的一个默认的一个样式。

这个表单呢，我们来看一下啊，他有没有写。

诶，它这里边等于，呃，我们通过它的这个默认样式在这儿呢，还体现不出来。哎呀，那体验不出来，我们暂时就比如说它实际上有一些默认的paing对吧，还有一个默认的边框啊，啊Mar是零对吧，比如说它实际上会存在有一些这种，诶默认的一些样式，但是现在的话，很多东西我们在这儿还还还体验不出来，所以关于它的一些样式的问题，我们会在后边的练习中我们再去强调，因为讲完这个玩意儿，我们就往下，我们就要去做这个项目了，哎，做项目那涉及到一些表单的东西，我们就要说一下了，它的样式并没有什么太特殊的地方，说说，说白了，它跟div呀，跟那些什么SPA呀，哎，特点基本上是类似的，没有什么特殊的，所以样式的话，不像表格有一些特殊的样式，它基本上都是我们常规的样式，所以我们也就不多说了，那么关于我们这个表单，我们也就说这么多了，那表格表单的内容相关的我们就都给他说完了，那么你们可以待会儿把这个表单再稍微的写一下啊，把我们这个文档里有有些东西没有讲的，你自己来测试一下啊，测试一下，了解一下，感觉一下什么模样就行了啊，然后。

后我们开始来做我们的一个项目的练习，好，我们来听一下。