日期选择框如何提交_input表单如何制作多行文本输入框？一篇文章教你学会使用input标签...

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

一、首先我们来看看如何制作文本框&＃xff1a;

这样的一个基本的用户名的文本框就出来了&＃xff0c;我们来看看效果&＃xff1a;

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

二、现在我们再来说说如何制作密码框&＃xff1a;

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

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

如上面代码&＃xff0c;我们应该能猜到这是干什么的吧&＃xff0c;先看看效果图再说&＃xff1a;

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

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

三、密码框看完了&＃xff0c;现在我们来看看单选框如何的制作吧&＃xff1a;

我们这里就以单选男女为例&＃xff08;当然第三类的就不说了&＃xff09;

这个来看看效果吧

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

四、有了单选框&＃xff0c;那接下来就说说多选框吧&＃xff1a;

效果如图

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

五、说了这么多&＃xff0c;接下来就说说最后的提交按钮和重置按钮吧&＃xff1a;

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

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

运行出来可以自己看结果

从最零基础开始的的HTML&＃43;CSS&＃43;Javascript。jQuery&＃xff0c;Ajax&＃xff0c;node&＃xff0c;angular框架等到移动端HTML5的项目实战【视频&＃xff0b;工具&＃xff0b;系统路线图】都有整理&＃xff0c;在线解析&＃xff0c;学习指导&＃xff0c;点&＃xff1a;【WEB前端学习圈⑤】