设计一HTML5页面,包括以下子组件:注册、登录、欢迎,三个模块。主页面中通过类似选项卡的功能分别访问三个子模块。注册子模块提供用户名、密码、电话、邮箱四个注册表单。登录子模块提供用户名、密码表单,但不需要完成数据库访问及验证逻辑。欢迎子模块显示文字:欢迎***(***为注册的用户名)
时间: 2024-02-21 15:56:40 浏览: 11
以下是一个简单的HTML5页面,包含注册、登录、欢迎三个子模块,通过选项卡的方式进行切换。其中注册子模块提供用户名、密码、电话、邮箱四个表单项,登录子模块提供用户名、密码表单项,欢迎子模块显示欢迎信息。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5页面示例</title>
<style>
/* 样式定义 */
.tab {
display: none;
}
.tab.active {
display: block;
}
</style>
</head>
<body>
<h1>HTML5页面示例</h1>
<ul>
<li><a href="#" onclick="openTab(event, 'register')">注册</a></li>
<li><a href="#" onclick="openTab(event, 'login')">登录</a></li>
<li><a href="#" onclick="openTab(event, 'welcome')">欢迎</a></li>
</ul>
<div id="register" class="tab active">
<form>
<label>用户名:</label>
<input type="text" name="username"><br>
<label>密码:</label>
<input type="password" name="password"><br>
<label>电话:</label>
<input type="text" name="phone"><br>
<label>邮箱:</label>
<input type="text" name="email"><br>
<input type="submit" value="注册">
</form>
</div>
<div id="login" class="tab">
<form>
<label>用户名:</label>
<input type="text" name="username"><br>
<label>密码:</label>
<input type="password" name="password"><br>
<input type="submit" value="登录">
</form>
</div>
<div id="welcome" class="tab">
<p>欢迎注册用户:***</p>
</div>
<script>
// JavaScript代码,用于切换选项卡
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tab");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].className = tabcontent[i].className.replace(" active", "");
}
tablinks = document.getElementsByTagName("a");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).className += " active";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
```
注意,此示例仅包含客户端HTML代码,没有实现实际的数据库访问和验证逻辑。