input输入框通过type属性实现多种输入功能，如text、password、email等，配合placeholder、required等属性提升用户体验，广泛应用于表单数据收集。
在HTML中，input输入框是表单中最常用的元素之一，用于收集用户输入的信息。通过设置不同的type属性，可以实现多种类型的输入功能，满足各种场景需求。
1. 基本语法结构
input输入框的基本写法如下：
<input type="类型" name="名称" id="ID" value="默认值" />其中，type决定输入框的类型，name用于表单提交时的数据标识，id通常用于关联标签或CSS/JS操作，value可设置默认内容。
2. 常见的input类型及用途
以下是几种常用type值及其作用：
立即学习“前端免费学习笔记（深入）”；
-
text：单行文本输入框，用于输入普通文本。
示例：<input type="text" placeholder="请输入姓名"> -
password：密码输入框，输入内容以圆点隐藏。
示例：<input type="password" placeholder="请输入密码"> -
email：邮箱输入框，浏览器会自动验证格式是否合法。
示例：<input type="email" placeholder="请输入邮箱"> -
number：只能输入数字，支持上下箭头调节。
示例：<input type="number" min="0" max="100"> -
tel：电话号码输入框，移动端会调出数字键盘。
示例：<input type="tel" placeholder="请输入电话"> -
date：日期选择器，用户可选择年月日。
示例：<input type="date"> -
checkbox：复选框，用于多选。
示例：<input type="checkbox" name="hobby" value="reading"> 阅读 -
radio：单选按钮，同一组name值只能选一个。
示例：<input type="radio" name="gender" value="male"> 男 -
file：文件上传框，允许用户选择本地文件。
示例：<input type="file" accept="image/*"> -
hidden：隐藏字段，不显示但可提交数据。
示例：<input type="hidden" name="token" value="abc123">
3. 提高用户体验的常用属性
除了type，还可以使用一些辅助属性提升可用性：
- placeholder：输入框提示文字，用户开始输入后自动消失。
- required：标记为必填项，提交时若为空会提示填写。
- disabled：禁用输入框，无法编辑和提交。
- readonly：只读，内容不可修改但可提交。
- maxlength：限制最大输入字符数。
- autofocus：页面加载时自动获得焦点。
4. 实际应用示例
一个简单的注册表单片段：
<form><label>用户名：<input type="text" name="username" required placeholder="请输入用户名"></label><br>
<label>密码：<input type="password" name="pwd" required></label><br>
<label>邮箱：<input type="email" name="email"></label><br>
<label><input type="checkbox" name="agree" required> 同意用户协议</label><br>
<button type="submit">注册</button>
</form>
基本上就这些。掌握不同type的用途和常见属性，就能灵活使用HTML输入框完成大多数表单需求。关键是根据实际场景选择合适的类型，并加上必要的验证和提示，让交互更顺畅。
