如何使用 HTML 对表单中的相关元素进行分组？

1. 使用 fieldset 和 legend 标签

可以使用 fieldset 标签将表单中相关的元素分组，并使用 legend 标签为分组设置标题。

示例代码：

<form>
  <fieldset>
    <legend>个人信息</legend>
    <label>
      姓名：
      <input type="text" name="username">
    </label>
    <br>
    <label>
      性别：
      <input type="radio" name="gender" value="male">男
      <input type="radio" name="gender" value="female">女
    </label>
  </fieldset>
  <br>
  <fieldset>
    <legend>联系方式</legend>
    <label>
      手机号码：
      <input type="tel" name="phone">
    </label>
    <br>
    <label>
      电子邮件：
      <input type="email" name="email">
    </label>
  </fieldset>
</form>

渲染效果：

2. 使用 div 和 label 标签

div 标签可以用来分组表单元素，而 label 标签可以为表单元素设置标签名。通过为 label 标签设置 for 属性，可以将它与相应的表单元素关联起来。

示例代码：

<form>
  <div>
    <label for="username">姓名：</label>
    <input type="text" name="username" id="username">
  </div>
  <br>
  <div>
    <label>性别：</label>
    <label for="male">男</label>
    <input type="radio" name="gender" value="male" id="male">
    <label for="female">女</label>
    <input type="radio" name="gender" value="female" id="female">
  </div>
  <br>
  <div>
    <label for="phone">手机号码：</label>
    <input type="tel" name="phone" id="phone">
  </div>
  <br>
  <div>
    <label for="email">电子邮件：</label>
    <input type="email" name="email" id="email">
  </div>
</form>

渲染效果：

以上是使用 HTML 对表单中的相关元素进行分组的两种方法，分别使用 fieldset 和 legend 标签，以及 div 和 label 标签。开发者们可根据实际需求选择适合自己的方式。