http://www.jb51.net/article/12856.htm
<html >
<head>
<title>动态添加表单元素</title>
</head>
<script language="javascript">
function AddElement(mytype){
var mytype,TemO=document.getElementById("add");
var newInput = document.createElement("input");
newInput.type=mytype;
newInput.name="input1";
TemO.appendChild(newInput);
var newline= document.createElement("br");
TemO.appendChild(newline);
}
</script>
<body>
<form action="" method="get" name="frm">
<div id="add">
<input type="text" name="textfield">
</div>
</form>
<input name="" type="button" value="新建文本框" onClick="AddElement('text')" />
<input name="" type="button" value="新建复选框" onClick="AddElement('checkbox')" />
<input name="" type="button" value="新建单选框" onClick="AddElement('radio')" />
<input name="" type="button" value="新建文件域" onClick="AddElement('file')" />
<input name="" type="button" value="新建密码框" onClick="AddElement('password')" />
<input name="" type="button" value="新建提交按钮" onClick="AddElement('submit')" />
<input name="" type="button" value="新建恢复按钮" onClick="AddElement('reset')" />
</body>
</html>
分享到：
相关推荐
下面我们将深入探讨如何利用JavaScript实现动态添加和删除表单元素的功能。 一、动态添加表单元素 1. 创建新元素：首先，我们需要使用JavaScript创建新的HTML元素。例如，如果要添加一个文本输入框，可以使用`...
接下来，我们需要用JavaScript来实现动态添加功能。这里可以使用事件监听器来响应用户点击“添加姓名”按钮的行为： ```javascript document.getElementById('addNameButton').addEventListener('click', function...
3. 创建各种表单控件（如<input>、、<button>等），并设置相应的属性（如type、name、value等）。 4. 将创建好的表单控件通过appendChild方法添加到元素中。 5. 使用appendchild方法将整个form元素添加到文档的body...
在现代Web开发中，JavaScript作为前端开发的核心语言之一，其动态生成页面元素的能力是构建交互式网站的关键技术。本文将深入探讨如何利用JavaScript动态生成HTML页面元素，包括使用innerHTML属性和DOM（Document ...
在JavaScript编程中，"js点击连续添加input输入框并且判断值"这个功能是常见的动态表单构建场景。这种技术常用于需要用户输入不确定数量信息的情况，例如购物网站的商品添加、在线问卷调查等。下面我们将详细讲解...
在网页设计和开发中，动态添加和删除输入框（input元素）是一项常见的需求，尤其是在创建表单或构建具有用户交互性的界面时。标题"点击添加input可删除.zip"描述了一个功能，即用户可以通过点击“添加”按钮来增加新...
例如，我们可以使用`document.createElement('input')`创建一个新的文本框元素，设置其类型为`type="text"`，然后使用`appendChild()`将其添加到页面的某个位置。 4. **数组存储**：为了保存已创建的文本框，我们...
- **动态添加 HTML 元素**：使用 `document.createElement` 创建新元素，并通过 `appendChild` 将其添加到文档中。 - **事件委托**：通过监听父级元素上的事件来处理子元素的交互，避免为每个子元素单独绑定事件。 -...
JavaScript表单验证是Web开发中的一个关键环节，它主要用于确保用户在提交数据前输入的信息符合预设的格式和规则，从而提高数据质量和用户体验。在HTML表单中，我们经常使用JavaScript来实现动态验证，因为这种...
本文将深入探讨如何利用JavaScript来动态地添加和删除表单项，从而实现更灵活、用户友好的表单操作。 首先，我们需要了解HTML表单的基础。表单（`<form>`）用于收集用户输入的数据，其中包含各种表单项，如文本框...
在JavaScript编程中，动态增加文本框是一项常见的交互功能，它允许用户在页面上根据需要添加额外的输入元素，而无需离开当前页面或进行页面刷新。这个功能常用于表单提交、数据输入等场景，比如创建多行文本输入、...
在介绍如何用JavaScript实现点击事件添加一个input节点之前，我们首先需要了解几个基础的Web编程概念和知识点。首先，JavaScript是一种动态的脚本语言，它可以通过文档对象模型（DOM）与HTML文档的元素进行交互。DOM...
`：最后，将新创建的`<li>`元素添加到`<ol>`元素的末尾，实现了动态添加列表项。 在HTML部分，有一个表单和两个输入元素： ```html ()" action="#"> <span>Grocery Items: <input type="text" id="ItemToAdd" ...
表单内可以包含各种输入元素，如`<input>`、`<textarea>`、`<select>`等。在JavaScript中，我们可以通过`document.getElementById`、`document.querySelector`或`document.querySelectorAll`来选取这些元素。 例如...
注意：这里使用`innerText`而不是`value`，因为`value`属性主要用于`<input>`和`<textarea>`等表单元素，而`innerText`用于设置或获取元素的文本内容。 4. **添加到DOM**：最后，通过调用父元素的`appendChild`方法...
5. 表单元素动态操作：在HTML5中，表单元素如`<input>`, `<select>`, `<textarea>`等，可以动态添加和删除。例如，可以创建一个按钮，点击后向表单中添加新的输入字段，或者根据需求动态移除某个输入项。 6. 动态...
`<form>`标签用于封装表单，而`<input>`、`<button>`等则用于创建具体的输入控件。通过设置不同的`type`属性，我们可以定义不同的输入类型，如文本、数字或提交按钮。 接着是JavaScript (JS) 的应用。JavaScript是...
DOM元素指的是在网页上以结构化形式组织的HTML文档的元素，这些元素可以通过JavaScript被动态地添加或删除，从而实现更加丰富的用户交互体验。 创建元素的基本方法包括使用`document.createElement`，该方法可以...