本篇文章主要的为大家讲述了HTMLinput标签如何制作一个登陆界面的介绍，有文本框、密码框、单选框、多选框、提交和重置按钮的使用说明，完全的解释了HTML表单input标签的使用详情了。现在让我们来看看这篇文章吧

 

　　一、首先我们来看看如何制作文本框：

 

　　<form action="url地址" method=“get/post” name="表单名称">

 

　　<p>这是文本框</p>

 

　　用户名：<input type="text" name="username">

 

　　这样的一个基本的用户名的文本框就出来了，我们来看看效果：

 

　　如上图就是一个用户名的输入框，是不是很熟悉，很多网站都有这个的，不过他们添加了很多别的元素让表单变的更漂亮了，这个以后我们会学到的。

 

　　二、现在我们再来说说如何制作密码框：

 

　　我们知道密码是个人隐私，每个人都不希望自己的密码在自己输入的时候被别人看见，所以基本上所有网站的密码框内输入的密码都是保密的，一输入就是以星号或者以小圆点的方式显示。

 

　　现在让我们来看看这种input标签的密码框是如何制作的吧。

 

　　<form action="url地址" method=“get/post” name="表单名称">

 

　　<p>这是文本框</p>

 

　　用户名：<input type="text" name="username"></br>

 

　　密&nbsp;&nbsp;&nbsp;码：<input type="password" name="password">

 

　　如上面代码，我们应该能猜到这是干什么的吧，先看看效果图再说：

 

　　你看，如果没有那三个空格符，密码和用户名就会不对齐，一般都是用层叠样式表来对齐的，但是现在我们只讲HTML，现在还不说css,所以现在我用了三个空格符来把密码和用户名对齐，这也是最简单的办法。

 

　　可能是因为小编有强迫症吧，不管怎么说，这样的效果才是任何人都能看的，如果没有对齐，就难看了很多。

 

　　三、密码框看完了，现在我们来看看单选框如何的制作吧：

 

　　我们这里就以单选男女为例（当然第三类的就不说了）

 

　　<form action="url地址" method=“get/post” name="表单名称">

 

　　<p>这是文本框</p>

 

　　用户名：<input type="text" name="username"></br>

 

　　密&nbsp;&nbsp;&nbsp;码：<input type="password" name="password">

 

　　<p>单选框</p>

 

　　单选：<input type="radio" name="sex" value="nan">男

 

　　<input type="radio" name="sex" value="nv">女

 

　　这个来看看效果吧

 

　　这就是单选框，也是常用的框架吧，男和女只能选一个，不能两个都选的。

 

　　四、有了单选框，那接下来就说说多选框吧：

 

　　<form action="url地址" method=“get/post” name="表单名称">

 

　　<p>这是文本框</p>

 

　　用户名：<input type="text" name="username"></br>

 

　　密&nbsp;&nbsp;&nbsp;码：<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">喝水

 

　　效果如图

 

　　这图把上面的东西都选上了，多选框是都能选上，当然还可以设置默认选择一个的，只需要加checked=“checked”这个属性，在哪个多选框内添加都能在网页中一刷新就能显示出来，这就是默认选中的效果。

 

　　五、说了这么多，接下来就说说最后的提交按钮和重置按钮吧：

 

　　这两个都是非常重要的按钮，重置按钮能把你网页上选中或者填写的东西一键恢复原样。提交是把你所有填写和选中的都提交给后台。下面来看代码：

 

　　<form action="url地址" method=“get/post” name="表单名称">

 

　　<p>这是文本框</p>

 

　　用户名：<input type="text" name="username"></br>

 

　　密&nbsp;&nbsp;&nbsp;码：<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="">

 

　　由于没有后台，所以就没填写后台地址了。不过不影响效果

 

　　运行出来可以自己看结果