• js制作动态表单

    JS制作动态表单，可以通过以下步骤实现：

    1. HTML布局：在HTML中创建一个表单元素，并设置一个ID属性。
    1. <form id="myForm">
    2.     <label for="name">姓名：</label>
    3.     <input type="text" id="name" name="name"><br><br>
    4.     <label for="email">邮箱：</label>
    5.     <input type="email" id="email" name="email"><br><br>
    6.     <label for="phone">电话：</label>
    7.     <input type="tel" id="phone" name="phone"><br><br>
    8. </form>

    1. JS代码：使用JavaScript代码获取表单元素，并添加事件监听器。
    1. // 获取表单元素
    2. var form = document.getElementById("myForm");
    3.  
    4. // 添加事件监听器
    5. form.addEventListener("submit", function(event) {
    6.     event.preventDefault(); // 防止表单提交刷新页面
    7.  
    8.     // 获取表单数据
    9.     var name = document.getElementById("name").value;
    10.     var email = document.getElementById("email").value;
    11.     var phone = document.getElementById("phone").value;
    12.  
    13.     // 执行一些操作
    14.     console.log("姓名：" + name);
    15.     console.log("邮箱：" + email);
    16.     console.log("电话：" + phone);
    17. });

    1. 示例：当用户提交表单时，JavaScript代码将获取表单数据并将其打印到控制台上。

    完整的HTML和JavaScript代码示例如下：

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>动态表单</title>
    6. </head>
    7. <body>
    8.  
    9.     <form id="myForm">
    10.         <label for="name">姓名：</label>
    11.         <input type="text" id="name" name="name"><br><br>
    12.         <label for="email">邮箱：</label>
    13.         <input type="email" id="email" name="email"><br><br>
    14.         <label for="phone">电话：</label>
    15.         <input type="tel" id="phone" name="phone"><br><br>
    16.         <input type="submit" value="提交">
    17.     </form>
    18.  
    19.     <script>
    20.         // 获取表单元素
    21.         var form = document.getElementById("myForm");
    22.  
    23.         // 添加事件监听器
    24.         form.addEventListener("submit", function(event) {
    25.             event.preventDefault(); // 防止表单提交刷新页面
    26.  
    27.             // 获取表单数据
    28.             var name = document.getElementById("name").value;
    29.             var email = document.getElementById("email").value;
    30.             var phone = document.getElementById("phone").value;
    31.  
    32.             // 执行一些操作
    33.             console.log("姓名：" + name);
    34.             console.log("邮箱：" + email);
    35.             console.log("电话：" + phone);
    36.         });
    37.     </script>
    38.  
    39. </body>
    40. </html>

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

  • 相关阅读:
    kerberos认证相关概念和流程
    selenium 找不到元素：Unable to find element on closed window
    Error: contextBridge API can only be used when contextIsolation is enabled
    【Rust日报】2022-06-25 世界上最大的软件项目的内存安全
    用DIV+CSS技术设计的体育主题网站（足球介绍）
    Go-知识并发控制mutex
    微信小程序之旅
    day41
    子集和数问题
    【发表案例】智能物联网类SCI&EI，仅25天录用，计算机领域必投SCI快刊，12月截稿
  • 原文地址：https://blog.csdn.net/m0_74265396/article/details/134484937