答案：创建HTML文本输入框需使用<input type="text">，常用属性包括name、id、value、placeholder、maxlength、readonly、disabled和required，结合CSS可设置宽高、边框、圆角、聚焦效果等样式，并推荐配合<label>标签提升可访问性。
在HTML中，输入框（input）是网页表单中最常见的元素之一。其中 text类型 的输入框用于让用户输入单行文本内容。下面介绍如何创建一个基本的 text 类型 input 输入框，以及它的常用属性和样式设置方法。
1. 基本语法：创建一个text输入框
使用 <input> 标签并设置 type="text" 即可创建一个文本输入框：
<input type="text" />这是一个最简单的文本输入框，用户可以在其中输入文字。
2. 常用属性说明
通过添加不同属性可以控制输入框的行为和初始状态：
立即学习“前端免费学习笔记（深入）”；
- name：指定输入框的名称，用于表单提交时识别数据。例如：name="username"
- id：为输入框设置唯一标识，常用于CSS或JavaScript操作。例如：id="user-input"
- value：设置默认显示的文本内容。例如：value="请输入用户名"
- placeholder：提示文字，在输入框为空时显示浅色提示信息。例如：placeholder="请输入您的姓名"
- maxlength：限制用户最多可输入的字符数。例如：maxlength="20"
- readonly：设置只读，用户不能修改内容，但值会随表单提交。例如：readonly
- disabled：禁用输入框，无法点击或输入，且值不会被提交。例如：disabled
- required：表示该字段必填，提交表单时若为空会提示错误。例如：required
示例代码：
<input type="text" name="email" id="email" placeholder="请输入邮箱地址" maxlength="50" required />
3. 使用CSS设置输入框样式
可以通过CSS美化输入框的外观，提升用户体验。
- width / height：设置宽高。例如：width: 200px;
- padding：内边距，让文字与边框保持距离
- border：边框样式，如颜色、粗细、是否圆角。例如：border: 1px solid #ccc;
- border-radius：设置圆角边框。例如：border-radius: 4px;
- outline：聚焦时的外轮廓线，通常设置为 none 或自定义颜色
- background-color：背景颜色
- font-size：字体大小
示例CSS样式：
<style>.text-input {
width: 250px;
padding: 8px;
font-size: 14px;
border: 1px solid #ddd;
border-radius: 4px;
outline: none;
}
.text-input:focus {
border-color: #007bff;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}
</style>
<input type="text" class="text-input" placeholder="点击输入..." />
4. 实际应用建议
在实际开发中，建议结合语义化标签（如 <label>）提高可访问性：
<label for="name">姓名：</label><input type="text" id="name" name="name" placeholder="请输入姓名" />
这样点击“姓名”文字也能聚焦到输入框，对屏幕阅读器更友好。
基本上就这些。掌握 type="text" 输入框的基本属性和样式设置，就能满足大多数文本输入场景的需求。不复杂但容易忽略细节，比如 placeholder 提示语清晰、加上 required 验证等，都能显著提升表单体验。
