1、利用DreamWeaver设计一个表单,至少要有登录用户,密码输入,提交按钮; 2、提交后,在后续页面中显示登录用户名,登录密码,并通过Javascript的alert函数,显示一个登录信息。
时间: 2024-04-10 22:32:46 浏览: 30
好的,我可以帮你设计一个包含登录表单的页面,并在登录后显示登录用户名和密码的信息。以下是一个基本的示例代码,使用DreamWeaver来设计页面,以及JavaScript来显示登录信息。
首先,我们创建一个HTML文件,使用DreamWeaver来设计表单页面:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Login Form</h2>
<form id="loginForm">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" class="form-control" id="username">
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" class="form-control" id="password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="script.js"></script> <!-- 这里引入了一个名为script.js的JavaScript文件,用于处理表单提交事件 -->
</body>
</html>
```
接下来,我们创建一个名为script.js的JavaScript文件来处理表单提交事件并显示登录信息:
```javascript
$(document).ready(function() {
$('#loginForm').submit(function(event) {
event.preventDefault(); // 阻止表单默认提交行为
var username = $('#username').val();
var password = $('#password').val();
alert('Username: ' + username + '\nPassword: ' + password);
});
});
```
这段JavaScript代码使用jQuery库来简化DOM操作,监听表单的提交事件。当表单提交时,它获取用户名和密码的值,并使用JavaScript的alert函数来显示登录信息。
请将上述HTML和JavaScript代码保存到相应的文件中,并确保引入了所需的Bootstrap和jQuery库。然后在浏览器中打开HTML文件,你应该能看到一个登录表单。当你填写用户名和密码并提交表单时,将会弹出一个对话框显示登录信息。
希望这个示例能满足你的需求。如果你还有其他问题,请随时提问。