JS制作动态表单，可以通过以下步骤实现：
- HTML布局：在HTML中创建一个表单元素，并设置一个ID属性。
<form id="myForm"> <label for="name">姓名：</label> <input type="text" id="name" name="name"><br><br> <label for="email">邮箱：</label> <input type="email" id="email" name="email"><br><br> <label for="phone">电话：</label> <input type="tel" id="phone" name="phone"><br><br> </form>
- JS代码：使用JavaScript代码获取表单元素，并添加事件监听器。
// 获取表单元素 var form = document.getElementById("myForm"); // 添加事件监听器 form.addEventListener("submit", function(event) { event.preventDefault(); // 防止表单提交刷新页面 // 获取表单数据 var name = document.getElementById("name").value; var email = document.getElementById("email").value; var phone = document.getElementById("phone").value; // 执行一些操作 console.log("姓名：" + name); console.log("邮箱：" + email); console.log("电话：" + phone); });
- 示例：当用户提交表单时，JavaScript代码将获取表单数据并将其打印到控制台上。
完整的HTML和JavaScript代码示例如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>动态表单</title> </head> <body> <form id="myForm"> <label for="name">姓名：</label> <input type="text" id="name" name="name"><br><br> <label for="email">邮箱：</label> <input type="email" id="email" name="email"><br><br> <label for="phone">电话：</label> <input type="tel" id="phone" name="phone"><br><br> <input type="submit" value="提交"> </form> <script> // 获取表单元素 var form = document.getElementById("myForm"); // 添加事件监听器 form.addEventListener("submit", function(event) { event.preventDefault(); // 防止表单提交刷新页面 // 获取表单数据 var name = document.getElementById("name").value; var email = document.getElementById("email").value; var phone = document.getElementById("phone").value; // 执行一些操作 console.log("姓名：" + name); console.log("邮箱：" + email); console.log("电话：" + phone); }); </script> </body> </html>
当用户填写表单并点击提交按钮时，表单数据将被获取并打印到浏览器控制台上。这是一个简单的示例，但您可以基于此进行扩展以实现更复杂的动态表单。
