表单标签是HTML使用中十分重要的标签，其中 input 为用户与程序信息交互提供交流界面，是不可忽视的重中之重。 input 标签是单标签，一般使用格式为 ，而后可以在标签的括号内添加其他属性说明。下面我将就着不同的类型介绍 input 标签的使用。

一、文本输入域 text 与

密码输入域 password

文本框 text 提供简单的信息输入，可以在括号内加其他属性进行限制，如上传的名字 name ，最大最小字符数maxlength 与 minlength ，示例 placeholder ，只读 readonly ，字符显示宽度 size 等，上述几个属性都比较常用，我也将做简单描述。

名字：是每条文本信息上传时的名称，可以说是每个文本必须的。

最大最小字符数：使用 属性 = “数值” 的格式规定输入文本域内的字符数。

示例：使用 placeholder = “示例” 的方式设置示例， value 与他相近，不过 value 提供的为默认数据，placeholder仅为提示。

只读：只要在括号内加入 readonly 即可使文本框内内容不可更改，如注册完成后账号等属性在修改账号信息时可设置只读。

显示宽度：使用 属性 = “数值” 的格式，视觉上文本框内显示的字符数量。

下面涵盖所有属性做简单的例子：

HTML 代码示例

text 示例

密码输入域类型为 password ，与文本域大致相同，不过显示的文本内容为 * ，同时可以通过语句限制文本的复制剪切：οncοpy="return false" oncut="return false" οnpause="return false"

password 示例

二、复选框 checkbox 与

单选框 radio

该类型提供多个选项，用户只需要勾选选项，提交时即可将勾选信息反馈上传。

checkbox 在使用时至少需要输入一个属性 ”name“ ，它是判别选项所属于同一个分类。复选框还需要了解到属性是checked，表示默认情况下(每次网页刷新后)被勾选，当然这个选项可以被用户修改。

下面通过一个简单例子对复选框进行描述：

HTML 代码示例

checkbox 示例

单选框于多选框类似，通过 name 属性实现非此即彼的效果，它同样可以使用 checked 设置默认值。当 checked 大于等于两个时，编译器选择后面 checked 为准(前面打完勾后又在后面打勾，逻辑上亦是选择后面的)。

radio 示例

三、文件域 file

包括 multiple 多选和 accept 格式选择两个属性，下面做代码演示：

HTML 代码示例

file 示例

可以看到，在限制了图片类型后选择文件中只显示了我们限制的 png 文件，且使用了 multiple 后也可以选择多个文件进行上传了。

四、图片按钮

image 、

提交按钮 submit 、重置按钮 reset 与普通按钮 button

想要使用自己的图片作为按钮可以使用 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 代码示例

效果展示

结语

本篇文章是学习表单标签后的总结，不完善的地方请批评指正。