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

在HTML中使用表单元素时，经常需要将相关的元素分组以便更好地组织和管理表单。HTML提供了多种元素来帮助我们完成这项任务。

1. fieldset 元素

<fieldset> 元素用于将表单中的相关元素分组，并将它们包裹在一个边框中。可以使用 <legend> 元素来为 <fieldset> 元素提供标题。

示例代码：

<form>
  <fieldset>
    <legend>个人信息</legend>
    <label>姓名：<input type="text" name="name"></label><br>
    <label>年龄：<input type="number" name="age"></label><br>
    <label>性别：<input type="radio" name="gender" value="male">男
            <input type="radio" name="gender" value="female">女</label><br>
  </fieldset>

  <fieldset>
    <legend>联系方式</legend>
    <label>手机：<input type="tel" name="phone"></label><br>
    <label>邮箱：<input type="email" name="email"></label><br>
  </fieldset>
</form>

效果：

2. label 元素

<label> 元素用于为表单元素添加标签，并将其与标签文字组合在一起。它还可以与 <input>、<textarea> 和 <select> 等表单元素关联起来。

示例代码：

<form>
  <label>用户名：<input type="text" name="username"></label><br>
  
  <label>密码：<input type="password" name="password"></label><br>
  
  <label>性别：
    <select name="gender">
      <option value="male">男</option>
      <option value="female">女</option>
    </select>
  </label><br>

  <label>个人简介：<textarea name="intro"></textarea></label><br>
</form>

效果：

3. optgroup 元素

<optgroup> 元素用于将 <select> 元素中的选项进行分组，并将它们包裹在一个边框中。可以为每个分组添加一个标签。

示例代码：

<select name="city">
  <optgroup label="华北地区">
    <option value="bj">北京</option>
    <option value="tj">天津</option>
    <option value="sx">山西</option>
  </optgroup>
  <optgroup label="华南地区">
    <option value="gz">广州</option>
    <option value="sz">深圳</option>
    <option value="hn">海南</option>
  </optgroup>
</select>

效果：

以上是HTML中分组表单元素的方法和示例。通过使用这些元素，我们可以更好地组织和管理表单中的相关元素，提高用户体验。