html之input标签和form标签

简介:

input标签

input标签是自己闭合的

1
< input  />


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


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

1
< input  type = 'text'  />

type='text' 和type='password' 

1
2
3
用户名:< input  type = "text" />
< br />< br />
密  码:< input  type = "password" />

wKiom1h4jtDzlFmhAAAj8wuCrnk811.png

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

wKiom1h4lwrhYQYiAAAi_JGEHZY731.png



2、复选框: type='checkbox'

1
2
3
4
兴趣爱好:
篮球: < input  type = "checkbox" />
足球: < input  type = "checkbox" />
排球: < input  type = "checkbox" />

wKioL1h4j9yja85MAAAhpCO3E8s333.png


3、单选按钮 type='radio'

1
2
性别:
男: < input  type = "radio"  name = "gender" /> 女:< input  type = "radio"  name = "gender" />

wKiom1h4kF3jv6gmAAAZ6qFOwq0847.png

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

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

1
< input  type = "button"  value = "提交" />

wKiom1h4kL6xIcA0AAAU3P-fdS8014.png


5、submit 按钮:type='submit'




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

1
< input  type = "file"  />

wKiom1h4kS6C10XhAAAZNvWg65g539.png

7、多行的输出框:

1
< textarea >这里可以输入多行信息</ textarea >

wKiom1h4mweQYqjQAAAbMJCHQB4234.png


form标签:

<form action="" method="get"> </form>

<form action="" method="post"> </form>

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

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

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


button和submit的区别:

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

1
2
3
4
姓名:< input  type = "text"  maxlength = "10" />
密码:< input  type = "password"  />
< br />< br />
< input  type = "submit"  onclick = "alert(123)"  value = "提交"  />

wKioL1h4pALj6vtAAABaDxPbvS8462.png


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

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










本文转自 曾哥最爱 51CTO博客,原文链接:http://blog.51cto.com/zengestudy/1891862,如需转载请自行联系原作者

目录
相关文章
|
移动开发 搜索推荐 UED
HTML5的新语义化标签
HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
694 49
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
482 5
|
Web App开发 移动开发 iOS开发
HTML5 新的 Input 类型6
`&lt;input type=&quot;url&quot;&gt;` 用于需要输入 URL 的表单字段,浏览器会自动验证输入是否为有效网址
|
Web App开发 移动开发 iOS开发
HTML5 新的 Input 类型5
HTML5 引入了多种新的输入类型,以增强用户体验和数据验证。`&lt;input type=&quot;tel&quot;&gt;` 用于输入电话号码;`&lt;input type=&quot;time&quot;&gt;` 允许用户选择时间(不带时区);`&lt;input type=&quot;url&quot;&gt;` 用于输入网址,支持自动验证。这些输入类型在不同浏览器中的支持情况有所不同,但大多数现代浏览器均能良好支持。例如,在 iPhone 的 Safari 浏览器中,使用 `url` 类型时,键盘会特别显示 `.com` 按钮以方便输入。
|
移动开发 HTML5
HTML5 新的 Input 类型2
`&lt;input&gt;` 标签提供多种类型以满足不同需求:`datetime` 类型用于选择 UTC 时间的日期和时间;`datetime-local` 类型用于选择不带时区的日期和时间;`email` 类型则确保输入的是有效的电子邮件地址,适用于需要收集用户邮箱信息的场景。
|
移动开发 HTML5
HTML5 新的 Input 类型3
`&lt;input type=&quot;month&quot;&gt;` 允许用户选择一个月份,适用于需要指定月份和年的场景。示例:生日 (月和年)。 `&lt;input type=&quot;number&quot;&gt;` 用于需要数值输入的场合,可设置数值范围等限制。示例:数量 (1 到 5 之间)。支持 `disabled`, `max`, `min` 等属性以增强功能。
|
Web App开发 移动开发 iOS开发
HTML5 新的 Input 类型1
HTML5引入了多种新的输入类型,如color、date、email等,增强了表单的输入控制与验证功能。尽管并非所有浏览器都完全支持,但这些新类型仍可在主流浏览器中使用,不支持时会退化为普通文本输入。例如,`&lt;input type=&quot;color&quot;&gt;`允许用户通过颜色选择器选取颜色,而`&lt;input type=&quot;date&quot;&gt;`则提供了一个日期选择器来方便用户选择日期。
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
移动开发 HTML5
HTML5 新的 Input 类型4
`range` 类型的输入域用于需要在一定范围内选择数值的情况,通常以滑动条形式展示。
|
存储 移动开发 前端开发