怎么在HTML中插入表单

昨天我们学习了如何在HTML中插入表格，今天我们来学习如何插入表单

一、表单的用途

用来收集信息

二、怎么使用表单

我们先来了解表单的构成

表单是由<form></form>（表单的主体），和<input>（表单的成分）组成，<input>有四个属性，以及八个属性值接下来我们依次介绍。

三、<input>的属性和属性值

1.（1）文本和密码和普通按钮

为什么把text和password放到一起讲呢，因为他们都差不多

我们先来看构成

文本：<input type="text"><br>
密码：<input type="password"><br>
普通按钮：<input type="button">

text就是文本的意思，password就是密码的意思，button是按钮的意思，text用来输入文本等不是隐私的东西，password输入隐私的东西，输入进password的文本会被隐藏，button就是一个普通的按钮，接下来我们来看下效果

可是不输入东西根本看不出来哪个是密码框哪个是文本框啊，这时候我们可以在代码的前面加上账号密码和验证码

可是这样并不好看，我们换一种方式，不在代码的外面加上账号密码和验证码，我们在框框里加上账号密码验证码，但是，这时候我们需要用到一个属性，叫做placeholdre="##"，我们给他们都加上这个属性，然后保存看一下效果

但是获取验证码的按钮没有字啊，怎么办呢

我们在button所在的input标签内添加上<value=:"获取验证码">

接下来看看效果

1.（2）单选和多选

我们先来看单选和多选的代码示例

单选：<input type="radio">##
多选：<input type="checkbox">##

接下来呢，我们弄两个单选和四个多选项目，让大家看看效果

运行一下

接下来我们选择男，歌手的话都选吧，我都很喜欢

1（3）上传文件和重置页面

有些心细的同学已经发现了，我们做的是一个注册的页面，肯定是要上传文件的，那应该怎么上传呢，有的时候发现自己输错了好多东西，要重置页面怎么办呢

我们需要用到"file"和"reset"

来看一下代码示例

<input type="file">
<input type="reset">

接下来我们实际操作一下

看下效果

1.（4）提交按钮

我们输入完我们的基本信息之后要点击提交吧，可是我们现在没有提交按钮，怎么办呢

现在我们就来学习最后一个属性，提交按钮

我们还是先来看代码示例

提交按钮：<input type="submit">

接下来我们操作一下

看一下效果

接下来我们学习input的其他三个属性（type算一个）

2.（1）placeholder

placeholder它的名字叫做占位符，用作给用户提示，刚才我们在上面给账号，密码和验证码使用的，就是placeholder，讲过了就不在细说了

2.（2）name和value

为什么把他俩放到一起讲呢

因为他俩总是成对出现的

name，中文释义为名字，value则是值的意思，我们做表单是要收集用户信息上传给服务器的，假如我们提交了一个数据，但是没有给它命名，服务器怎么能知道这是什么东西呢对吧，相对的，如果没有value，用户提交了，服务器也不会知道你提交的是什么，所以name和value总是成对出现的

我先教大家一个关于name和value的口诀：单选多选成对出，填写字符可有无

是什么意思呢， 单选和多选是必须且一定会提交值的，所以name和value是要在一起的，但是填写字符不用，value是值，会被上传，但是用户填写的字符也是值，有的时候用户会更改这个值，你写上也是多此一举对吧，但是当用户选择了记住账号密码了，这个value就要有了

接下来我们操作一下

只把账号和密码命名，把单选命名为"sex"男的值为1，女的值为0（绝对不能重复），多选命名为"singer"值为他们名字的缩写

接下来看看效果

看着表面没啥变化，可当我们选择好了然后点击上传呢

我们接着再看看

我们发现，地址栏上多了一些我们填写和选择的内容

所以这就是为什么要设定这些东西的原因

如果没有这些东西，就算你填写完了点击上传，服务器也不会接收到你的数据

四、form标签的属性值

有的同学隐私性比较强，看见自己的信息填写完了却在地址栏上显示，心情很不好，想把它隐藏起来，那我们应该怎么办呢

我们找到form的开始标签，在里面写入method="post"这次我们再来试试

这是我点击提交之后的页面，地址栏里什么都没有

现在大部分的网页都用的是post方式来提交数据的，极大的保护了用户的隐私安全，非常好用

五、表单下拉框

有的平台注册的时候会让你填写生日之类的信息，这里用到的就是表单下拉框

我们先来看示例代码

<select><option value="#">#</select>

有些平台会在注册的时候让你填写生日之类的信息，但是这里我们用几个地名来代替，来看看怎么个事

好啦，今天就到这里，同学们记得开心，记得按时复习