html之input标签和form标签的详细介绍

高洛峰
发布: 2017-03-24 11:44:45
原创
2349人浏览过

input标签

input标签是自己闭合的

<input />
登录后复制

input系列有checkbox、redio、password、button、file等

1、type='text' 和type='password'

<input type='text' />
登录后复制

type='text' 和type='password' 

立即学习前端免费学习笔记(深入)”;

用户名:<input type="text"/>
<br/><br/>
密  码:<input type="password"/>
登录后复制

html之input标签和form标签的详细介绍

限制输入长度:type='text' maxlength="3"

html之input标签和form标签的详细介绍

2、复选框: type='checkbox'

兴趣爱好:
篮球: <input type="checkbox"/>
足球: <input type="checkbox"/>
排球: <input type="checkbox"/>
登录后复制

   html之input标签和form标签的详细介绍

3、单选按钮 type='radio'

性别:
男: <input type="radio" name="gender"/> 女:<input type="radio" name="gender"/>
登录后复制

html之input标签和form标签的详细介绍

4、提交按钮:type='button'

button-普通按钮,submit-提交按钮;submit按钮一般出现在网页上需要提交信息到服务器是才使用,而button按钮是创建一个按钮,对于实现按钮将会发生什么事这个不一定,靠页面编辑人员决定,例如在同一天网页表单上,用户输入时可能输入错误或是偏差,则可以在网页上创建一个button-清除(重置)按钮,一张表单可以有多个普通按钮,且至少有一个提交按钮(需提交表单网页)

<input type="button" value="提交"/>
登录后复制

html之input标签和form标签的详细介绍

5、submit 按钮:type='submit'

6、上传文件:type='file'

<input type="file" />
登录后复制

html之input标签和form标签的详细介绍

7、多行的输出框:

<textarea>这里可以输入多行信息</textarea>
登录后复制

html之input标签和form标签的详细介绍

form标签:



Method的值为get时,是通过URL传内容与参数,这个时候我们通过网址URL能看见自己填写内容提交处理

Method的值为post时,是通过类似缓存传填写内容与参数,而URL是不能看到form表单填写内容提交内容。

对于html 表单form标签,有了form表单及提交方式(get post)(了解 get post区别),才能将数据进行传输给程序处理,否则程序不能接收到将要处理的数据。

button和submit的区别:

表单中button不会提交表单中的数据(除非做了定制,例如用JS定制),submit一定会提交数据。

姓名:<input type="text" maxlength="10"/>
密码:<input type="password" />
<br/><br/>
<input type="submit" onclick="alert(123)" value="提交" />
登录后复制

html之input标签和form标签的详细介绍

既然submit能提交数据,为什么还要有button呢?

submit对应from的方法为post,他是将数据提交到后台,而button对应的方法为get,比如在页面加一个button,value设置为刷新,那么button的意义是刷新页面,而没有向后台提交任何数据。

以上就是html之input标签和form标签的详细介绍的详细内容,更多请关注php中文网其它相关文章!

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

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