注册表单页面

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>注册表单</title>
    <style>
      body {
        font-family: "Microsoft YaHei", sans-serif;
        max-width: 400px;
        margin: 50px auto;
        padding: 20px;
        background: #f7f7f7;
        border: 1px solid #ddd;
        border-radius: 6px;
      }
      h1 {
        text-align: center;
        color: #333;
        margin-bottom: 20px;
      }
      form {
        display: flex;
        flex-direction: column;
      }
      label {
        margin-bottom: 6px;
        font-weight: bold;
        color: #555;
      }
      input[type="text"],
      input[type="email"],
      input[type="password"] {
        padding: 8px;
        margin-bottom: 15px;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 14px;
      }
      button {
        padding: 10px;
        background-color: #3498db;
        color: white;
        border: none;
        border-radius: 4px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s ease;
      }
      button:hover {
        background-color: #2980b9;
      }
    </style>
  </head>
  <body>
    <h1>用户注册</h1>
    <form action="/submit-registration" method="POST">
      <label for="username">用户名</label>
      <input
        type="text"
        id="username"
        name="username"
        required
        minlength="3"
        maxlength="20"
        placeholder="请输入用户名"
      />

      <label for="email">邮箱</label>
      <input
        type="email"
        id="email"
        name="email"
        required
        placeholder="请输入邮箱地址"
      />

      <label for="password">密码</label>
      <input
        type="password"
        id="password"
        name="password"
        required
        minlength="6"
        placeholder="请输入密码"
      />

      <label for="confirm-password">确认密码</label>
      <input
        type="password"
        id="confirm-password"
        name="confirm-password"
        required
        minlength="6"
        placeholder="请再次输入密码"
      />

      <button type="submit">注册</button>
    </form>
  </body>
</html>