86.尚硅谷_HTML&CSS基础_表单项一.avi原创

刚才呢，我们是介绍了一下我们这个表单啊，也是说了几个这个表单项，其实表单整体来说比较简单，那接下来我们要说的就是我们表单里边还有一些什么呀？诶除了我们这个输入框，文本框啊，Password密码框这些框里边还有没有什么其他的一些表现一下，诶那我们想一下了，那咱们想想咱们平时上网的时候还见过什么东西在这个表单里，哎，有那种什么呀，有那种让你选选性别的对吧？哎，选性别的性别，那性别这是什么玩意儿，这是单选还是多选啊？哎，性别肯定是单选是吧？诶肯定是单选的，所以接下来我们要说的叫什么呢？叫做一个单选按钮，诶单选按钮我们怎么创建的啊，单选按钮我们叫什么呢？也是使用我们这个input来干嘛呢？来创建一个单选按钮啊，使用来创建一个单选按钮，直接写呗，来一个这个input。

诶，那问题来了，那它肯定是哪不同啊，诶你看咱们这几个是不是都是input呀，唯一不同的数肯定就是肯定是什呀type，诶type的意思叫什么呀？类型啊类型，那我么说它的这个type属性呢？哎，Type属性使用什么呢？使用radio啊使用radio radio什么意思呀，是不是收音机啊，哎，收音机啊，那为什么叫收音机呢？它借了一名是吧？像我们以前过去那种老式那种录音机啊，或者收音机都有一个特点，它上面会有一堆按钮是吧？诶但是这个按钮只有一个特点干嘛呀，只能有一个备按下去吧，诶你摁下去一个，另一个是不是叫就弹起来呀？哎，你们老是那种收音机啊，就做一个哎，Radio，所以它记这个名表示一个什么呀，单选，那单选我们就来吧，来一个男，然后咱们再来写一个，那既然是性别肯定有两个选择是吧，还有一个是我们这个女是不是这个效果呀，哎，选择我们这个性别的啊性别的，然后。

哦，同样这个最后呢，我这也给他来两个B啊换一下行，然后一刷新走你诶是不是这个效果呀，哎，两个小点这点干嘛呀，我可以点他去选中吧，哎选中啊我们这一个单选来再来一个懂你完了没弹起来是吧？诶没弹起来这录音机肯定是坏了是吧？哎肯定是坏了，那为啥没弹起来，诶我们来看看啊，咱们看这两个音铺的他们现在有没有关系，哎，没有关系，说白了，我现在这是俩录音机是吧，你摁这个按钮跟摁这个它有没有关系啊，没有关系，没有体现出这两个单选按钮，它是它是一组的吧，诶它是一组的，所以这里边我们需要对他们进行什么呀，进行分组，诶那我们先不考虑分组这个事儿，我们先看它少什么东西，哎，我们说了，只要表单要提交到我们这个服务器，是不是内幕是必须的呀，哎，所以这时候还没有写name的呢，而且这里边我们要说叫什么呢，我们的这个单。

选按钮单选按钮它什么呢？它通过我们这个name幕属性进行分组，Name幕属性相同的是什么呀？它是一组啊按钮啊是一组按钮，所以这边我们来写一个，我这来什么呢？来一个name等于一个G真的，然后呢，这个name我能不能写别的呀？哎也得是真的，你要是写一个别的这干嘛了，是不是又不是一组的呀？诶所以注意它们name相同的按钮，我们认为什么呀，是一组，这样才能达到一个什么呀，单选的一个效果啊，单选的效果来我这一刷新，咱们来看现在我再点一个难对吧？诶我再来一个女是不是就OK了呀？哎男女男女就没有冲突了啊，就没有冲突了啊这是我们说一个单选按钮啊，单选按钮接着再来看123123我选一难，咱们看看效果啊，我一点注册，诶看看诶真的等。

