首页 前端知识 怎么在HTML中插入表单

怎么在HTML中插入表单

2024-05-05 21:05:14 前端知识 前端哥 544 755 我要收藏

昨天我们学习了如何在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>

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

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7000.html
标签
评论
发布的文章

HTML5-新增表单元素

2024-05-10 08:05:59

Dayjs 的一些常用方法

2024-05-10 08:05:59

Howler.js HTML5声音引擎

2024-05-10 08:05:59

前端攻城狮HTML5自查手册

2024-05-10 08:05:51

JavaScript 基础入门

2024-05-10 08:05:41

HTML5新手入门指南

2024-05-08 10:05:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!