1. 什么是HTML Input标签
在Web开发中，表单是与用户互动的重要方式之一。而表单中的input标签则是最基础的表单元素之一，用于接收用户输入的内容。在HTML中，input标签有多个不同的type属性，用于指定不同类型的输入，比如文本输入、密码输入、单选框、多选框等等。
1.1 input标签的基本用法
input标签的基本用法非常简单，只需要设置相应的type属性即可：
<input type="text" name="username">
上面的代码中，type属性的值为"text"，表示这是一个文本输入框，name属性用于指定该输入框的名称，可以在后台程序中使用该名称获取用户输入的值。
1.2 常用的input类型
除了文本输入框之外，input标签还支持多种不同的type属性，下面是一些常用的type属性及其对应的输入类型：
文本输入框：type="text"
密码输入框：type="password"
单选框：type="radio"
复选框：type="checkbox"
下拉列表：type="select"
文件选择：type="file"
针对不同的输入类型，input标签还支持一些特殊的属性，比如maxlength属性用于限制文本输入框中输入的字符个数，checked属性用于默认选中某个单选框或复选框。
2. HTML Input标签的属性详解
除了type属性之外，input标签还支持多种其它属性，下面将逐一介绍这些属性的用法。
2.1 name属性
name属性用于指定该输入框的名称，可以在后台程序中使用该名称获取用户输入的值，比如：
<input type="text" name="username">
上面的代码中，name属性的值为"username"，当用户在该输入框中输入内容并提交表单时，后台程序可以使用该名称获取用户输入的值。
2.2 value属性
value属性用于为输入框指定初始值，比如：
<input type="text" name="username" value="张三">
上面的代码中，value属性的值为"张三"，表示该文本输入框的初始值为"张三"。
2.3 disabled属性
disabled属性用于禁用表单元素，比如：
<input type="text" name="username" value="张三" disabled>
上面的代码中，disabled属性的值为"disabled"，表示该文本输入框被禁用，用户不能在该输入框中输入内容。
2.4 readonly属性
readonly属性用于将表单元素设置为只读，比如：
<input type="text" name="username" value="张三" readonly>
上面的代码中，readonly属性的值为"readonly"，表示该文本输入框为只读，用户可以看到该输入框中的值，但不能进行编辑。
2.5 size属性和maxlength属性
size属性用于指定文本输入框的宽度，maxlength属性用于限制文本输入框中输入的字数，例如：
<input type="text" name="username" size="30">
<input type="text" name="email" maxlength="50">
上面的代码中，第一个文本输入框的宽度为30个字符，第二个文本输入框中最多可以输入50个字符。
2.6 checked属性
checked属性用于指定某个单选框或复选框默认被选中，比如：
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女
上面的代码中，第一个单选框默认被选中，当用户提交表单时，后台程序可以获取到name属性为"gender"的单选框的值。
3. 表单元素禁用与只读的区别
在HTML中，表单元素有两个属性可以用于限制用户的输入，分别是disabled属性和readonly属性。它们的用途虽然类似，但是实际上有很大的区别。
3.1 disabled属性
disabled属性用于禁用表单元素，用户不能在该输入框中输入内容，它的设置是通过给元素添加一个属性实现的。一般情况下，disabled属性的表现形式为灰色背景，与其它文本输入框有明显的区别。
<input type="text" name="username" value="张三" disabled>
如上代码的效果如下图所示：
![disabled演示效果][disabled]
3.2 readonly属性
readonly属性用于将表单元素设置为只读，用户不能修改该输入框中的内容，它的设置是通过给元素添加一个属性实现的。一般情况下，readonly属性的表现形式为与其它文本输入框相同，但是无法进行编辑。
<input type="text" name="username" value="张三" readonly>
如上代码的效果如下图所示：
![readonly演示效果][readonly]
4. 总结
在HTML中，input标签是最基本的表单元素之一，它支持多种不同的type属性，可以用于接收用户输入的内容。除了type属性之外，input标签还支持多种其它属性，常用的有name属性、value属性、disabled属性、readonly属性、size属性、maxlength属性、checked属性等等。
在实际开发过程中，了解input标签的属性非常重要，它们可以帮助我们更好地控制表单元素的行为，提高用户体验。
[disabled]: https://i.loli.net/2021/09/27/nVpG4gmKJtB5PEZ.png
[readonly]: https://i.loli.net/2021/09/27/8dNpleoWrsg3VLa.png