如何在选项卡中动态打开表单？

<div class="tab-container">
  <div class="tab">
    <button class="tablinks" onclick="openForm(event, 'form1')">表单1</button>
    <button class="tablinks" onclick="openForm(event, 'form2')">表单2</button>
    <button class="tablinks" onclick="openForm(event, 'form3')">表单3</button>
  </div>
  
  <div id="form1" class="tabcontent">
    <!-- 表单1的内容 -->
  </div>
  
  <div id="form2" class="tabcontent">
    <!-- 表单2的内容 -->
  </div>
  
  <div id="form3" class="tabcontent">
    <!-- 表单3的内容 -->
  </div>
</div>

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 20px;
  border: 1px solid #ccc;
  background-color: white;
}

.tabcontent.show {
  display: block;
}

function openForm(evt, formName) {
  var i, tabcontent, tablinks;
  
  // 隐藏所有表单内容
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  
  // 移除所有选项卡的激活状态
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  
  // 显示当前选中的表单内容并激活选项卡
  document.getElementById(formName).style.display = "block";
  evt.currentTarget.className += " active";
}

<button class="tablinks" onclick="openForm(event, 'form1')">表单1</button>
<button class="tablinks" onclick="openForm(event, 'form2')">表单2</button>
<button class="tablinks" onclick="openForm(event, 'form3')">表单3</button>