纯 CSS 表单分组输入

在编写表单时，我们通常需要将相关字段分组，以便用户更容易地理解和填写。在这里，我们将介绍一种使用纯 CSS 实现表单分组的方法，不需要使用任何 JavaScript 代码。

HTML 结构

我们首先需要先准备好表单的 HTML 结构。在这个示例中，我们将表单分成两个组，每个组包含一些相关的字段。

<form>
  <fieldset>
    <legend>第一组</legend>
    <div>
      <label for="name">姓名</label>
      <input type="text" id="name" name="name">
    </div>
    <div>
      <label for="email">电子邮件</label>
      <input type="email" id="email" name="email">
    </div>
  </fieldset>
  <fieldset>
    <legend>第二组</legend>
    <div>
      <label for="phone">电话号码</label>
      <input type="tel" id="phone" name="phone">
    </div>
    <div>
      <label for="message">留言</label>
      <textarea id="message" name="message"></textarea>
    </div>
  </fieldset>
  <button type="submit">提交</button>
</form>

在这个示例中，我们使用了 fieldset 元素将相关字段分组，并使用 legend 元素为每个组添加标题。每个组内包含多个 div 元素，每个 div 元素包含一个标签 label 和一个表单元素，如 input 或 textarea。

CSS 样式

接下来，我们需要使用 CSS 样式将表单进行分组。我们需要为表单添加一个类名 form-group，并设置其为相对定位。

然后，我们为每个 fieldset 元素添加一个类名 field-group，并设置其为绝对定位，将其定位在表单上方的合适位置。我们使用 top 属性来设置它们的垂直位置，使用 left 属性来设置它们的水平位置。

.form-group {
  position: relative;
}

.field-group {
  position: absolute;
  top: 0;
  left: 0;
}

接下来，我们需要将每个 fieldset 元素隐藏，这样用户将无法看到它们。我们使用 opacity 属性将其设置为 0，并使用 visibility 属性将其设置为隐藏。

.field-group {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
}

最后，当用户点击表单内的某个标签时，我们使用 CSS :checked 伪类选择器来显示相应的 fieldset 元素。我们将每个 label 元素的 for 属性设置为相应的 fieldset 元素的 id 属性，并使用 CSS + 兄弟选择器来寻找相邻的下一个 fieldset 元素，并将其设置为可见状态。

#group1:checked ~ .form-group .field-group.group1 {
  opacity: 1;
  visibility: visible;
}

#group2:checked ~ .form-group .field-group.group2 {
  opacity: 1;
  visibility: visible;
}

在这个示例中，我们使用 group1 和 group2 作为 fieldset 元素的类名，以便在 CSS 中引用它们。

完整代码

<form class="form-group">
  <input type="radio" id="group1" name="group" checked>
  <label for="group1">第一组</label>
  <input type="radio" id="group2" name="group">
  <label for="group2">第二组</label>

  <fieldset class="field-group group1">
    <legend>第一组</legend>
    <div>
      <label for="name">姓名</label>
      <input type="text" id="name" name="name">
    </div>
    <div>
      <label for="email">电子邮件</label>
      <input type="email" id="email" name="email">
    </div>
  </fieldset>

  <fieldset class="field-group group2">
    <legend>第二组</legend>
    <div>
      <label for="phone">电话号码</label>
      <input type="tel" id="phone" name="phone">
    </div>
    <div>
      <label for="message">留言</label>
      <textarea id="message" name="message"></textarea>
    </div>
  </fieldset>

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

<style>
 .form-group {
    position: relative;
  }

  .field-group {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
  }

  #group1:checked ~ .form-group .field-group.group1 {
    opacity: 1;
    visibility: visible;
  }

  #group2:checked ~ .form-group .field-group.group2 {
    opacity: 1;
    visibility: visible;
  }
</style>

结论

使用这种方法，我们可以轻松地将表单分组，使用户更容易地理解和填写表单。这种方法不需要使用任何 JavaScript 代码，只需使用纯 CSS 就可以实现。