设计一HTML5页面,包括以下子组件:注册、登录、欢迎,三个模块。 功能要求: Erao 1、主页面中通过类似选项卡的功能分别访问三个子模块。 2、注册子模块提供用户名、密码、电话、邮箱四个注册表单。 3、登录子模块提供用户名、密码表单,但不需要完成数据库访问及验证逻辑。 4、欢迎子模块显示文字:欢迎*** (***为登录的用户名)
时间: 2023-12-24 13:04:57 浏览: 26
好的,我会为您设计一个符合要求的 HTML5 页面,以下是代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册、登录、欢迎页面</title>
<style>
#tabs {
margin: 0;
padding: 0;
list-style: none;
}
#tabs li {
display: inline-block;
margin-right: 10px;
padding: 5px 10px;
border: 1px solid #ccc;
cursor: pointer;
}
#tabs li.active {
background-color: #ccc;
}
.module {
display: none;
padding: 20px;
border: 1px solid #ccc;
}
.module.active {
display: block;
}
form {
margin-bottom: 10px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type=text], input[type=password], input[type=tel], input[type=email] {
width: 100%;
padding: 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 3px;
cursor: pointer;
}
</style>
</head>
<body>
<ul id="tabs">
<li class="active" data-target="register">注册</li>
<li data-target="login">登录</li>
<li data-target="welcome">欢迎</li>
</ul>
<div id="modules">
<div class="module active" id="register">
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
<label for="password">密码:</label>
<input type="password" id="password" name="password">
<label for="tel">电话:</label>
<input type="tel" id="tel" name="tel">
<label for="email">邮箱:</label>
<input type="email" id="email" name="email">
<input type="submit" value="注册">
</form>
</div>
<div class="module" id="login">
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
<label for="password">密码:</label>
<input type="password" id="password" name="password">
<input type="submit" value="登录">
</form>
</div>
<div class="module" id="welcome">
<p>欢迎 <span id="welcome-username"></span></p>
</div>
</div>
<script>
var tabs = document.querySelectorAll('#tabs li');
var modules = document.querySelectorAll('.module');
for (var i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', function() {
var target = this.getAttribute('data-target');
for (var j = 0; j < tabs.length; j++) {
tabs[j].classList.remove('active');
}
this.classList.add('active');
for (var k = 0; k < modules.length; k++) {
modules[k].classList.remove('active');
if (modules[k].getAttribute('id') === target) {
modules[k].classList.add('active');
}
}
});
}
var registerForm = document.querySelector('#register form');
var welcomeUsername = document.querySelector('#welcome-username');
registerForm.addEventListener('submit', function(e) {
e.preventDefault();
var username = document.querySelector('#register #username').value;
welcomeUsername.innerHTML = username;
tabs[0].classList.remove('active');
tabs[2].classList.add('active');
modules[0].classList.remove('active');
modules[2].classList.add('active');
});
</script>
</body>
</html>
```
这个页面包含了三个模块,分别为注册、登录和欢迎。在主页面中,使用选项卡的方式来访问这些子模块。每个子模块都有对应的表单,其中注册表单包含了用户名、密码、电话和邮箱四个字段,登录表单只包含了用户名和密码两个字段。欢迎模块只显示欢迎信息,其中用户名动态地显示登录时的用户名。
实现逻辑方面,使用了一些 JavaScript 代码来处理选项卡和表单提交的事件。具体实现可以参考代码中的注释。
相关推荐
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)