美云昂哦，昂是昂是男是吧，昂是男，然后回退，我选一女来一个123123，我一点注册走你哦昂是女是吧，那不对，刚才刚才我选男的时候啊，选女的时候是不是也昂呀，那你这个玩意要提交给服务器后台的人就疯了是吧？到底是男是女是吧？还得猜一下是吧，还猜一下那这一块为什么是男，为什么这没有区别呀，我们来说on是什么意思呀？诶二我们开关有什么呀，On还有off是表示打开呀，诶所以它返回on表示什么呀，表示你粘的这个按钮干嘛了，选中了，那至于选的哪个，他有没有告诉你啊，哎，没有告诉你，那注意了，这里边少东西啊少东西你们来说一下像像什么呢？哎，像这种什么呀？哎选择的哎哎像这种需要什么呀，需要用户选择。

但是什么呢？但是不需要用户直接填写内容的这个表单下，我们来说什么意思，我们来看啊input的和我我们这个radio单选按钮和我们这个文本框有什么区别呀，文本框用户是不是想输入什么就输入什么呀，哎，密码框也是想输入么就输入什么，而这个单选按钮用户能不能选，能不能想输入什么就输入什么呀，我们只给了他两个选择，一个是男，一个什么呀，一个是女啊像这种啊让用户选择的东西啊，像这种需要用户选择，但是不需要用户直接填写内容的表单项，我们还什么呢？我们还必须指定一个这个value了属性啊，还必须指定一个Y6属性，那这样什么呢？这样什么呀？哎，被选中的什么呀？诶，表单项的这个Y6属性值将会什么呢？将会最终提交给谁啊服务器。

啊，将会最终提交给服务器，所以注意像这种需要用户选择的，而不是让用户直接去填的，必须得有什么呀，得有value，如果没有value你还不如不写，因为什么呀，因为我们没法区分出它选选的到点是什么啊，到底是什么，所以这我们还需要加一个属性，加一什么呢？来一个Y6，哎，Y6我这来什么呢？Y6等于等于什么呢？等于一个，比如说男男是什么呀？哎，叫做一个ma Le是不是ma啊哎，然后女呢，女我就不能写ma了，写ma跟刚才on是不是一样的呀，这来一个诶非哎保存是不是这个效果呀，哎，然后再看啊。刷新还是随便写一个，我选个难一点注册，咱们来看粘你看这回还昂不忘了是不忘了呀，哎麦啊，因为我选的是难吧，哎，男的那个音的里边我们那个Y写的是，然后换一个，我选一个女一二三一二三一点注册，哎是是female了，哎，因为女的那个Y属性我写的什么呀，写的是这个female，所以注意像这种选择框value属性是。

必须得有的啊，必须得有value和name这些东西缺一不可的啊，缺一不可的，而我们这个文这种文本框，Value写不写都行，如果你想有默认值，你就写上，没有干嘛呀，你就可以不写啊，OK，不写好这个呢，是我们说的这个单选，单选说完了还有什么呀，是不是还有多选呀，诶多选我同时可以选中多个，比如说我有这个爱好，哎，我可以同时有多个爱好，诶那我们来说一下叫做什么呢？多选块，多选框，说白了就是可以什么呀，同时选中多个，我们使用什么呢？使用我们这个也是input创建一个多选框，它的什么呢？它的这个type属性使用什么呢？使用check box啊，Check box啊可以选择这么一个盒子啊，Check box来直接写了爱号，我可以来一个in input诶，它给我生成一堆啊，不要它。

来一个这个音put，来一个tap tap叫一个check box check box，比如写一个，写一个什么呀，写一个这个足球，然后呢，复制几个啊来复制几个，当然不能都是足球是吧，足球篮球羽毛球，羽毛球诶你可以再写一个乒乓球，你可以让他多写几个是吧，哎，乒乓球哎哎是不是这四个多样框啊，哎四个多框那注意了，那像这种我还是这个问题，能不能体现出他们四个是一组，哎不能体现出他们四个是一组，所以这里边有一个属性也是必须的，叫什么呀，诶name啊，所以注意这种多选呀，单选呀也好，他们都是使用什么呀，Name分组的相同name他们认为是认为是什么呀，认为是一组的，所以这来一个ho hoby，我们这个还好，那我们说了，每个里边的是不是应该都是一样的呀，哎，这样才能点出是一组啊一组来。

