昨天我们学习了如何在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>
有些平台会在注册的时候让你填写生日之类的信息,但是这里我们用几个地名来代替,来看看怎么个事
好啦,今天就到这里,同学们记得开心,记得按时复习