创建基础 HTML 表单

介绍

在本实验中，我们将学习如何使用 <form> 标签和不同的表单元素创建一个基本的 HTML 表单。

注意：你可以在 index.html 中练习编码，并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后，你可以刷新 Web 8080 标签以预览网页。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/FormsandInputGroup -.-> html/forms("Form Elements") html/FormsandInputGroup -.-> html/form_valid("Form Validation") html/FormsandInputGroup -.-> html/form_group("Grouping Form Elements") html/FormsandInputGroup -.-> html/form_access("Accessibility in Forms") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70763{{"HTML 输入表单"}} html/head_elems -.-> lab-70763{{"HTML 输入表单"}} html/doc_flow -.-> lab-70763{{"HTML 输入表单"}} html/forms -.-> lab-70763{{"HTML 输入表单"}} html/form_valid -.-> lab-70763{{"HTML 输入表单"}} html/form_group -.-> lab-70763{{"HTML 输入表单"}} html/form_access -.-> lab-70763{{"HTML 输入表单"}} html/custom_attr -.-> lab-70763{{"HTML 输入表单"}} end

设置 HTML 文档

我们将从创建一个包含基本结构的 HTML 文档开始：

<!doctype html>
<html>
  <head>
    <title>HTML Form Example</title>
  </head>
  <body></body>
</html>

创建一个基本表单

我们现在将创建一个包含输入字段和提交按钮的基本 HTML 表单。将以下代码添加到 body 标签中：

<h1>HTML Form Example</h1>
<form>
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" />
  <br /><br />
  <input type="submit" value="Submit" />
</form>

在上面的代码中，我们使用了一个 <h1> 标签作为表单的标题。然后是一个 <form> 标签，其中包含一个 <label> 标签和一个 <input> 标签。<label> 标签的 for 属性值应与 <input> 标签的 id 属性值匹配。我们还使用了 <br> 标签来添加换行。最后，我们使用了一个 type 属性为 "submit" 的 <input> 标签。

添加表单元素

我们可以通过在表单中使用不同类型的输入字段来添加各种表单元素。让我们在表单中添加一个下拉菜单和复选框。将 <form> 标签的代码替换为以下代码：

<form>
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" />
  <br /><br />
  <label for="gender">Gender:</label>
  <select name="gender" id="gender">
    <option value="male">Male</option>
    <option value="female">Female</option>
    <option value="other">Other</option>
  </select>
  <br /><br />
  <label for="hobby">Hobbies:</label>
  <br />
  <input type="checkbox" id="coding" name="hobby" value="coding" />
  <label for="coding">Coding</label>
  <input type="checkbox" id="reading" name="hobby" value="reading" />
  <label for="reading">Reading</label>
  <input type="checkbox" id="drawing" name="hobby" value="drawing" />
  <label for="drawing">Drawing</label>
  <br /><br />
  <input type="submit" value="Submit" />
</form>

在上面的代码中，我们为性别字段添加了一个 <select> 标签，并使用 <option> 标签提供了三个选项。我们还为爱好添加了三个带有不同标签的复选框。

表单属性

我们可以为 <form> 标签添加属性以自定义表单的行为。让我们为表单添加 action 和 method 属性。将 <form> 标签的代码替换为以下代码：

<form action="submit-form.php" method="post"></form>

在上面的代码中，我们添加了 action 属性，其值为 "submit-form.php"，以及 method 属性，其值为 "post"。这告诉浏览器使用 HTTP 方法 POST 将表单数据提交到 "submit-form.php" 文件。

表单验证

我们可以使用 required 属性来使某些字段成为必填项。将 required 属性添加到 name 字段的 <input> 标签中。

<input type="text" name="name" id="name" required />

表单可访问性

我们还可以通过使用 <fieldset> 和 <legend> 标签为表单添加可访问性功能。用以下代码包裹性别字段：

<fieldset>
  <legend>Gender:</legend>
  ...
</fieldset>

这将性别字段分组，并为该组添加一个图例（legend）。

添加标签

最后，我们还可以使用 <label> 标签为复选框添加标签。用以下代码包裹每个爱好的复选框和标签：

<label for="coding">Coding</label>
<input type="checkbox" id="coding" name="hobby" value="coding" />

这将每个标签与相应的复选框关联起来。

总结

在本实验中，我们学习了如何使用 <form> 标签以及不同的表单元素（如输入字段、下拉菜单和复选框）创建一个基本的 HTML 表单。我们还学习了如何添加表单属性，例如 method、action 和 required，以及如何使用 <fieldset> 和 <legend> 标签添加可访问性功能。