input type="text" 用于创建单行文本输入框，支持 name、placeholder、value、maxlength、readonly、disabled、required、autofocus 和 autocomplete 等属性，提升表单功能与用户体验；通过 label 关联可增强可访问性，结合 CSS 可美化样式，配合 JavaScript 实现输入监听与动态交互，是构建高效表单的基础元素。
在HTML中，input type="text" 是最常见的表单元素之一，用于让用户输入单行文本。它广泛应用于搜索框、用户名输入、邮箱填写等场景。掌握其基本用法和常用属性，有助于构建更高效、用户体验更好的网页表单。
基本语法与结构
创建一个文本输入框非常简单，使用 <input> 标签并设置 type="text" 即可：
<input type="text" name="username" placeholder="请输入用户名">
其中：
立即学习“前端免费学习笔记（深入）”；
- type="text"：定义输入框类型为单行文本
- name：指定字段名称，用于表单提交时的数据标识
- placeholder：显示提示文字，用户开始输入后自动消失
常用属性详解
除了基础结构，text 输入框支持多个实用属性，可提升功能性和用户体验：
-
value：设置默认值。
例如：<input type="text" value="默认内容"> -
maxlength：限制用户输入的最大字符数。
如：maxlength="10" 表示最多输入10个字符 - readonly：使输入框只读，内容不可编辑但可被选中和提交
- disabled：禁用输入框，无法交互且不会随表单提交
- required：标记为必填项，提交表单时若为空会提示错误
- autofocus：页面加载时自动聚焦到该输入框
- autocomplete：控制浏览器是否自动填充，可设为 "on" 或 "off"
与label关联提升可访问性
建议将 input 与 <label> 标签配合使用，增强可操作性和无障碍支持：
<label for="name">姓名：</label>
<input type="text" id="name" name="name">
点击 label 文字时，对应的输入框会自动获得焦点，这对移动端和辅助设备用户尤为重要。
样式与JavaScript交互
虽然HTML负责结构，但可通过CSS美化外观：
- 设置宽度：width: 200px;
- 边框样式：border: 1px solid #ccc;
- 内边距：padding: 5px;
结合JavaScript可以实现动态验证、实时搜索等功能。例如监听输入事件：
document.getElementById('search').addEventListener('input', function() {
console.log(this.value);
});
基本上就这些。合理使用 text 类型输入框及其属性，能让表单更清晰、易用且功能完整。不复杂但容易忽略细节，比如 label 关联和 accessibility 支持，值得重视。
