01-html&CSS/19-尚硅谷-HTML和CSS-表单显示

表单啊，表单是我们后面用的比较多的，你看重点的我都给你换上了红色超链接呀，表格呀，框框列啊啊这种表单。那我们现在说一下什么是表单，什么是表单呢？我不知道大家有没有留意过，你们到银行去开个户头的时候，他是不是让你填写一个很长的单子，对吧？那个单子就是表单，那个单子有什么作用，他用来收集你的信息的吧？这个信息是不是给他们银行的啊？那很简单了，下面这个就是表达，那这个表达有啥用呢？就是表单。就是HTML页面中用来收集用户信息的所有元素集合。然后把这些信息发送给服务器的，这就是表单，这就是表单好，那表单怎么样去用啊，怎么样去把它显示出来，我们来看看，比如说咱们这里呢，就有一个我截下来的一个图的一个表单，像这样的一个表单，咱们怎么样去做？

我们来看看啊，其实需求就在这里啊，跟上面其实一样的，我复制。我把这个。创建一下。然后呢，是是。表达，OK。好，我先放进来，然后呢把它都注掉，可能是加斜杠，好，那么表单在显示的时候，在用的时候，一般呢，是先加一个副标签。啊，在里面。来说明一下啊，放标签。

就是表单啊，这个缝就表示一个表单了，那这个地方呢，大家可能一上来就容易写错，大家容易写到什么东西呢，你要注意一下啊，特别容易写到这个，然后大家注意有了这个东西以后啊，咱们不就要显示了吗？比如说用户名称怎么办？敲上呗，它里面敲。用户名称冒号，但是这个时候记住它只是显示这个文字而已，用户名称后面是不是有一个输入框。收方怎么办，来input？嗯，然后菜是大家看啊，类型有好多种。哎，咱们常用的有哪些呢？就是testest，好，那我们说这个是什么呢？Input等于test是文本输入框，是文本输入框来给大家看一下，在这边刷新一下，走这里有个输入框啊，你就可以，你就可以来输入知道好这个叫做单行文本输入框，因为你在里面敲回车，它也不会换行，看见吗？不换行是吧。

哎，把那个删掉了，注意看啊，不换卡OK好了，那么我们也可以在这个文本框里面默认加一些内容，怎么做呀，挖里。默认值刷新一下，大家看到吗？所谓默认值就是一上来的时候，它就给你显示的这些内容啊，OK，然后接着我们再来看。还有什么东西呢？人家还要这个密码，密码怎么做？Input type password类型是密码，看一下吧。

你看，不管你输入什么，你都无法直接看见内容，大家看见吧。这就是密码输入框，你看到的那个原点呢，叫做掩码是吧？把真实内容给演示起来，好，Input type等于pass是密码输入框，哎，那么跟上面这个单行文本输入框一样。Value属性设置文本框的内容啊，默认值是吧。啊，那下面呢，你用这个Y6属性也可以设置这个文本框的默认值。

就是显示内容哈，来value你可以写的ABC，但是这个时候呢，密码框里面就有ABC，但你看不到。他只能看见掩码啊，密码框是永远不能看见内容的啊好默认长度啊，没有，你可以自己加长度，它没有限制，你喜欢加多少加多少啊啊长度那个事情咱们后面再讲啊，明天讲的话就可以限制这个长度，你可以用代码限制啊，你也可以通过这些地方length，诶有吧，好像还没有，你可以试下看有没有什么属性，应该是S是吧，我写个四，我看看能不能限制一下。不行，你看到吗？长得还不行，你百度试试看吧，哈来。OK，那么接着呢，我们再来看，除了有用户名密码，还有确认密码，我们复制一下。

好确认密码呢，跟密码是一样的啊。刷新一下两个都是密码，都是密码框，OK，然后呢，还有这个性别，性别是单选。Type radio咱们用这个类型啊，Radio是单选，是单选框，那么大家注意看哈，你光写这个东西，它会写出来什么。你看就一个单选的一个框而已，一般这个单选框你是不是应该有个文字说明选项啊，让我知道我得选啥呀，在后面加字。南。

