动态添加、删除每行 form 表单

最新推荐文章于 2025-03-06 09:44:11 发布

ting119

最新推荐文章于 2025-03-06 09:44:11 发布

阅读量7.6k

点赞数

文章标签： html bootstrap form

本文链接：https://blog.csdn.net/ting119/article/details/79844779

版权

本文介绍了一个使用HTML和JavaScript实现的简单表单示例，该表单允许用户输入账号和密码，并通过点击按钮动态添加新的输入字段。同时，还提供了删除已添加字段的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<form role="form-group" style="display: inherit;width: 460px;margin-top: 20px;margin-left: 20px" id="tb">
    帐号: <input type="text"
               placeholder="请输入帐号">
    密码: <input type="password"
               placeholder="请输入密码">
    <img src="add.png" alt="" οnclick="add()" style="width:30px">
</form>
<div class="btn btn-default" style="margin-top: 20px;margin-left: 200px">提交</div>
</body>
</html>

<script>
    
    function add() {
        var form = document.createElement("form-group");
        form.id = new Date().getTime();
        form.innerHTML = "<form role='form-group' style='display: inherit;width: 550px'>" +
                "帐号: " + "<input  placeholder='请输入帐号'/>" +
                " 密码: <input  placeholder='请输入密码'/>" +
                "<img src='del.png'οnclick='del(this)' style='width:30px'></form>";
        document.getElementById("tb").appendChild(form);
    }

    function del(obj) {
        var formID = obj.parentNode.parentNode.id;
        var form = document.getElementById(formID);
        document.getElementById("tb").removeChild(form);
    }
</script>