登录  /  注册

input表单如何制作多行文本输入框?一篇文章教你学会使用input标签

寻∝梦
发布: 2018-08-30 13:41:05
原创
18099人浏览过

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

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

<form action="url地址" method=“get/post” name="表单名称">
<p>这是文本框</p>
用户名:<input type="text" name="username">
登录后复制

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

tuyi.png

如上图就是一个用户名的输入框,是不是很熟悉,很多网站都有这个的,不过他们添加了很多别的元素让表单变的更漂亮了,这个以后我们会学到的。(想看更多就去php中文网html在线视频课程)

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

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

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

<form action="url地址" method=“get/post” name="表单名称">
<p>这是文本框</p>
用户名:<input type="text" name="username">
密 码:
登录后复制

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

tuer.png

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

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

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

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

<form action="url地址" method=“get/post” name="表单名称">
<p>这是文本框</p>
用户名:<input type="text" name="username">
密 码:

单选框

单选:
登录后复制

这个来看看效果吧

tusan.png

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

四、有了单选框,那接下来就说说多选框吧:

<form action="url地址" method=“get/post” name="表单名称">
<p>这是文本框</p>
用户名:<input type="text" name="username">
密 码:

单选框

单选:

多选框

多选:吃饭 睡觉 打豆豆 喝水
登录后复制

效果如图

tusi.png

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

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

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

<form action="url地址" method=“get/post” name="表单名称">
<p>这是文本框</p>
用户名:<input type="text" name="username">
密 码:

单选框

单选:

多选框

多选:吃饭 睡觉 打豆豆 喝水

重置按钮

重置:

提交按钮

提交:
登录后复制

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

tuwu.png

这就是一个页面的填写注册的大部分窗口了吧,都很简单,上面的好多都是以固定的形式出现的,还有个别的属性在以后也会慢慢了解到。(想看更多,欢迎来到www.php.cnPHP中文网)

这篇文章到这就结束了,上述代码只有多练习才能生巧,有问题的可以在下方提问

【小编推荐】

HTML中插入文本ins标签和删除文本del标签如何一起使用?(附实例)

HTML中的form标签有什么作用?HTML form标签的用法解释

以上就是input表单如何制作多行文本输入框?一篇文章教你学会使用input标签的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号