就有一个选项，那要是还有个女的就再复制呗。你。是吧，好，那么就出来选了，那么我们点一下，这肯定不行啊啊一般情况下咱们这个单选呢，是只能选一个的，那怎么样去做呢？大家注意看的哈，你得让浏览器知道他们属于同一个组，怎么办呢？对，在这个地方通过name属性来进行分组，叫size，就他们俩呢，都属于性别这一个组的，好，那现在浏览器知道他们属于同一个组以后就不会让你再选看见吧，就只能选一个了，OK，那咱们再来回顾一下，就是单选框。Name属性可以对其进行分组啊，同一组内的这个单选呢，只能选一个。

哎，当然你也可以让某一个值默认选中，比如说哎，我们这个表单呢的用户啊，可能男性比较多，我们就希望男性一上来就不用选了，那怎么办？对默认才能选中，怎么办呢？在男的这个框里面写上track等于track，那这就表示默认选上，看见吗？如果你是希望这个女默认选上呢，你就把这个写在女上面，记住啊，不要同时写两个，因为你这个东西本身就是单选的吧，你同时写两个肯定没有什么效果啊，来咱们刷新一下看见吧，你希望谁选上你写谁就行了。咱们说这个等于表示默认选中。表示默认选中，OK，呃，还有呢，复选，还有这个复选兴趣爱好，我们来看一下啊。

兴趣爱好怎么办？用input type等于check box，像bos是复选，你看就这种，但一样是要加文字说明啊，哎，比如说你们有什么兴趣爱好啊，喝酒抽烟烫头是吧？哎，咱们比如说加加va能复制几个。Java javascript来，谢谢大家。记得加啊，等等啊，你可以继续加，让大家看一下这是不是出来了，那你选啊，复选的本身就是可以多选，OK，那我们说in put type等于check box是复选框。呃，复选框。复选框同样大家注意，如果你想让它默认就选中几个的话，你也是可以使用track等于track表示的，就比如说咱们不是Java吗？Java我上来我就希望它默认就是Java，其他的就是你自己去选怎么办，你在这里加就行了，在加上这个选项上面加T，它等于就可以了。

可以加多个，你就把这个值放那就行了，因为单选不能加，多选是可以加的，哎，你加嘛你加嘛，你爱加几个加几个啊，根据你的需要可以吧，啊，那我就回退了啊。啊可以了，好，那这是兴趣爱好，那么这的属性啊，同样是可以让他默认选中啊，那还有什么，人家还要求啥，我看看啊，人家说除了用户名密码确认密码，性别，兴趣爱好国籍，国籍是用下拉列表来做的，国籍国籍怎么做下来select。

来下拉列表框。大家看见了吧，但里面没内容，没内容是因为你没加呀，在这里加上就行了。这里面写上option，大家注意option是下列列表中的每一个选项，先选择国籍，比如说我先加一个，你瞅瞅这是不是有一项啊，啊，你你需要多个，你就自己加呗哈，比如说我再复制一下，复制一下啊，比如说。中国美国是吧。啊，还有日本。小日本对吧，咱们刷新一下啊，这就出来了，OK，你根据你的需要去选就行啊，那一般情况下，咱们比如说选择国籍，咱们是不是中国呀，那默认一上来是不是就应该是中国是吧？那默认是中国怎么做呢？也是有方法的，你在你在中国这个地方哈，空格叫做selected，等于selected就可以了，这就表示默认选中，诶没什么变化是吧？因为本来就是中国是吧？呃，我把这个拿到其他地方去。

对吧，能看懂吧，一般情况下默认你都不写，他会选中谁啊，你什么都不写，默认就第一个看见吧，就这样啊，默认什么都不写就第一个好把它放上来，那咱们说明的select。标签是下拉列表框打下来，那么就下拉列表框，然后再来看一下option，标签是下拉列表。

