如何实现HTML表单点击按钮显示额外非必填输入字段？

1. 调整HTML结构 #

将非必填的field4、field5放入统一容器，并添加展开/收起按钮：

<form action="#" class="u-clearfix u-form-spacing-25 u-form-vertical u-inner-form" source="email" name="Netflow" style="padding: 10px;">

  <div class="u-form-group u-form-name u-form-partition-factor-2">
    <label for="field1" class="u-custom-font u-heading-font u-label u-text-body-alt-color u-label-1">field1</label>
    <input type="text" placeholder="field1" id="name-26a2" name="text-1" class="u-border-1 u-border-custom-color-1 u-custom-font u-heading-font u-input u-input-rectangle u-radius-50 u-white u-input-1" required="">
  </div>

  <div class="u-form-email u-form-group u-form-partition-factor-2">
    <label for="field2" class="u-custom-font u-heading-font u-label u-text-body-alt-color u-label-2">field2</label>
    <input type="number" placeholder="field2" id="email-26a2" name="number" class="u-border-1 u-border-custom-color-1 u-custom-font u-heading-font u-input u-input-rectangle u-radius-50 u-white u-input-2" required="">
  </div>

  <div class="u-form-group u-form-partition-factor-2 u-form-group-5">
    <label for="field3" class="u-custom-font u-heading-font u-label u-text-body-alt-color u-label-5">field3</label>
    <input type="text" placeholder="field3" id="text-c578" name="number-1" class="u-border-1 u-border-custom-color-1 u-custom-font u-heading-font u-input u-input-rectangle u-radius-50 u-white u-input-5">
  </div>

  <!-- 展开/收起按钮 -->
  <div class="u-form-group">
    <button type="button" id="toggle-advanced" class="u-btn u-btn-round u-button-style u-custom-color-2 u-custom-font u-heading-font u-radius-50">+ 显示更多选项</button>
  </div>

  <!-- 包裹非必填字段的容器 -->
  <div class="advanced-fields u-form-spacing-25">
    <div class="u-form-group u-form-partition-factor-2 u-form-group-6">
      <label for="field4" class="u-custom-font u-heading-font u-label u-text-body-alt-color u-label-6">field4</label>
      <input type="text" placeholder="field4" id="text-a09b" name="text" class="u-border-1 u-border-custom-color-1 u-custom-font u-heading-font u-input u-input-rectangle u-radius-50 u-white u-input-6">
    </div>

    <div class="u-form-group u-form-partition-factor-2 u-form-group-7">
      <label for="field5" class="u-custom-font u-heading-font u-label u-text-body-alt-color u-label-7">field5</label>
      <input type="text" placeholder="field5" id="text-414f" name="text-2" class="u-border-1 u-border-custom-color-1 u-custom-font u-heading-font u-input u-input-rectangle u-radius-50 u-white u-input-7">
    </div>
  </div>

  <div class="u-align-left u-form-group u-form-submit">
    <a href="#" class="u-btn u-btn-round u-btn-submit u-button-style u-custom-color-2 u-custom-font u-heading-font u-radius-50 u-btn-1">Submit</a>
    <input type="submit" value="submit" class="u-form-control-hidden">
  </div>

</form>

2. 添加CSS动画样式 #

通过CSS过渡实现平滑展开/收起效果：

/* 默认隐藏高级字段容器 */
.advanced-fields {
  max-height: 0;
  overflow: hidden;
  /* 0.3秒过渡动画，可自行调整时长 */
  transition: max-height 0.3s ease-in-out;
}

/* 展开时的状态 */
.advanced-fields.expanded {
  /* 设置足够大的max-height，确保容纳所有字段 */
  max-height: 500px;
}

/* 按钮样式微调（可选） */
#toggle-advanced {
  cursor: pointer;
  border: none;
  padding: 8px 16px;
}

3. JavaScript交互逻辑 #

监听按钮点击，切换容器状态并更新按钮文本：

// 获取按钮和字段容器元素
const toggleBtn = document.getElementById('toggle-advanced');
const advancedFields = document.querySelector('.advanced-fields');

// 绑定点击事件
toggleBtn.addEventListener('click', function() {
  // 切换展开状态类
  advancedFields.classList.toggle('expanded');
  
  // 更新按钮文本
  if (advancedFields.classList.contains('expanded')) {
    this.textContent = '- 收起更多选项';
  } else {
    this.textContent = '+ 显示更多选项';
  }
});

核心逻辑说明 #

• 容器统一控制：将field4、field5放入同一容器，便于批量管理显示/隐藏
• CSS过渡动画：用max-height替代height:auto实现平滑过渡（height:auto无法触发CSS过渡）
• 类切换交互：通过添加/移除expanded类触发样式变化，同时更新按钮状态提升用户体验

内容的提问来源于stack exchange，提问作者user20321111