# 注册表单页面

URL: https://caijiao.org/html/12-projects/03-form
Source: docs/html/12-projects/03-form.md
Description: 注册表单页面示例，包含用户名、邮箱、密码等输入框，并附带简单的表单验证，适合初学者学习表单设计。

下面是一个基础的注册表单页面示例，包含常见的输入字段和提交按钮，并带有简单的 HTML5 表单验证。

## HTML 代码示例

```html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>注册表单</title>
    
  </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>
```
