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,如需转载请自行联系原作者

目录
相关文章
|
1月前
|
存储 移动开发 JavaScript
HTML5中form表单防止重复提交的两种方法
HTML5中form表单防止重复提交的两种方法
|
1月前
|
前端开发
HTML中的pre标签表示空格或换行
HTML中的pre标签表示空格或换行
|
23天前
HTML_表单标签
HTML_表单标签
16 0
|
10天前
|
存储 前端开发 JavaScript
【Web 前端】如何找到所有 HTML select 标签的选中项?
【5月更文挑战第2天】【Web 前端】如何找到所有 HTML select 标签的选中项?
|
12天前
|
编解码 移动开发 前端开发
【专栏:HTML与CSS移动端开发篇】使用Viewport Meta标签优化移动端显示
【4月更文挑战第30天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的作用。Viewport Meta标签定义了视口属性,如宽度、高度、初始缩放等,解决移动设备因屏幕尺寸差异导致的显示问题。主要属性包括width(常用device-width)、initial-scale、maximum-scale、minimum-scale和user-scalable。
|
12天前
|
移动开发 前端开发 开发者
【专栏:HTML进阶篇】网页结构与语义化标签进阶
【4月更文挑战第30天】提升网页结构清晰度和无障碍访问性,有利于SEO。这些标签为屏幕阅读器提供额外上下文,简化CSS样式设计,避免无意义的&lt;div&gt;和&lt;span&gt;。正确使用语义化标签是现代网页开发的关键,能创造更优质、易访问和优化的Web体验。
|
15天前
|
前端开发 数据安全/隐私保护
Day-1 HTML基本标签和CSS常用样式
Day-1 HTML基本标签和CSS常用样式
|
20天前
|
移动开发 JavaScript HTML5
input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
input | pattern | oninvalid | setCustomValidity | html5原生js表单校验
16 0
|
23天前
|
前端开发 容器
HTML_块级标签
HTML_块级标签
12 0
|
23天前
HTML_行内标签
HTML_行内标签
15 0