编写一个蛋糕商城注册页面。(可自由发挥,上传主要代码和页面运行结果,在页面上体现出自己的姓名)
时间: 2024-10-01 18:07:19 浏览: 15
编写一个简单的蛋糕商城注册页面通常会涉及到HTML、CSS用于设计界面,以及JavaScript或后端语言如Python、PHP等处理表单提交。这里我会给出一个基本的静态HTML示例,你可以将它嵌入到任何支持HTML的网页环境中。注意这只是一个简化的静态页面,实际应用中需要连接到服务器端进行验证和数据存储。
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>蛋糕商城 - 注册</title>
<style>
body {
font-family: Arial, sans-serif;
}
.register-form {
width: 400px;
margin: auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 5px;
}
input[type="text"], input[type="email"], input[type="password"] {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 15px;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="register-form">
<h2>欢迎注册 - 蛋糕商城</h2>
<form id="registrationForm">
<label for="name">姓名:</label>
<input type="text" id="name" name="username" placeholder="请输入您的姓名"><br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" placeholder="请输入您的邮箱地址"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password" placeholder="设置您的密码"><br>
<button onclick="submitForm()">立即注册</button>
</form>
<p id="message"></p>
</div>
<script>
function submitForm() {
var name = document.getElementById('name').value;
if (!name) {
document.getElementById('message').innerText = "姓名不能为空";
return false;
} else {
document.getElementById('message').innerText = "";
// 这里可以发送请求到服务器,实际项目中需替换为真实的API调用
console.log("正在尝试注册用户:", { username: name });
return true;
}
}
</script>
</body>
</html>
```
在这个例子中,当用户点击"立即注册"按钮时,`submitForm`函数会被触发,检查姓名是否为空,然后模拟一个API调用,实际上你需要将其替换为向服务器的实际POST请求。