![00b1e87dd73970782b24510f9a63375f.png](https://i-blog.csdnimg.cn/blog_migrate/0a107cf35ec6d21c0c496aa12f911475.jpeg)
本篇文章主要的为大家讲述了HTMLinput标签如何制作一个登陆界面的介绍,有文本框、密码框、单选框、多选框、提交和重置按钮的使用说明,完全的解释了HTML表单input标签的使用详情了。现在让我们来看看这篇文章吧
一、首先我们来看看如何制作文本框:
<form action="url地址" method=“get/post” name="表单名称">
<p>这是文本框</p>
用户名:<input type="text" name="username">
这样的一个基本的用户名的文本框就出来了,我们来看看效果:
![f829b6438fae35482d672d73b9f8fd79.png](https://i-blog.csdnimg.cn/blog_migrate/aea59eff573e4b85642885d52a7bdcab.png)
如上图就是一个用户名的输入框,是不是很熟悉,很多网站都有这个的,不过他们添加了很多别的元素让表单变的更漂亮了,这个以后我们会学到的。
二、现在我们再来说说如何制作密码框:
我们知道密码是个人隐私,每个人都不希望自己的密码在自己输入的时候被别人看见,所以基本上所有网站的密码框内输入的密码都是保密的,一输入就是以星号或者以小圆点的方式显示。
现在让我们来看看这种input标签的密码框是如何制作的吧。
<form action="url地址" method=“get/post” name="表单名称">
<p>这是文本框</p>
用户名:<input type="text" name="username"></br>
密 码:<input type="password" name="password">
如上面代码,我们应该能猜到这是干什么的吧,先看看效果图再说:
![2e1a07e59a92d067d56dadaf24181f06.png](https://i-blog.csdnimg.cn/blog_migrate/bfd7cc7f5ef9414ed47c2f13ca45cfdb.png)
你看,如果没有那三个空格符,密码和用户名就会不对齐,一般都是用层叠样式表来对齐的,但是现在我们只讲HTML,现在还不说css,所以现在我用了三个空格符来把密码和用户名对齐,这也是最简单的办法。
可能是因为小编有强迫症吧,不管怎么说,这样的效果才是任何人都能看的,如果没有对齐,就难看了很多。
三、密码框看完了,现在我们来看看单选框如何的制作吧:
我们这里就以单选男女为例(当然第三类的就不说了)
<form action="url地址" method=“get/post” name="表单名称">
<p>这是文本框</p>
用户名:<input type="text" name="username"></br>
密 码:<input type="password" name="password">
<p>单选框</p>
单选:<input type="radio" name="sex" value="nan">男
<input type="radio" name="sex" value="nv">女
这个来看看效果吧
![0607a218afe0377ab742b6f42c943169.png](https://i-blog.csdnimg.cn/blog_migrate/74824c8493686d86725fdcfc8a2ad51e.png)
这就是单选框,也是常用的框架吧,男和女只能选一个,不能两个都选的。
四、有了单选框,那接下来就说说多选框吧:
<form action="url地址" method=“get/post” name="表单名称">
<p>这是文本框</p>
用户名:<input type="text" name="username"></br>
密 码:<input type="password" name="password">
<p>单选框</p>
单选:<input type="radio" name="sex" value="nan">男
<input type="radio" name="sex" value="nv">女
<p>多选框</p>
多选:<input type="checkbox" name="n">吃饭
<input type="checkbox" name="n">睡觉
<input type="checkbox" name="n">打豆豆
<input type="checkbox" name="n">喝水
效果如图
![d116c477137fd02d492e818c01316b54.png](https://i-blog.csdnimg.cn/blog_migrate/74b86d432da4ecf4aa2153e6665d549e.png)
这图把上面的东西都选上了,多选框是都能选上,当然还可以设置默认选择一个的,只需要加checked=“checked”这个属性,在哪个多选框内添加都能在网页中一刷新就能显示出来,这就是默认选中的效果。
五、说了这么多,接下来就说说最后的提交按钮和重置按钮吧:
这两个都是非常重要的按钮,重置按钮能把你网页上选中或者填写的东西一键恢复原样。提交是把你所有填写和选中的都提交给后台。下面来看代码:
<form action="url地址" method=“get/post” name="表单名称">
<p>这是文本框</p>
用户名:<input type="text" name="username"></br>
密 码:<input type="password" name="password">
<p>单选框</p>
单选:<input type="radio" name="sex" value="nan">男
<input type="radio" name="sex" value="nv">女
<p>多选框</p>
多选:<input type="checkbox" name="n">吃饭
<input type="checkbox" name="n">睡觉
<input type="checkbox" name="n">打豆豆
<input type="checkbox" name="n">喝水
<p>重置按钮</p>
重置:<input type="reset" name="">
<p>提交按钮</p>
提交:<input type="submit" name="">
由于没有后台,所以就没填写后台地址了。不过不影响效果
运行出来可以自己看结果
从最零基础开始的的HTML+CSS+JavaScript。jQuery,Ajax,node,angular框架等到移动端HTML5的项目实战【视频+工具+系统路线图】都有整理,在线解析,学习指导,点:【WEB前端学习圈⑤】