HTML 注册表单是一个用户界面组件，它包含用于捕获姓名、电子邮件、密码等个人信息的输入字段，并通常使用 CSS 进行样式设计，以确保美观和验证功能的有效性。
实现思路
- 表单结构：HTML 表单包含用户名、电子邮件、密码和确认密码字段，以及一个用于发送数据的提交按钮。
- 样式设计：应用 CSS 样式使表单在视觉上更具吸引力，包括带有内边距、圆角和阴影效果的居中容器。同时对输入字段和按钮进行了美化，以优化用户交互体验。
- 密码验证：使用 JavaScript 根据特定标准验证密码：至少包含 8 个字符、一个大写字母、一个小写字母、一个数字和一个特殊字符。
- 密码强度指示器：当用户输入密码时，强度指示器会动态显示密码是弱、中等还是强，帮助用户创建安全的密码。
- 错误处理与消息提示：如果密码不符合标准，或者密码与确认密码不匹配，将显示错误消息。注册成功后，会显示成功消息。
示例： 此示例展示了上述思路的具体实现代码。
HTML
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
h2 {
margin-bottom: 20px;
text-align: center;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
}
input {
width: 100%;
padding: 8px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
background-color: #5cb85c;
border: none;
color: white;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #4cae4c;
}
#message {
margin-top: 20px;
text-align: center;
}
.error {
color: red;
font-size: 0.9em;
}
.password-hint {
font-size: 0.9em;
color: #666;
margin-top: 5px;
display: none;
}
.password-strength {
margin-top: 5px;
}
.password-strength div {
height: 5px;
border-radius: 4px;
}
.weak {
width: 33%;
background-color: red;
}
.medium {
width: 66%;
background-color: orange;
}
.strong {
width: 100%;
background-color: green;
}
Signup Form
Password must be at least 8 characters long, and include at
least one uppercase letter, one lowercase letter, one
number, and one special character.
<input type="password" id="confirmPassword"
name="confirmPassword" required>