javascript实现的动态添加表单元素input,button等(appendChild)

最新推荐文章于 2022-11-16 15:23:51 发布
最新推荐文章于 2022-11-16 15:23:51 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： javascript 文章标签： button input javascript newline action function
 

<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>

本文来自: 脚本之家(www.jb51.net) 详细出处参考：http://www.jb51.net/article/12856.htm

yanleigis
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现向OL列表内动态添加LI元素的方法
12-12
`：最后，将新创建的`<li>`元素添加到`<ol>`元素的末尾，实现了动态添加列表项。 在HTML部分，有一个表单和两个输入元素： ```html ()" action="#"> <span>Grocery Items: <input type="text" id="ItemToAdd" ...
前端讲义33_javascript创建表单元素
木生火
05-11 158
创建表单元素：文本框text，按钮 button <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <p id="p1">创建表单项:文本,按钮 </p> <script language="javascri...
asp.net MVC中使用自定义HtmlForm控件动态生成表单
weixin_33958585的博客
05-17 188
经测试System.Web.UI.HtmlControls下的HtmlForm类,也就是我们在传统的asp.net中使用的Form表单对象，不适合动态生成Html代码。 于是自定义了一个简单的HtmlForm容器控件，只需要几行代码。看来Asp.net在封装Html元素方面还是很有优势的，微软为我们定义了 大量的基础结构，很容易扩展使用。 public class myHtmlFor...
js中的表单元素
qq_54331236的博客
11-16 1170
js中的表单元素知识
动态添加删除表单元素
05-07
下面我们将深入探讨如何利用JavaScript实现动态添加和删除表单元素的功能。 一、动态添加表单元素 1. 创建新元素：首先，我们需要使用JavaScript创建新的HTML元素。例如，如果要添加一个文本输入框，可以使用`...
JS简单实现动态添加HTML标记的方法示例
10-18
<input type="button" name="btn1" value="动态添加文本框" onclick="addText();" /> ``` 在这个示例中，当用户点击"动态添加文本框"按钮时，`addText()`函数会被调用，从而动态地向表单中添加一个新的文本...
JavaScript新增输入框
Java-攻城狮
09-14 989
 最近开发实现了那种点击增加按钮就会多出一栏的效果，但是当每栏的输入框的数量比较多的时候，后台参数的接受就是个问题，不过现在问题总算解决了，用List集合去接受页面数组的方式，具体实现如下： 　　实现的思路： 　　首先，要把传递的每栏参数变成每个对象，例如：昵称，用户名，密码就是一个user类的属性； @Entity public class User { @Id
用js添加表单的内容，默认表单有内容
yang68668的博客
11-04 517
<style> div { text-align: center; } table { width: 640px; border: 1px solid gray; border-collapse: collapse; margin: 50px auto; } ..
JavaScript 中添加表单的两种简单方法
码农高端会所
05-07 2332
方法一 insertAdjacentHTML   原型：insertAdajcentHTML(swhere,stext) insertAdjacentHTML方法：在指定的地方插入html标签语句 参数： swhere: 指定插入html标签语句的地方，有四种值可用： 1.beforeBegin: 插入到标签开始前 2.afterBegin:插入到标签开始标记之后 3.befor
element ui 新增动态表单
weixin_49986131的博客
01-19 2230
以下代码： <div v-for="(item, index) in addForm.domains" :key="index"> <el-form-item label="联系人" :prop="'domains.' + index + '.contactss'" :rules="{ required: true, message: '联系人不能为空', trigger: 'blur' }" > <el-input.
动态 添加 表单控件
falcon.x
10-12 822
<br /><script language="javascript"> <br /> function AddElement(mytype){     //传入要创建的类型表单<br /><br /><br /> var mytype,TemO=document.getElementById("add"); 获取存放位置的id<br /><br /><br /> var newInput = document.createElement("input");       //创建inpu
element中表单动态添加demo
smallteddy.blog.csdn.net
07-02 1585
一、功能介绍 基于element组件，使用组件主要有el-dialog、el-form和el-date-picker等。 功能函数有新增addDomain、删除removeDomain和提交submitForm。 二、效果展示 1、dialog的显示和关闭 2、新增表单项，提交有数据 3、删除表单项，默认保留一项（第一项无法删除），可重置数据（天数忘记重置了） 三、完整代码 <!DOCTYPE html> <html lang="en"> <head> &lt
页面动态添加表格以及后台解析
cj_0513的博客
08-10 489
1、页面部分 &amp;lt;tr valign=&quot;bottom&quot;&amp;gt; &amp;lt;td colspan=&quot;4&quot;&amp;gt; &amp;lt;table width=&quot;80%&quot; align=&quot;center&q
如何动态添加表单及校验
天天写代码
10-22 592
ui ： 饿了么 需求 ： 点击新增可以添加表单 // 页面代码 <a-card v-for="(item, index) in form1.dynamicItem" :key="index"> <a-row> <a-col :span="12"> <el-form> <el-form-item label
layui form表单 动态添加、删除input框，以及数据回显
wowlw411的博客
07-03 8446
layui form表单 动态添加、删除input框，以及数据回显 ** 在form表单中，动态增加input框，最多添加5个，删除校验 ** html代码 <form class="layui-form" th:action="@{/basicInfo/update/project}" method="post"> <div class="layui-form-item" id="last"> <label class="layui-form-label"&
静态html js文件上传,js实现动态添加上传文件页面
最新发布
05-26
要实现静态 HTML 文件上传，可以使用 HTML5 中的文件上传 API。具体实现步骤如下： 1. 创建一个 HTML 表单，包含一个文件输入框和一个提交按钮。 ```html <form> <input type="file" name="file"> <button type="submit">上传</button> </form> ``` 2. 给表单绑定一个提交事件，阻止默认提交行为，获取文件数据并发送给服务器。 ```html <script> var form = document.querySelector('form'); form.addEventListener('submit', function(event) { event.preventDefault(); var file = form.querySelector('input[type=file]').files[0]; var formData = new FormData(); formData.append('file', file); var xhr = new XMLHttpRequest(); xhr.open('POST', '/upload'); xhr.send(formData); }); </script> ``` 这样就可以实现一个简单的文件上传页面。如果想要动态添加上传文件页面，可以使用 JavaScript 动态创建 HTML 元素。具体实现步骤如下： 1. 创建一个容器元素，用于存放上传表单。 ```html <div id="upload-container"></div> ``` 2. 创建一个按钮元素，用于触发添加上传表单操作。 ```html <button id="add-upload-form">添加上传表单</button> ``` 3. 给按钮绑定一个点击事件，创建一个上传表单并添加到容器中。 ```html <script> var container = document.getElementById('upload-container'); var addButton = document.getElementById('add-upload-form'); addButton.addEventListener('click', function() { var form = document.createElement('form'); var input = document.createElement('input'); var submit = document.createElement('button'); form.appendChild(input); form.appendChild(submit); container.appendChild(form); }); </script> ``` 这样就可以每次点击按钮都动态添加一个上传表单了。当然，还需要给上传表单绑定提交事件，参考上面的步骤即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值