HTML文本框通过<input type="text">创建，用于输入单行文本，常用属性包括value、placeholder、maxlength、size、readonly、disabled、required、autofocus和autocomplete，配合label标签和CSS可提升可访问性与美观性，结合JavaScript可增强交互。
在HTML中，文本框（也叫文本输入框）主要用于让用户输入单行文本内容。最常见的实现方式是使用 <input> 标签，并将 type 属性设置为 "text"。下面详细介绍其定义、常用属性和实用技巧。
1. 基本定义：创建一个文本输入框
最简单的文本框代码如下：
<input type="text" name="username">这段代码会生成一个可输入文本的单行框，name 属性用于表单提交时标识该字段。
2. 常用属性详解
通过添加不同属性，可以增强文本框的功能与用户体验：
立即学习“前端免费学习笔记（深入）”；
-
value：设置默认显示的文本内容。
示例：<input type="text" value="请输入用户名"> -
placeholder：提供提示信息，用户开始输入后自动消失。
示例：<input type="text" placeholder="请输入邮箱地址"> -
maxlength：限制用户最多输入的字符数。
示例：<input type="text" maxlength="10">（最多10个字符） -
size：控制输入框在页面上显示的宽度（以字符为单位）。
示例：<input type="text" size="20"> -
readonly：设置只读，用户不能修改内容，但值可提交。
示例：<input type="text" value="不可编辑" readonly> -
disabled：禁用输入框，样式变灰，且不会随表单提交。
示例：<input type="text" value="已禁用" disabled> -
required：在表单提交时强制用户填写此字段。
示例：<input type="text" required placeholder="必填项"> -
autofocus：页面加载时自动聚焦到该输入框。
示例：<input type="text" autofocus placeholder="自动获得焦点"> -
autocomplete：控制是否启用浏览器自动填充功能。
示例：<input type="text" autocomplete="off">（关闭自动补全）
3. 使用技巧与注意事项
合理使用文本框能提升用户体验和数据准确性：
- 尽量配合 label 标签使用，提高可访问性。
示例：<label for="name">姓名：</label><input type="text" id="name" name="name"> - 使用 placeholder 提示时，不要替代 label，它只是辅助提示。
- 对敏感或密码类输入，应使用 type="password" 而非 text。
- 结合CSS可自定义样式，如宽度、边框、字体等，使界面更美观。
示例：<input type="text" style="width: 200px; padding: 5px;"> - 在移动端，注意设置合适的 size 和响应式布局，避免显示异常。
基本上就这些。掌握 input type="text" 的基本用法和关键属性，能有效满足大多数文本输入需求。实际开发中建议结合JavaScript进行输入验证，进一步提升交互体验。
