html 个人中心(个人信息详情包括用户名、邮箱(可修改)、注册时间,修改密码模块,绑定手机,我的消息)代码
时间: 2024-04-06 17:33:11 浏览: 22
以下是修改后的HTML代码示例,包含了个人中心的基本功能模块,包括个人信息、修改密码、绑定手机和我的消息等。修改后的代码中,用户可以修改邮箱地址。请注意,此代码仅供参考,具体实现方式可能因项目需求而异。
```html
<!DOCTYPE html>
<html>
<head>
<title>个人中心</title>
</head>
<body>
<h1>个人信息</h1>
<p>用户名:XXX</p>
<form>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" value="XXX@XXX.com"><br>
<input type="submit" value="修改邮箱">
</form>
<p>注册时间:2021-01-01</p>
<hr>
<h1>修改密码</h1>
<form>
<label for="old-password">旧密码:</label>
<input type="password" id="old-password" name="old-password"><br>
<label for="new-password">新密码:</label>
<input type="password" id="new-password" name="new-password"><br>
<label for="confirm-password">确认密码:</label>
<input type="password" id="confirm-password" name="confirm-password"><br>
<input type="submit" value="确认修改">
</form>
<hr>
<h1>绑定手机</h1>
<form>
<label for="phone-number">手机号:</label>
<input type="text" id="phone-number" name="phone-number"><br>
<input type="submit" value="确认绑定">
</form>
<hr>
<h1>我的消息</h1>
<ul>
<li>系统升级通知</li>
<li>账号异常提醒</li>
<li>...</li>
</ul>
</body>
</html>
```
在上面的代码中,我们添加了一个表单`<form>`来允许用户修改邮箱地址,使用了`<input type="email">`标签来限制用户输入的是正确的邮箱格式。同时,我们保留了原有的个人信息模块、修改密码模块、绑定手机模块和我的消息模块。
请注意,以上代码仅供参考,实际项目中可能需要根据具体需求进行修改和优化。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
样式优化美化<!DOCTYPE html> {% load static %} <html> <head> <title>个人中心</title> <style> .container { display: flex; flex-wrap: wrap; justify-content: space-between; } .module { width: calc(25% - 20px); margin-bottom: 20px; padding: 20px; border: 1px solid #ccc; border-radius: 5px; } @media (max-width: 768px) { .module { width: calc(50% - 20px); } } @media (max-width: 480px) { .module { width: 100%; } } </style> </head> <body> 个人信息 <form> <label for="username">用户名:</label> <input type="text" id="username"> <label for="email">邮箱:</label> <input type="email" id="email"> <button type="submit">保存</button> </form> 修改密码 <form> <label for="old-password">旧密码:</label> <input type="password" id="old-password"> <label for="new-password">新密码:</label> <input type="password" id="new-password"> <label for="confirm-password">确认密码:</label> <input type="password" id="confirm-password"> <button type="submit">保存</button> </form> 绑定手机 <form> <label for="phone">手机号:</label> <input type="tel" id="phone"> <button type="submit">保存</button> </form> 我的消息 系统消息1 系统消息2 好友消息1 好友消息2 </body> </html>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)