首页IDEA2023创建实现html输入用户、密码，在网页将用户密码合并显示

IDEA2023创建实现html输入用户、密码，在网页将用户密码合并显示

时间: 2024-09-21 20:13:25 浏览: 84

在IntelliJ IDEA 2023中创建一个简单的HTML页面并结合JavaScript用于用户输入用户名和密码，然后在网页上显示合并后的信息，你可以按照以下步骤操作： 1. **新建HTML文件**: - 新建一个HTML文件，例如`index.html`，打开编辑器，添加基本结构： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>用户登录</title> </head> <body> <form id="loginForm"> <label for="username">用户名:</label> <input type="text" id="username" name="username"><br><br> <label for="password">密码:</label> <input type="password" id="password" name="password"><br><br> <button type="submit">提交</button> </form> <div id="result"></div> <script src="main.js"></script> </body> </html> ``` 2. **编写JavaScript (main.js)**: - 创建一个`main.js`文件，添加事件监听和数据合并功能： ```javascript document.getElementById('loginForm').addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单默认提交 const username = document.getElementById('username').value; const password = document.getElementById('password').value; // 这里可以简单地拼接，也可以加密后再显示 const combinedData = '用户名: ' + username + ', 密码: ' + password; document.getElementById('result').innerText = combinedData; }); ``` 3. **运行结果**: - 现在，当用户填写用户名和密码后点击提交按钮，页面底部的`#result`元素会显示出合并的信息。

阅读全文