HTML 表单

介绍

HTML 表单是网页的基础部分，它允许用户通过输入信息与网站进行交互。这可以从简单的搜索框到复杂的注册页面。在本实验中，你将学习创建 HTML 表单的基础知识，包括如何添加文本字段、标签和提交按钮。我们将一步一步构建一个简单的联系表单。

实验环境已经为你启动了一个 Web 服务器。你可以在 index.html 文件中编写你的 HTML 代码，并通过点击左上角的 Web 8080 标签来查看实时预览。

创建带 action 属性的 form 标签

在此步骤中，我们将开始创建表单元素的容器。<form> 标签用于创建用于用户输入的 HTML 表单。所有表单元素，例如文本字段、按钮和复选框，都必须放在 <form> 标签内。

action 属性指定了在提交表单时将表单数据发送到何处。对于本实验，我们将将其留空，因为我们专注于 HTML 结构，而不是后端处理。

请从左侧的文件浏览器中打开 index.html 文件，并添加以下代码。

<form action=""></form>

添加代码后，你可以切换到 Web 8080 标签来预览页面。你目前还看不到任何内容，因为表单是空的。

添加 type 为 text 的 input 标签以创建文本字段

在此步骤中，我们将添加一个供用户输入文本的字段。<input> 标签是最常用的表单元素之一。它可以根据 type 属性以多种方式显示。

要创建单行文本输入字段，我们使用 type="text"。这非常适合输入用户名、姓名或电子邮件地址等信息。

现在，让我们在 index.html 文件中的 <form> 标签内添加一个文本输入字段。

<form action="">
  <input type="text" />
</form>

保存文件并切换到 Web 8080 标签。你现在应该在页面上看到一个小的文本框，你可以在其中输入内容。

插入 type 为 submit 的 input 标签以创建按钮

在此步骤中，我们将添加一个按钮以允许用户提交表单。我们可以再次使用 <input> 标签创建提交按钮，但这次使用 type="submit"。

当用户点击此按钮时，表单数据将被发送到 <form> 标签的 action 属性中指定的服务器。你可以使用 value 属性来设置按钮上显示的文本。

让我们在 index.html 中为我们的表单添加一个提交按钮。

<form action="">
  <input type="text" />
  <br /><br />
  <input type="submit" value="Submit" />
</form>

我们还添加了 <br><br> 标签，以便在文本字段和按钮之间创建一些垂直空间，以获得更好的布局。保存文件并查看 Web 8080 标签，以查看新的“Submit”按钮。

使用带 for 属性的 label 标签进行标注

在此步骤中，我们将为文本字段添加一个标签。<label> 标签为许多表单元素定义了一个标签。它提高了可用性和可访问性，因为点击标签会聚焦到相应的输入字段。

要将 <label> 连接到 <input>，<label> 的 for 属性必须与 <input> 的 id 属性相同。

让我们在 index.html 中为文本输入添加一个 id 以及一个相应的 <label>。

<form action="">
  <label for="username">Name:</label><br />
  <input type="text" id="username" name="username" />
  <br /><br />
  <input type="submit" value="Submit" />
</form>

我们为“Name:”添加了一个 label，并使用 id="username" 和 for="username" 将其链接到输入字段。我们还为输入字段添加了一个 name 属性，这对于在提交表单时识别数据很重要。

保存文件并在 Web 8080 标签中查看更改。现在，如果你点击“Name:”文本，光标将自动移入文本框。

添加 textarea 标签以实现多行输入

在此步骤中，我们将添加一个更大的文本区域供用户输入消息。虽然 <input type="text"> 用于单行文本，但 <textarea> 标签用于多行输入。

你可以通过 rows 和 cols 属性来控制 <textarea> 的大小，它们分别指定可见的行数和每行的字符数。

让我们为表单添加一个用于输入消息的 <textarea>，并为其配备自己的 <label>。使用下面的最终代码更新你的 index.html 文件。

<form action="">
  <label for="username">Name:</label><br />
  <input type="text" id="username" name="username" />
  <br /><br />
  <label for="message">Message:</label><br />
  <textarea id="message" name="message" rows="4" cols="30"></textarea>
  <br /><br />
  <input type="submit" value="Submit" />
</form>

现在我们的表单包含一个姓名字段和一个消息区域。保存文件并在 Web 8080 标签中查看完成的表单。你现在拥有一个功能齐全、结构良好的 HTML 表单。

总结

恭喜！你已成功构建了一个基础的 HTML 表单。在本实验中，你学会了如何：

• 使用 <form> 标签作为表单元素的容器。
• 使用 <input type="text"> 创建单行文本字段。
• 使用 <input type="submit"> 创建提交按钮。
• 通过 for 和 id 属性将 <label> 与输入字段关联，从而提高可用性和可访问性。
• 使用 <textarea> 标签添加多行文本区域。

这些是构建网页交互式表单的基础构建块。你现在可以探索其他输入类型和表单属性，以构建更复杂、更强大的表单。