如何使用 HTML 对表单中的相关元素进行分组?
在为网站设计表单时，务必考虑用户体验，并尽可能方便用户填写表单。一种方法是将相关元素分组，以便用户快速浏览和填写表单。在本篇博文中，我们将讨论如何使用 HTML 对表单中的相关元素进行分组。
什么是 HTML 表单中的分组?
HTML 表单中的分组涉及将相关的表单元素(例如单选按钮、复选框和文本输入字段)分组在一起。通过将相关元素分组，您可以让用户更轻松地理解表单的结构并更高效地完成表单。
HTML 提供了多种将相关表单元素分组的方法。一些最常用的方法包括使用 <fieldset> 和 <legend>标签，以及使用标签对元素进行分组。
方法 1:使用 Fieldset 和 Legend 标签
<fieldset> 和 <legend> 标签通常一起使用来对相关的表单元素进行分组。<fieldset> 标签用于将一组相关的表单控件分组在一起，而 <legend> 标签为该组提供标题。
示例
以下示例演示如何使用 <fieldset> 和 <legend> 标签对单选按钮进行分组 −
<form>
<fieldset>
<legend>Preferred Contact Method:</legend>
<input type="radio" id="contact-phone" name="contact-method" value="phone">
<label for="contact-phone">Phone</label><br>
<input type="radio" id="contact-email" name="contact-method" value="email">
<label for="contact-email">Email</label><br>
<input type="radio" id="contact-mail" name="contact-method" value="mail">
<label for="contact-mail">Mail</label><br>
</fieldset>
</form>
在此示例中，<fieldset> 标签将三个单选按钮组合在一起，<legend> 标签为该组提供了标题("首选联系方式")。这向用户明确表明这些单选按钮是相关的，在填写表单时应将其视为一个组。
方法 2:使用标签对元素进行分组
另一种将相关表单元素组合在一起的方法是使用标签。在 HTML 中，<label> 标签用于将文本标签与表单控件关联。当用户点击标签时，关联的表单控件将被激活。
示例
以下是使用标签将复选框组合在一起的示例 -
<form> <label for="check-fruit">Select your favorite fruit:</label><br> <input type="checkbox" id="check-fruit" name="fruit" value="apple"> <label for="check-fruit">Apple</label><br> <input type="checkbox" id="check-fruit" name="fruit" value="banana"> <label for="check-fruit">Banana</label><br> <input type="checkbox" id="check-fruit" name="fruit" value="orange"> <label for="check-fruit">Orange</label><br> </form>
在此示例中，每个复选框都使用"for"属性与一个标签关联。文本标签显示在复选框旁边，向用户明确表明这些复选框是相关的，并且在填写表单时应将其视为一个组。
方法 3:使用 Div 标签
您还可以使用 <div> 标签将相关的表单元素分组。此方法比使用 <fieldset> 和 <legend> 标签更灵活，但需要更多工作来设置表单元素的样式。
示例
以下是使用 <div> 标签对表单元素进行分组的示例 -
<form>
<div>
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName">
</div>
<div>
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName">
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
</div>
<div>
<label for="confirmPassword">Confirm Password:</label>
<input type="password" id="confirmPassword" name="confirmPassword">
</div>
<div>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">
</div>
<div>
<input type="submit" value="Submit">
</div>
</form>
在此示例中，每个表单元素都包含在一个 <div> 标签中。您可以为 <div> 标签应用样式，以便在视觉上将相关元素组合在一起。例如，您可以为每个 <div> 添加边框、背景色或内边距，使其更加醒目。
要为表单元素本身设置样式，您可以使用 CSS 选择器来定位特定的输入类型或 ID。以下示例展示了如何为上述示例中的 <input> 元素设置样式 -
<style>
input[type="text"], input[type="email"], input[type="password"], input[type="date"] {
display: block;
width: 100%;
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 0.25rem;
margin-bottom: 1rem;
}
</style>
此 CSS 规则为表单中的所有 <input> 元素设置了标准样式。display: block 属性使每个输入元素占据其容器(在本例中为 <div> 标签)的整个宽度。width、padding、border 和 border-radius 属性控制输入字段本身的外观。最后，margin-bottom 属性在每个输入字段之间添加一些空间，使表单更易于阅读。
总的来说，使用 <div> 标签将相关的表单元素分组在一起可以让您更好地控制表单的外观和布局。但是，为每个单独的表单元素设置样式需要更多工作。
方法 4:设置组标签的样式
对表单元素进行分组时，为每个组提供清晰明确的标签非常重要。这有助于用户快速浏览表单并了解元素之间的关系。除了使用 <fieldset> 和 <legend> 之外，还可以使用 <fieldset> 和 <legend>标签，您还可以设置与每个组关联的标签的样式，使其在视觉上更加清晰。
设置组标签样式的一种方法是使用 CSS 应用背景颜色或边框。例如−
<style>
fieldset {
border: 1px solid #ccc;
padding: 10px;
}
legend {
background-color: #f2f2f2;
padding: 5px;
font-weight: bold;
}
</style>
在此示例中，<fieldset> 标签被赋予了边框和内边距，以便在视觉上将其与表单上的其他元素区分开。<legend> 标签则被赋予了背景色、内边距和粗体字体，使其作为组的标签脱颖而出。
您还可以使用 CSS 将其他样式应用于组标签，例如字体大小、字体粗细和文本对齐方式。例如，−
<style>
legend {
font-size: 1.2em;
font-weight: bold;
text-align: center;
}
</style>
此示例将字体大小设置为 1.2em，将文本加粗，并将其置于 <legend> 标签的中心。
在处理包含多组相关元素的较长表单时，设置组标签的样式尤其有用。通过为每个组标签应用不同的样式，您可以创建视觉层次结构，帮助用户更轻松地浏览表单。
使用网格系统
另一种对相关表单元素进行分组的方法是使用网格系统。许多前端框架和 CSS 库都提供了网格系统，让您可以创建更结构化、更有条理的表单布局，使其更易于阅读和浏览。
网格系统通常基于一系列用于在页面上布局元素的列和行。每列都有固定的宽度，元素放置在列内，形成类似网格的结构。
Bootstrap 是一种流行的网格系统，它提供了一个 12 列的网格，可用于创建各种不同的布局。要使用 Bootstrap 网格系统进行表单布局，您可以将每组相关的表单元素包裹在一个类名为"row"的 <div> 标签中，然后使用 Bootstrap 网格类将行划分为列。例如，−
示例
<div class="row">
<div class="col-md-6">
<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="first-name">
</div>
<div class="col-md-6">
<label for="last-name">Last Name:</label>
<input type="text" id="last-name" name="last-name">
</div>
</div>
在此示例中，"First Name"和"Last Name"的表单元素被包裹在类名为"row"的 <div> 标签中。然后，使用"col-md-6"类将该行分成两列，该类指定每列应占据中等尺寸屏幕上 12 个可用列中的 6 个。
通过使用网格系统，您可以创建更有条理、视觉上更美观的表单布局，方便用户导航。但是，请务必记住，并非所有用户都熟悉网格布局，因此您还应该为每组表单元素提供清晰且独特的标签。
结论
在 HTML 中对相关的表单元素进行分组是创建用户友好且易于访问的 Web 表单的重要方面。它有助于用户理解表单的用途，并使其更易于导航和填写。在这篇博文中，我们探讨了对表单元素进行分组的不同方法，包括使用 <fieldset>和 <legend> 标签、<div> 标签以及语义 HTML5 标签(例如 <header>、<main> 和 <section>)。我们还讨论了使用 CSS、网格系统和 JavaScript 来设置和组织分组表单元素的不同方法。
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
