HTML 表单分组

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

HTML <fieldset> 标签用于将 HTML 元素分组,它可以帮助创建结构化和组织良好的文档。使用 <fieldset> 标签可以将表单中的相关字段分组,以更有条理的方式显示表单字段。

在本实验中,我们将演示如何使用 <fieldset> 标签来创建结构化和组织良好的表单。

注意:你可以在 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/layout("`Layout Elements`") html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`") html/FormsandInputGroup -.-> html/forms("`Form Elements`") 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-70756{{"`HTML 表单分组`"}} html/head_elems -.-> lab-70756{{"`HTML 表单分组`"}} html/layout -.-> lab-70756{{"`HTML 表单分组`"}} html/doc_flow -.-> lab-70756{{"`HTML 表单分组`"}} html/forms -.-> lab-70756{{"`HTML 表单分组`"}} html/form_group -.-> lab-70756{{"`HTML 表单分组`"}} html/form_access -.-> lab-70756{{"`HTML 表单分组`"}} html/custom_attr -.-> lab-70756{{"`HTML 表单分组`"}} end

创建 HTML 页面

创建一个名为 index.html 的文件,并编写 HTML 页面的基本结构。

<!doctype html>
<html>
  <head>
    <title>使用 Fieldset 标签创建表单</title>
  </head>
  <body></body>
</html>

使用 Fieldset 创建表单

在 HTML 的 body 中添加一个表单元素,然后使用 <fieldset> 标签将相关的表单字段分组。我们还将为表单元素添加 label 标签,以便为输入字段添加描述。

<form>
  <fieldset>
    <legend>用户信息</legend>
    <label for="fname">名字:</label>
    <input type="text" id="fname" name="firstname" /><br /><br />
    <label for="lname">姓氏:</label>
    <input type="text" id="lname" name="lastname" /><br /><br />
    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email" /><br /><br />
  </fieldset>
  <fieldset>
    <legend>账户信息</legend>
    <label for="uname">用户名:</label>
    <input type="text" id="uname" name="username" /><br /><br />
    <label for="pass">密码:</label>
    <input type="password" id="pass" name="password" /><br /><br />
  </fieldset>
  <input type="submit" value="提交" />
</form>

以上代码将创建一个分为两个字段组(fieldset)的表单。第一个字段组包含用户的个人信息,第二个字段组包含账户信息。你可能会注意到,我们使用了 label 标签为字段提供了一些上下文说明。

添加 CSS

我们可以使用 CSS 为 fieldset 添加样式,使其具有更好的设计效果。我们可以添加边框、背景颜色和一些内边距,让 fieldset 看起来更美观。

<style>
  fieldset {
    padding: 10px;
    border: 1px solid #c0c0c0;
    border-radius: 4px;
    margin: 5px;
    background-color: #f8f8f8;
  }
</style>

在浏览器中打开 HTML 文件,查看表单并测试其效果。

总结

Fieldset 标签用于创建结构化和组织良好的文档,特别适用于创建表单。使用 label 标签可以为输入字段提供上下文说明。Fieldset 标签将相关的表单字段分组,并为这些字段添加边框。最后,通过 CSS 样式为 fieldset 提供设计,使其看起来更加美观。

您可能感兴趣的其他 HTML 教程