HTML的fieldset和legend标签怎么用？如何分组表单？

<form action="/submit" method="post">
  <fieldset>
    <legend>联系方式</legend>
    <label for="name">姓名:</label>
    <input type="text" id="name" name="user_name">

    <label for="email">邮箱:</label>
    <input type="email" id="email" name="user_email">
  </fieldset>

  <fieldset>
    <legend>登录信息</legend>
    <label for="username">用户名:</label>
    <input type="text" id="username" name="login_username">

    <label for="password">密码:</label>
    <input type="password" id="password" name="login_password">
  </fieldset>

  <button type="submit">提交</button>
</form>

<fieldset>
  <legend>收货地址</legend>
  <label for="street">街道地址:</label>
  <input type="text" id="street" name="shipping_street">

  <label for="city">城市:</label>
  <input type="text" id="city" name="shipping_city">

  <label for="zip">邮编:</label>
  <input type="text" id="zip" name="shipping_zip">
</fieldset>

<fieldset>
  <legend>支付信息</legend>
  <label for="card_number">信用卡号:</label>
  <input type="text" id="card_number" name="card_number">

  <label for="expiry_date">有效期:</label>
  <input type="text" id="expiry_date" name="expiry_date" placeholder="MM/YY">

  <label for="cvv">CVV:</label>
  <input type="text" id="cvv" name="cvv">
</fieldset>

<fieldset>
  <legend>你最喜欢的颜色是什么？</legend>
  <input type="radio" id="red" name="fav_color" value="red">
  <label for="red">红色</label><br>

  <input type="radio" id="blue" name="fav_color" value="blue">
  <label for="blue">蓝色</label><br>

  <input type="radio" id="green" name="fav_color" value="green">
  <label for="green">绿色</label>
</fieldset>

fieldset {
  border: 1px solid #ccc; /* 浅灰色边框 */
  border-radius: 8px; /* 圆角 */
  padding: 20px; /* 增加内边距 */
  margin-bottom: 25px; /* 底部留白 */
  background-color: #f9f9f9; /* 浅背景色 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 轻微阴影 */
}

/* 如果你不想有边框，可以这样 */
fieldset.no-border {
  border: none;
  padding: 0;
  margin: 0;
}

legend {
  font-size: 1.2em; /* 字体大小 */
  font-weight: bold; /* 加粗 */
  color: #333; /* 字体颜色 */
  padding: 0 10px; /* 左右内边距，让背景色更明显 */
  background-color: #f9f9f9; /* 与fieldset背景色一致或对比 */
  border: 1px solid #ccc; /* 也可以给legend加边框 */
  border-radius: 5px; /* 圆角 */
  margin-left: 20px; /* 调整左侧外边距，使其更靠右 */
  /* 如果想让legend在fieldset内部，而不是跨越边框 */
  /* display: block; */
  /* width: fit-content; */
}

/* 调整legend在fieldset内部的位置 */
fieldset.alt-legend legend {
  background-color: #007bff; /* 蓝色背景 */
  color: white; /* 白色文字 */
  padding: 5px 15px;
  border-radius: 5px;
  /* 关键：使用 transform 向上移动，并用 margin-left 调整水平位置 */
  transform: translateY(-50%);
  margin-left: 20px;
  position: relative; /* 确保transform生效 */
}