使用 javascript 创建文本框(1)

📌 相关文章

📜 使用 javascript 创建文本框(1)

📅 最后修改于: 2023-12-03 15:22:12.489000 🧑 作者: Mango

使用 Javascript 创建文本框

在网页开发过程中，经常需要使用文本框来收集用户数据或者让用户输入一些信息。通过 JavaScript，我们可以在 HTML 页面中动态地创建文本框。

HTML 中的文本框

在 HTML 中，我们可以使用 <input> 标签来创建文本框，例如：

<input type="text" name="username">

其中，type 属性指定了文本框类型为文本输入框，name 属性指定了表单提交时的字段名。

然而，必须在 HTML 中手动编写这些标记。如果我们需要动态地创建文本框，就需要使用 JavaScript。

使用 JavaScript 创建文本框

我们可以使用 document.createElement() 方法创建一个新的元素节点，并将其添加到 HTML 文档中。对于文本框，我们需要创建一个 input 元素，并设置其 type 属性为 text：

var textBox = document.createElement("input");
textBox.type = "text";

接下来，我们还可以设置其它属性，例如 name、id、size 等等：

textBox.setAttribute("name", "username");
textBox.setAttribute("id", "username");
textBox.setAttribute("size", 30);

最后，将文本框添加到指定的 HTML 元素中即可：

document.getElementById("myForm").appendChild(textBox);

示例代码

下面是一个完整的示例程序，用于向用户请求姓名信息：

<!DOCTYPE html>
<html>
<head>
  <title>Dynamic Textbox Demo</title>
</head>
<body>
  <h1>Please enter your name:</h1>
  <form id="myForm">
    <input type="button" value="Add Textbox" onclick="addTextBox()">
  </form>
  <script>
    function addTextBox() {
      // 创建文本框元素
      var textBox = document.createElement("input");
      textBox.type = "text";
      textBox.setAttribute("name", "name");
      textBox.setAttribute("id", "name");
      textBox.setAttribute("size", 30);
      
      // 添加到 HTML 表单中
      document.getElementById("myForm").appendChild(textBox);
    }
  </script>
</body>
</html>

在上述示例程序中，我们定义了一个 addTextBox() 函数，用于创建新的文本框，然后将其添加到 myForm 表单中。由于我们使用了 onclick 属性，当用户点击按钮时，addTextBox() 函数就会被调用。