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>
当用户填写表单并点击提交按钮时,表单数据将被获取并打印到浏览器控制台上。这是一个简单的示例,但您可以基于此进行扩展以实现更复杂的动态表单。