HTML表单标签input标签的使⽤
表单标签是HTML使⽤中⼗分重要的标签，其中 input 为⽤户与程序信息交互提供交流界⾯，是不可忽视的重中之重。 input 标签是单标签，⼀般使⽤格式为 <input type="类型"> ，⽽后可以在标签的括号内添加其他属性说明。下⾯我将就着不同的类型介绍 input 标签的使⽤。
⼀、⽂本输⼊域 text 与 密码输⼊域 pa ssw o rd
⽂本框 text 提供简单的信息输⼊，可以在括号内加其他属性进⾏限制，如上传的名字 name ，最⼤最⼩字符数maxlength 与 minlength ，⽰例 placeholder ，只读 readonly ，字符显⽰宽度 size 等，上述⼏个属性都⽐较常⽤，我也将做简单描述。
名字：是每条⽂本信息上传时的名称，可以说是每个⽂本必须的。
最⼤最⼩字符数：使⽤ 属性 = “数值” 的格式规定输⼊⽂本域内的字符数。
⽰例：使⽤ placeholder = “⽰例” 的⽅式设置⽰例， value 与他相近，不过 value 提供的为默认数据，placeholder仅为提⽰。
只读：只要在括号内加⼊ readonly 即可使⽂本框内内容不可更改，如注册完成后账号等属性在修改账号信息时可设置只读。
显⽰宽度：使⽤ 属性 = “数值” 的格式，视觉上⽂本框内显⽰的字符数量。
下⾯涵盖所有属性做简单的例⼦：
HTML 代码⽰例
text ⽰例
密码输⼊域类型为 password ，与⽂本域⼤致相同，不过显⽰的⽂本内容为 * ，同时可以通过语句限制⽂本的复制剪切：
oncopy="return false" oncut="return false" onpause="return false"
htmlradio的text出不来
password ⽰例
⼆、复选框 c hec k bo x 与 单选框 ra dio
该类型提供多个选项，⽤户只需要勾选选项，提交时即可将勾选信息反馈上传。
checkbox 在使⽤时⾄少需要输⼊⼀个属性 ”name“ ，它是判别选项所属于同⼀个分类。复选框还需要了解到属性是checked，表⽰默认情况下（每次⽹页刷新后）被勾选，当然这个选项可以被⽤户修改。
下⾯通过⼀个简单例⼦对复选框进⾏描述：
HTML 代码⽰例
checkbox ⽰例
单选框于多选框类似，通过 name 属性实现⾮此即彼的效果，它同样可以使⽤ checked 设置默认值。当 checked ⼤于等于两个时，编译器选择后⾯ checked 为准（前⾯打完勾后⼜在后⾯打勾，逻辑上亦是选择后⾯的）。
radio ⽰例
三、⽂件域 file
包括 multiple 多选和 accept 格式选择两个属性，下⾯做代码演⽰：
HTML 代码⽰例
file ⽰例
可以看到，在限制了图⽚类型后选择⽂件中只显⽰了我们限制的 png ⽂件，且使⽤了 multiple 后也可以选择多个⽂件进⾏上传了。四、图⽚按钮 im a ge 、 提交按钮 subm it 、重置按钮 reset 与普通按钮 butto n
想要使⽤⾃⼰的图⽚作为按钮可以使⽤ image 类型，可以实现点击图⽚打开相应内容等功能。可以通过 width 属性调节图⽚的⼤⼩。
HTML 代码⽰例
image ⽰例
在使⽤ input 标签都是在 form 标签内使⽤的，form 标签中必定要设定⼀个 action 属性作为提交后跳转的⽹站，在创建 submit 提交按钮后，点击按钮即可跳转⾄那个⽹址。
HTML 代码⽰例
使⽤重置按钮 reset 后，页⾯回到刚刷新时的样⼦，即设置了默认值的显⽰默认值，未设置初始值的
显⽰空⽩。
HTML 代码⽰例
button 按钮并⽆实际意义，需要⾃⼰添加事件使 button 获得功能。
HTML 代码⽰例
五、隐藏域 hidden
隐藏域在⽹页中是不展⽰的，但可以随着提交将信息上传，如可将上传的时间在隐藏域中保存上传。
格式为：
HTML 代码⽰例
六、其他
上述的⼏种都是HTML中通⽤的表单标签 input 的类型，在 HTML5 中还引⼊了其他类型⽅便书写（只能简化代码，并不能优化程序），如限制⽤户输⼊邮箱的 email 类型、限制数字输⼊的 number 类型、滑动条 range 类型、时间选择 data 类型、颜⾊选择 color 类型、⽹址url 类型等，下⾯做简单的代码与效果演⽰：
HTML 代码⽰例
效果展⽰
结语
本篇⽂章是学习表单标签后的总结，不完善的地⽅请批评指正。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。