<form id="register-form" action="/submit" method="post">
<div class="form-group">
<label for="username">用户名：</label>
<!-- required：必填项；minlength/maxlength：长度限制；pattern：字母数字下划线 -->
<input type="text" id="username" name="username"
required minlength="3" maxlength="16"
pattern="[A-Za-z0-9_]+"
placeholder="3-16位字母、数字或下划线"
autocomplete="username">
<small>仅支持字母、数字和下划线</small>
</div>

<div class="form-group">
<label for="email">邮箱：</label>
<!-- type="email"：自带邮箱格式验证；required：必填 -->
<input type="email" id="email" name="email"
required placeholder="example@domain.com"
autocomplete="email">
</div>

<div class="form-group">
<label for="password">密码：</label>
<!-- type="password"：密码隐藏显示；pattern：至少8位，含大小写字母、数字和特殊符号 -->
<input type="password" id="password" name="password"
required pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$"
placeholder="至少8位，含大小写字母、数字和特殊符号">
<small>密码强度要求：8位以上，包含大小写字母、数字和特殊符号（如@$!）</small>
</div>

<div class="form-group">
<label for="birthdate">出生日期：</label>
<!-- type="date"：原生日期选择器 -->
<input type="date" id="birthdate" name="birthdate"
max="2010-12-31" min="1900-01-01">
</div>

<div class="form-group">
<label for="phone">手机号：</label>
<!-- type="tel"：优化移动端数字键盘；pattern：中国大陆手机号正则 -->
<input type="tel" id="phone" name="phone"
pattern="^1[3-9]\d{9}$"
placeholder="11位手机号码"
autocomplete="tel">
</div>

<div class="form-group">
<label for="interests">兴趣爱好（可多选）：</label>
<!-- multiple：允许多选；size：显示选项数量 -->
<select id="interests" name="interests" multiple size="3">
<option value="reading">阅读</option>
<option value="sports">运动</option>
<option value="coding">编程</option>
<option value="travel">旅行</option>
</select>
<small>按住Ctrl键可多选</small>
</div>

<div class="form-group">
<!-- required：复选框必填（需勾选同意条款） -->
<input type="checkbox" id="agree" name="agree" required>
<label for="agree">我已阅读并同意<a href="/terms">服务条款</a></label>
</div>

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