HTML 文本框

HTML 文本框是一个常用的网页元素，用于允许用户输入文本或修改现有文本。本文将介绍 HTML 创建文本框的基础知识。

创建基本的 HTML 文本框

HTML 中创建文本框非常简单，只需要使用 <input> 标签并设置 type="text"。例如，下面的代码会创建一个宽度为 50 个字符的文本框：

<input type="text" size="50">

我们也可以设置 id 属性和 name 属性来标识文本框。例如，下面的代码会创建一个 ID 为 "my-textbox"，名为 "name" 的文本框：

<input type="text" id="my-textbox" name="name" size="50">

更改文本框样式

可以使用 CSS 来更改文本框的样式。例如，下面的代码会将文本框的背景颜色更改为淡蓝色：

<style>
  input[type="text"] {
    background-color: lightblue;
  }
</style>
<input type="text" size="50">

限制输入内容

可以使用 maxlength 属性来限制用户在文本框中输入的最大字符数：

<input type="text" size="50" maxlength="10">

可以使用 pattern 属性来设置文本框的输入格式。例如，下面的代码会限制用户只能在文本框中输入数字：

<input type="text" size="50" pattern="[0-9]*">

使用表单

HTML 的表单可以收集用户输入的数据并将其发送到服务器进行处理。下面的代码将创建一个表单，其中包含 ID 为 "my-textbox" 的文本框：

<form action="submit-form.php" method="post">
  <label for="my-textbox">Name:</label>
  <input type="text" id="my-textbox" name="name" size="50">
  <input type="submit" value="Submit">
</form>

在提交表单之前，用户输入的数据将以键值对的形式存储在一个 HTML 表单控件中，以便于发送到服务器进行处理。在这个例子中，服务器将会接收到名为 "name" 的数据。

结论

HTML 文本框是一个相对简单且常用的网页元素，您可以使用它来允许用户输入数据。需要注意的是，您可以使用一些属性来控制文本框的样式和输入内容，同时也可以通过 HTML 表单将用户输入的数据发送到服务器进行处理。