HTML 动态创建指定数量的输入表单元素

在本文中，我们将介绍如何使用HTML动态创建指定数量的输入表单元素。通常，我们在网页中需要收集多个相同类型的数据，例如电子邮件地址、电话号码或姓名。通过动态创建输入表单元素，我们可以灵活地根据需求生成所需数量的输入框。

阅读更多：HTML 教程

使用JavaScript动态创建输入表单元素

要实现动态创建指定数量的输入表单元素，我们可以使用JavaScript来操作DOM（文档对象模型）。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>动态创建输入表单元素</title>
  <script>
    function createInputFields() {
      var count = parseInt(document.getElementById("count").value);
      var container = document.getElementById("container");

      // 先清空容器中的内容
      container.innerHTML = "";

      // 创建指定数量的输入表单元素
      for (var i = 0; i < count; i++) {
        var input = document.createElement("input");
        input.type = "text";
        input.name = "input" + (i + 1);

        container.appendChild(input);
        container.appendChild(document.createElement("br"));
      }
    }
  </script>
</head>
<body>
  <h1>动态创建输入表单元素</h1>

  <label for="count">要创建的输入表单数量：</label>
  <input type="number" id="count" min="1" step="1" value="1">
  <button onclick="createInputFields()">创建</button>

  <div id="container"></div>
</body>
</html>

上述代码中，我们首先使用parseInt()函数将输入框中的数量值转换为整数。然后，使用document.getElementById()方法获取容器元素和数量输入框元素。接着，我们清空容器中的内容，然后使用document.createElement()方法创建输入表单元素。通过设置相关属性，我们定义了每个输入表单元素的类型和名称。最后，通过container.appendChild()方法将元素添加到容器中，并使用<br>元素添加换行。

在上述示例中，我们使用一个按钮来触发createInputFields()函数，该函数会根据数量输入框中的值动态创建输入表单元素。创建的输入表单元素将显示在ID为container的<div>元素内。

您可以根据实际需求修改代码，例如调整输入表单元素的类型、添加其他属性或样式。