文本框是HTML中一个非常重要的元素，它允许用户输入文本信息。在网页设计中，文本框的使用非常广泛，比如用户注册、登录、留言等。本文将详细介绍如何使用HTML编写文本框。
1. 文本框的基本结构
HTML中的文本框元素是<input>，其类型（type）属性为text时，表示这是一个文本框。以下是一个简单的文本框示例：
<input type="text" name="username" placeholder="请输入用户名" />
这个文本框的name属性用于标识该文本框，在提交表单时非常有用。placeholder属性为文本框提供了默认的提示信息。
2. 文本框的属性
2.1 名称（name）
name属性用于标识文本框，它是提交表单时必填的属性。例如：
<input type="text" name="username" />
当用户填写完文本框并提交表单时，浏览器会将文本框中的值以及其name属性的值一起发送到服务器。
2.2 标签（label）
label标签用于关联文本框，使其更容易被点击。以下是使用label标签的示例：
<label for="username">用户名：</label>
<input type="text" id="username" name="username" />
在这个例子中，当用户点击“用户名”标签时，焦点会自动跳转到文本框。
2.3 读取（readonly）
readonly属性用于禁用文本框，使其不可编辑。以下是使用readonly属性的示例：
<input type="text" name="username" readonly />
2.4 密码（password）
当需要用户输入密码时，可以使用password类型的文本框。以下是使用password类型的示例：
<input type="password" name="password" />
在这个文本框中，用户输入的密码将以星号（*）或圆点（.）的形式显示，以保护用户隐私。
2.5 最大长度（maxlength）
maxlength属性用于限制用户在文本框中输入的最大字符数。以下是使用maxlength属性的示例：
<input type="text" name="username" maxlength="10" />
在这个例子中，用户最多只能输入10个字符。
3. 文本框的样式
3.1 内联样式
可以通过内联样式直接为文本框添加样式。以下是使用内联样式的示例：
<input type="text" name="username" style="width: 200px; height: 30px; padding: 5px; border: 1px solid #ccc;" />
在这个例子中，文本框的宽度为200px，高度为30px，内边距为5px，边框为1px实线，颜色为灰色。
3.2 CSS样式
除了内联样式，还可以使用CSS样式来美化文本框。以下是使用CSS样式的示例：
<style>
.text-input {
width: 200px;
height: 30px;
padding: 5px;
border: 1px solid #ccc;
}
</style>
<input type="text" name="username" class="text-input" />
在这个例子中，我们定义了一个名为.text-input的CSS类，并将该类应用于文本框。
4. 总结
文本框是HTML中一个非常重要的元素，它允许用户输入文本信息。本文介绍了文本框的基本结构、属性、样式以及如何使用CSS美化文本框。希望本文能帮助您更好地理解和使用文本框。