回退一刷新走你，诶诶这块又凑一块了是吧？来俩方糖保存，咱们一刷新走你，诶足球篮球羽毛球乒乓球是不是都有了呀？诶还是它有什么特点呀，单选框只能选一个而多选单选球只能选一个，而多选框呢？走走走走，是不是想选几个选几个呀，哎，四个我可以全选啊，全选比如说我这选。小李，哎，我一点注册走你，诶我们来看吧，选仨是吗？Hoby等于on hoby等于on hoby等于on，哎，还真选了仨是吧？但是问题是什么呀？选的是啥时不不知道啊，哎，虽然知道选了仨，但是选的是哪仨，咱们是不是填不出来呀？诶差什么了？哎，是不是Y6啊？哎，所以注意啊，像这种选择框Y6水都是什么呀，都是必须的啊，都是必的，所以Y6能给它补上来一个Y6，这叫一个，但是Y6干嘛了就不能一样了啊，Y了就不能一样了，这个叫一个ZQ。

这个叫一个蓝Q，这一个YMQ，呃，这是一个这个PPQ，诶是不是这样啊哎，足球篮球羽毛球，还有一个乒乓球，俺装球保存，我们来这一刷新走，你这回再选选仨一点注册来看这一看叫什么呀？Ho币等于诶ZQ后币等于蓝Q后币等于YMQ是吧？诶三个球通过它我是得判断我喜我的爱好到底是什么了，哎，到底是什么啊，好，这也是我们说的一个叫做多选，诶多选框啊，多选框其实和单线按钮差不多，只不过不同的是什么呀，他们的tag不同，用起来其实都是什么呀，都是一样啊，用起来都是一样，好这个是我们说一个单选，还有一个多选，诶除了这个还有什么呀，还有什么呀？哎，我们有一个下拉列表，诶，下拉列表，什么叫下拉列表啊，下拉列表。

啊，一写出就知道了啊，咱们写什么呢？写一个你喜欢的这个明星啊，你喜欢的明星我们来一个，诶那这里边注意了，上边这些是不是都用引input的呀，下拉列表这变了，使用SD select来干嘛呢？来创建一个下拉列边啊，使用select标签直接来写了，直接来一个select，诶，这是一个下列边，同样啊，我也给它来俩边保存，我们先看效果啊，先看效果，一看你就知道什么什么东西了，一刷新看这玩意儿吧，哎，我一点它应该给我出来一个列表啊哎，出来一个列表，但是咱们这个列表干嘛了，是不是什么也没有啊，哎，什么也没有，为啥呀，我这列表是不是空的呀？哎，那注意了，下拉列表里需要写一个一个的什么呀，列表项啊列表项，所以这里边干嘛呢？我们来说啊，在我们这个下拉。

列表中使用什么呢？使用我们这个option，诶option标签来干嘛呢？来创建怎么样一个一个的这个列表行，诶有几个选项就写几个option啊，有几个选项就写几个option，比如说我这来一个op option诶那这里边我们先写一个，写个谁呢？写一个范冰冰。范冰冰，诶再写一个，再写一个谁呢？写一个林心如，再写一个谁呢？再写一个赵本山赵存啊来写赵薇的是吧？来啊，现在我们是不是有三个选项啊，哎，三个选项咱们来看效果，我这一刷新，范冰冰，林心如，赵本山，我是不是可以去选择了呀？诶可以选择了啊，这是我们说这个选项啊选项好，那这块写完了，我们这里边有一个问题啊，我们先看看啊，写完了以后，我点一个男这篮球羽毛球取消，就选示足球，我一点注册我们来看。

有没有我选的那个明星没有，诶那我们说我们这差什么了，什么name还有value啊，但是这就带来了一个问题了，你像我们input只有一个标签，Name和value是不是都给他自己指定啊，但是这select option这是几个标签，两个标签了，对吧？哎，两种标签了，那问题就来了，我内幕给谁啊？Option给这个Y轴给谁呢？诶直接来说了啊，下拉列表的这个内幕属性需要干嘛呢？指定给我们的这个select啊，下拉列表的内幕属性需要指定给select，而什么呢？而Y6属性需要干嘛呢？哎，指定给我们这个option啊，指定option，所以注意这是分两个指定的name给谁给select，直接来一个name names叫明星stat sta明星，然后呢，Option，我这来一个value，范冰冰，我们叫一个这个F。

