HTML 输入控件 - <input>
什么是 <input> 标签？
<input> 标签是HTML表单中最常用的控件之一，用于创建各种类型的用户输入字段。通过不同的 type 属性值，可以创建文本输入框、密码框、单选按钮、复选框等多种输入形式。
基本语法
<input type="text" name="username" placeholder="请输入用户名">
常用类型
text - 文本输入框
用于接受单行文本输入，是默认的输入类型。
示例：
<input type="text" name="fullname" placeholder="请输入您的姓名">
password - 密码输入框
用于接受密码输入，输入的字符会被隐藏（通常显示为星号或圆点）。
示例：
<input type="password" name="password" placeholder="请输入密码">
email - 电子邮件输入框
用于接受电子邮件地址输入，支持基本的电子邮件格式验证。
示例：
<input type="email" name="email" placeholder="请输入您的邮箱">
number - 数字输入框
用于接受数字输入，支持设置最小值、最大值和步长。
示例：
<input type="number" name="age" min="1" max="120" step="1">
date - 日期选择器
用于选择日期（年、月、日）。
示例：
<input type="date" name="birthday">
checkbox - 复选框
用于从多个选项中选择一个或多个。
示例：
<label>
<input type="checkbox" name="hobby" value="reading"> 阅读
</label>
<label>
<input type="checkbox" name="hobby" value="music"> 音乐
</label>
radio - 单选按钮
用于从多个选项中选择一个。
示例：
<label>
<input type="radio" name="gender" value="male"> 男
</label>
<label>
<input type="radio" name="gender" value="female"> 女
</label>
file - 文件上传
用于选择文件上传。
示例：
<input type="file" name="avatar" accept="image/*">
submit - 提交按钮
用于提交表单。
示例：
<input type="submit" value="提交表单">
reset - 重置按钮
用于重置表单到初始状态。
示例：
<input type="reset" value="重置">
button - 普通按钮
用于触发JavaScript事件。
示例：
<input type="button" value="点击我" onclick="alert('Hello!')">
核心属性
name 属性
name 属性为输入字段指定名称，用于表单提交时标识字段。
示例：
<input type="text" name="username">
value 属性
value 属性为输入字段指定初始值。
示例：
<input type="text" name="country" value="中国">
placeholder 属性
placeholder 属性为输入字段提供提示信息，帮助用户理解应该输入什么。
示例：
<input type="text" name="search" placeholder="搜索...">
required 属性
required 属性指定输入字段为必填项，表单提交前会验证该字段是否有值。
示例：
<input type="text" name="username" required>
disabled 属性
disabled 属性禁用输入字段，用户无法与之交互，且禁用的字段不会被提交。
示例：
<input type="text" name="old-username" value="admin" disabled>
readonly 属性
readonly 属性使输入字段为只读，用户无法修改其值，但只读字段会被提交。
示例：
<input type="text" name="user-id" value="123" readonly>
checked 属性
checked 属性用于复选框和单选按钮，指定默认选中状态。
示例：
<!-- 复选框默认选中 -->
<input type="checkbox" name="agree" checked>
<!-- 单选按钮默认选中 -->
<input type="radio" name="gender" value="male" checked>
其他常用属性
| 属性 | 描述 | 适用类型 |
|---|---|---|
min |
最小值 | number, date, time |
max |
最大值 | number, date, time |
step |
步长 | number, date, time |
maxlength |
最大字符数 | text, password |
pattern |
正则表达式验证 | text, email, tel |
accept |
可接受的文件类型 | file |
multiple |
允许选择多个值 | file, email |
最佳实践
-
始终使用
label标签：为输入字段提供描述，提高可访问性 -
使用适当的输入类型：根据需要选择最合适的输入类型，如
email、number等 -
添加表单验证：使用
required、pattern等属性进行基本验证 -
提供清晰的提示：使用
placeholder帮助用户理解输入要求 -
考虑移动设备：某些输入类型（如
date、number）在移动设备上会显示优化的键盘
浏览器兼容性
所有现代浏览器都支持 <input> 标签及其常用类型和属性。一些HTML5新增的类型（如 date、email）在旧版浏览器中可能不被支持，此时会退化为普通文本输入框。
总结
<input> 标签是HTML表单中最灵活的控件，通过不同的类型和属性，可以创建各种用户输入界面。正确使用 <input> 标签，可以提高表单的易用性和数据收集的准确性。