创建具有动态扩展文本框的表单

是一种常见的前端开发需求，可以通过以下步骤实现：

1. HTML结构：创建一个表单元素，并在其中添加一个初始的文本框。

<form>
  <div id="textFields">
    <input type="text" name="field1" placeholder="文本框1">
  </div>
  <button type="button" onclick="addTextField()">添加文本框</button>
</form>

1. JavaScript函数：编写一个JavaScript函数，用于在点击"添加文本框"按钮时动态添加新的文本框。

function addTextField() {
  var textFieldsContainer = document.getElementById("textFields");
  var textFieldCount = textFieldsContainer.getElementsByTagName("input").length + 1;
  
  var newTextField = document.createElement("input");
  newTextField.type = "text";
  newTextField.name = "field" + textFieldCount;
  newTextField.placeholder = "文本框" + textFieldCount;
  
  textFieldsContainer.appendChild(newTextField);
}

以上代码中，addTextField()函数会获取文本框容器的引用，并计算当前文本框数量，然后创建一个新的文本框元素，并设置其名称和占位符，最后将其添加到文本框容器中。

1. CSS样式（可选）：根据需要，可以添加一些CSS样式来美化表单和文本框。

form {
  margin-bottom: 10px;
}

input[type="text"] {
  margin-bottom: 5px;
}

这样，当用户点击"添加文本框"按钮时，就会动态地在表单中添加一个新的文本框，每个文本框都有一个唯一的名称和占位符。这种表单可以用于收集可变数量的文本输入，例如多个联系人姓名、多个项目任务等。

腾讯云相关产品和产品介绍链接地址：

• 腾讯云前端开发服务：https://cloud.tencent.com/product/fe
• 腾讯云云原生服务：https://cloud.tencent.com/product/tke
• 腾讯云数据库服务：https://cloud.tencent.com/product/cdb
• 腾讯云服务器运维服务：https://cloud.tencent.com/product/cvm
• 腾讯云音视频处理服务：https://cloud.tencent.com/product/mps
• 腾讯云人工智能服务：https://cloud.tencent.com/product/ai
• 腾讯云物联网服务：https://cloud.tencent.com/product/iotexplorer
• 腾讯云移动开发服务：https://cloud.tencent.com/product/mob
• 腾讯云存储服务：https://cloud.tencent.com/product/cos
• 腾讯云区块链服务：https://cloud.tencent.com/product/baas
• 腾讯云元宇宙服务：https://cloud.tencent.com/product/ue