哦，BD林心如，我们叫一个这个LX2赵本山Y6来一个ZBS保存，诶还就赵本山这名比较洋气是吧？诶来我们来看效果啊，一刷新走，你这回再选一个，选个赵本山来我一点注册走，你来看我的这个什么呀，Star等于谁呀？哎，赵本山啊，赵本山来回来你换一个，换个范冰冰，我在这边写一个我一点。这不是就是一个FBB啊，哎，FBB啊，所以注意我们这个什么呀，下拉列表的name要指定给select，而Y6要指定给我们的这个option啊option好，这是我们说的这个下拉列表这么一个东西啊，还有我们的一个这个哎这么几个这个check box，还有一个RI，那这里边我们再去补充一些属性啊，补充一些属性分别去补充一下啊来现在我这回退啊，你看我这一刷新，你看它默认是不是难的就选中了呀，未啥默认难的选中了，因为刚才我选的是难，这是缓存啊，缓存包括这个文字是不是都在这儿了呀，都是缓存啊，你要清空L怎么办？CTRL加上F5强制清空网存刷新现在是不是都没了呀？哎，但是有的时候我希望什么呢？我希望吧，我这个女，因为我这网站可能女人比较多是吧，我希望这个女啊，你默认就是什么了，选中的哎，我希望女默认就是选中的，哎，我这个网站干嘛呢，喜欢乒乓球和羽毛球的人比较多，我希望什么呢？羽毛球和乒乓球也是什么呀，默认选中的。

诶，那我这个网站呢干嘛呢？喜欢赵本山的人比较多，诶我希望赵本山默认干嘛呀，被选中，也就是说我希望有一个默认的吧，那你现在看现在默认是范冰冰，为什么范冰冰啊，诶因为是不是范冰冰第一个呀，哎，范冰第一个，那我们怎么来设置这个默认选中呢？诶我们来说一下，直接来看着啊现在假设我假设我希望什么呀？希望女被选中，我可以干嘛呢？在这儿加一个属性叫做什么呢？就叫做一个check check值叫什么呢？就叫check啊checkt等于chat来。

说一下如果希望什么呢？我们这个单选按钮或者是我们这个多选框中，诶如果希望啊，如果希望在我们这个单选按钮或者多选框中干嘛呢？指定我们这个默认选中的这个什么呀，选项则可以什么呢？诶则可以在什么呀？诶希望选中的这个什么呀，诶项中干嘛呢？添加这个什么呀，Check等于的这个属性，只要有了这个属性就意味着什么呀，我现在这个女就是什么呀，默认选中的呀，我们还希望谁选中啊，这还希望这个羽毛球和乒乓球选中啊哎，在羽毛球上加一个check，在乒乓球再加一个什么呀，CHECK1保存，现在一刷新走，你女羽毛球乒乓球是不是都默认选中了，当然你也可以干嘛呀，你也可以给它取消掉啊，但是注意它，你加上这个以后，你上来以后就变成了一个默认选中的一个状态啊，默认选中状态那。

现在我们来说这个下拉列表，下拉列表就不是check了，下拉列表什么呢？诶跟它差不多叫一什么呢？叫做一个select，诶selected是吧？诶select来我们这写上叫什么呢？哎可以通过在我们这个op t option中干嘛呢？诶添加我们这个select等于诶selected等于个这个selected来干嘛呢？诶来将我们这个选项，诶设置为什么呀？诶默认选中，也就是说这回默认就不是范冰冰了，我们来看这个谁了，一刷新诶还是啊CTRLF5强制刷新就变成谁了，变成我们那个老赵了是吧？诶老赵了啊这是我们说这么一个效果啊，设置我们这个默认选中的啊默认选中了，然后呢，再说一个啊再说一个是什么呢？是我们这个select的一个专有属性啊select专有属性叫什么呢？叫做一个marty等于什么呢？等于一个Mar蹄派。