框中的选项啊，然后对于他而言，你可以通过selected等于selected设置默认选中。就这样啊，这是下拉列表，还有什么？还有隐藏预算预能预常放，最后讲还有这个自我评价多含我美输入玉啊，来咱们说。自我评价怎么写呢？Test a文本域，你看什么区域啊？这单词好，那么这个是多行的。那么你是可以设置它到底是能显示几行，比如说我让他十行，每行呢显示差不多20个字符，这样是吧，就这个啊，咱们说test l表示多行文本输入框，它是支持多行输出的啊，然后Rose属性设置什么呢？可以显示几行？

的高度啊，就是你这个文本输入框到底多高啊，能可见的区域是几行，超过这个函数它就会用普通条了，Course属性设置，每行可以显示几个字符宽度，就这样好，我们看一下哈，刷新看下吧，你就可以梳呗，啊就可以梳了啊对吧，这多长的。OK，那么它能不能像前面这些框一样设置默认值呢？注意看前面咱们是通过value来设置的呀，这里挖还还能用吗？

好像好像没有这个提示是吧？按钮是吧？来能行吗？不行咋办？注意看一下哈，多行文本输入框，它的默认只是起始标签和结束标签里的内容。我才是默认纸。是吧，刷新一下看见了吗？OK，那我们说一下啊，括弧其实标签和结束标签中的内容是默认值啊，是这个默认值，好接着呢，我们再来看啊，再来看除了这个东汉文本书务刊还有啥呀啊，还有重置和提交啊，还有重置和提交，重置和提交是啥样的，看一下。Time reset重置重新设置啊重置好，重置什么效果呢？咱们刷新一下。

点点点好像没效果是吧，怎么样才能有效果呢？大家注意看一下哈，现在呢，我在这里面输入一些内容，我我都改了他原来的选项看见了吗？改了吧，我点重置看懂了，他是不是都恢复成共振的效果呀，重置嘛啊很明显来。OK input type set是重置按钮啊，那么这个按钮上的文字大家注意看啊，如果说你不喜欢，其实可以改的，怎么改value属性，修改按钮上的文本，完了，首先修改按钮上的文本，来我们在这边写一下。

啊，修改或者是写ABC什么都可以啊，根据你的需要。改过来了，然后呢，还有提交按钮，我们复制一下提交按钮呢，只要改到这个类型就行，叫3ME，同样是可以通过ONE6属性改这个文本上的字的提交，你看你要改一个字的话，其实也是通过ONE6属性。啊，就这样是吧，OK，那我删掉，这是提交按钮，除了这些咱们常见的还有一些什么样子呢？可以给他看一下input。然后这里面。Type写上button button是什么东西呢？是按钮，这里有个按钮，看见吗？它没有字，没有字怎么办？忘啊，ABC加个深内容就是按钮上的文字了啊，那我们说明一下。

来。Input type等于submit是提交按钮。网点，我可以修改上面的文字，然后input time等于button是按钮，ONE6呢，同样可以改上面的文字。OK，这个呢，咱们知道一下。好，还有哪些呢？哎，还有一些我们比较常用的就是。发是文件，怎么个文件法呢？去选择文件啊，那你就可以选择你需要的一个文件，然后点击提交的时候，这个文件就发给服务器，就实现了文件上传啊，这就实现了文件上传，OK，那还有一个是比较常见，我先写上这个啊，In input type等于file是文件上传。

好，然后呢，大家看到这个地方，它还有一个叫什么东西呢，隐藏于。差等于hidden，然后呢，你把一些常用属性也给它加上，发现一点用都没有。你看我都加上一些属性了，然后我刷新完全看不见，所以才叫隐藏语，然后就问老师，那这个隐藏有啥用啊，这看不见，咱们说明一下啊，不是咱们说明一下，我们说自己看input time等于hidden是隐藏于啊，就是当我们要发送某些信息啊，这些信息不需要。

用户看见或者是用户参与就可以使用隐藏语。那么他提交的时候同样会发送给服务器。但是你看不见呢，其他的选项是不是你都能看见对吧，其他选项你都可以看，你都可以改，唯独隐藏域的是完全看不见，摸不着，你不知道这个东西，但就发过去了啊，这个是给程序用的，而其他是给用户用的，给咱们了解一下OK。