html,给我一个密码重置页面,有原密码,新密码,再次输入新密码等文本和文本框,请给出详细代码
时间: 2024-09-27 18:07:20 浏览: 21
HTML是一个标记语言,用于创建网页结构。下面是一个简单的密码重置页面的示例,包括了原密码、新密码和确认新密码的输入框。请注意,这个例子仅作为静态HTML,实际应用中还需要结合后端服务器验证。
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>密码重置</title>
<style>
.form-container {
width: 400px;
margin: auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="form-container">
<h2>密码重置</h2>
<form id="reset-password-form" action="/password-reset" method="POST">
<label for="old-password">原密码:</label><br>
<input type="password" id="old-password" name="old_password" required><br>
<label for="new-password">新密码:</label><br>
<input type="password" id="new-password" name="new_password" pattern=".{6,}" required><br>
<label for="confirm-password">再次输入新密码:</label><br>
<input type="password" id="confirm-password" name="confirm_password" required><br>
<button type="submit">重置密码</button>
</form>
<!-- 可能需要的错误消息显示区域 -->
<p id="error-message" style="color: red; display: none;">密码不匹配或格式错误,请检查后再试。</p>
</div>
</body>
</html>
```
阅读全文