哎，这么一个属性，我们来看什么效果啊，来我这一刷新走你诶你发现什么了，这不用拉了是吧，自己是不是给我展开了呀？诶那什么效果呀，走走干嘛了，我是不是可以同时选中三个呀？诶你摁着CTRL可以同时去中三个，我一点注册，我们来看看star等于这个范冰冰，林心如，赵本山，我是不是同时选中三个了，哎，所以注意当给什么呢？当给我们的这个多选框，诶叫做下拉列表啊下拉列表当为我们这个下拉列表叫做select添加一个什么呢？叫做multity派，等于一个multity派则什么呢？则我们这个下拉列表变成什么呢？诶变为一个这个多选的什么呀？哎，下拉列表啊，变成一个多选的一个下拉列表，也就是说干嘛呀，可以同时选中多个啊，可以时选多个啊，这么一个多选下列表。

啊好，那这里边我们先给它去掉啊，先给它去掉，这是我们说的这么一个下拉列表的问题，那下拉列表呢，还有一个小东西啊，这块都听明白了吧，呃，就不多说了啊，都是一些固定的，没有什么变化，这东西没有什么技术含量啊，然后还有的时候需要干嘛呢？那现在我这块明星是比较少啊，有的时候可能我明星比较多，可能我这再来，再来一个这个赵薇，赵薇我这来一个这个ZW，呃，赵薇我这再复制一个啊复制一个，比如说我这来一个这个ldh这来谁呢？刘德华，这来谁呢？来一个这个呃，PCG潘长江，哎，我是不是这个明星比较多呀，哎，来我这一刷新，现在我这有了是不是六个明星啊，哎，六个明星，那我这六个明星明显是分成了，是不是两组啊，哎，有男明星还有什么呀，还有女明星，那当我选项多了以后，我。

需要为我这些选项进行一个什么呀，进行一个分组吧，诶那怎么来对选项进行分组呢？我们还有一个标签叫什么呢？叫做一个OPT group，哎，Group什么意思呀，组群是吧？哎，Group我们来说一下可以什么呢？在我们这个select中，哎select中可以什么呢？可以使用我们个OPT group，哎对我们这个选项什么呀，进行分组啊我们来说哎同一个什么呀，哎，OPT group入不足。中的这个选项是什么呀？是一组，比如说干嘛呢，我可以把范冰冰诶这仨都默认选中了是吧？咱们给它去掉，选中一个赵本山就行了，诶那现在干嘛呢？我可以来将我们这个范冰冰、林心如、赵薇统一放到一个OPT group里，然后干嘛呢？我再创建一个OPT group，诶然后干嘛呢，把我们这个这哥仨给它放进去，诶那现在我这是不是就分成了两组啊，哎，分成两组啊，我们来看看什么效果，一刷新这个再一选，诶但是这里边你发现是不是没啥变化呀？哎，没啥变化，因为我们少写了一个东西啊，在我们这个optru里边有一个什么呢？有一个属性叫一个label啊label我这写一个什么呀，写一个这个女明星，然后呢，下边这label我写一什么呢？写一个这个男明星，哎，那这个label表示什么呀？是不是组名啊，哎，我这个组名。

啊，我这一刷新咱们再看走，你看见效果吧，哎，女明星在上边，男明星在下边分成了一个两组，但是这女明星这是干嘛的呀，选不了的，男明星也选不了的，只能选择成这里边什么呀？是不是选择里边选项啊哎，选择里边选项啊来哎可然后呢，然后可以通过我们这个label哎属性来干嘛呢？来指定我们这个分组的一个名字，所以这表示什么呀？为我们这里边分成两组，一组是女明星，还有一组什么呀，男明星我能不能分多组啊，你还可以再写是吧？哎，还有一些明星是吧？等等一系列啊，可以再分啊，写几个group就是几组啊OPT group好，那这个呢，是我们这么一些表单项啊，咱们来回顾一下，Radio是我们这个单选按钮，Take box是我们这个多选框啊，多选框哎，然后我们这个select是我们这个下拉列表，下拉列表里边使用的是open作为我们这个下拉列表的一个什么呀，选项啊，选项OBD group是对对这些选项进行。

分组的分组的好，那这个呢，我们停一下。