表单功能概述
用于新用户注册与账号创建的表单，覆盖以下核心流程：
- 账号信息：用户名唯一校验、强密码设置与确认
- 联系方式：邮箱格式校验与验证码发送/输入、手机号 +86 校验
- 合规确认：同意服务条款（必选），订阅资讯（可选）
- 现代简约样式、响应式布局、无障碍可访问性优化，并提供基础前端校验与交互（用户名唯一性与邮箱验证码发送为接口占位示例，需接入后端）
HTML代码
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>新用户注册</title>
<!-- 将下方 CSS 粘贴到 form.css 并在此处引入；或直接在页面内联 -->
<link rel="stylesheet" href="form.css" />
</head>
<body>
<main class="container">
<form class="form-card" id="register-form" method="post" action="/register">
<h1 class="form-title">创建新账号</h1>
<p class="form-subtitle">完成邮箱/手机验证并同意条款后即可注册</p>
<!-- 账号信息 -->
<fieldset class="section">
<legend class="section-title">账号信息</legend>
<!-- 用户名 -->
<div class="field">
<label for="username">用户名</label>
<input
type="text"
id="username"
name="username"
inputmode="latin"
autocomplete="username"
required
minlength="3"
maxlength="16"
pattern="^[A-Za-z0-9]{3,16}$"
title="3-16位，仅限字母与数字"
aria-describedby="username-hint username-status"
/>
<div class="hint" id="username-hint">3-16位字母或数字；将自动检查是否已被占用。</div>
<div class="status" id="username-status" aria-live="polite"></div>
</div>
<!-- 密码 -->
<div class="field">
<label for="password">密码</label>
<input
type="password"
id="password"
name="password"
autocomplete="new-password"
required
minlength="8"
pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)[A-Za-z\\d#?!@$%^&*\\-]{8,}"
title="至少8位，需包含大写字母、小写字母和数字；可用符号 #?!@$%^&*-"
aria-describedby="password-hint"
/>
<div class="hint" id="password-hint">至少8位，含大写/小写/数字，支持常见符号。</div>
</div>
<!-- 确认密码 -->
<div class="field">
<label for="confirm-password">确认密码</label>
<input
type="password"
id="confirm-password"
name="confirm_password"
autocomplete="new-password"
required
aria-describedby="confirm-hint confirm-error"
/>
<div class="hint" id="confirm-hint">需与上方密码一致。</div>
<div class="error-text" id="confirm-error" aria-live="polite"></div>
</div>
</fieldset>
<!-- 联系方式 -->
<fieldset class="section">
<legend class="section-title">联系方式</legend>
<!-- 邮箱 + 发送验证码 -->
<div class="field">
<label for="email">邮箱</label>
<div class="cluster">
<input
type="email"
id="email"
name="email"
autocomplete="email"
required
inputmode="email"
aria-describedby="email-hint email-status"
placeholder="name@example.com"
/>
<button class="btn btn-secondary" type="button" id="send-email-code" aria-controls="email-code" disabled>
发送验证码
</button>
</div>
<div class="hint" id="email-hint">输入有效邮箱以接收6位验证码。</div>
<div class="status" id="email-status" aria-live="polite"></div>
</div>
<!-- 邮箱验证码 -->
<div class="field">
<label for="email-code">邮箱验证码</label>
<input
type="text"
id="email-code"
name="email_code"
inputmode="numeric"
autocomplete="one-time-code"
placeholder="6位数字"
required
minlength="6"
maxlength="6"
pattern="^\\d{6}$"
title="请输入6位数字验证码"
aria-describedby="email-code-hint"
/>
<div class="hint" id="email-code-hint">未收到？请检查垃圾邮件或稍后重试。</div>
</div>
<!-- 手机号（+86 校验） -->
<div class="field">
<label for="phone">手机号</label>
<input
type="tel"
id="phone"
name="phone"
inputmode="tel"
autocomplete="tel"
required
placeholder="+86 1XXXXXXXXXX"
pattern="^\\+86\\s?1[3-9]\\d{9}$"
title="必须以 +86 开头，后接 11 位中国大陆手机号"
aria-describedby="phone-hint phone-status"
/>
<div class="hint" id="phone-hint">格式示例：+86 13800001234</div>
<div class="status" id="phone-status" aria-live="polite"></div>
</div>
</fieldset>
<!-- 地区与条款 -->
<fieldset class="section">
<legend class="section-title">地区与条款</legend>
<!-- 国家/地区 -->
<div class="field">
<label for="country">国家/地区</label>
<select id="country" name="country" required aria-describedby="country-hint">
<option value="" disabled selected>请选择</option>
<option value="CN">中国</option>
<option value="US">美国</option>
<option value="OTHER">其他</option>
</select>
<div class="hint" id="country-hint">用于账号区域与合规设置。</div>
</div>
<!-- 同意服务条款（必选） -->
<div class="field checkbox-field">
<input type="checkbox" id="terms" name="terms" required />
<label for="terms">我已阅读并同意
<a href="/terms" target="_blank" rel="noopener noreferrer">服务条款</a>
</label>
</div>
<!-- 订阅资讯（可选） -->
<div class="field checkbox-field">
<input type="checkbox" id="subscribe" name="subscribe" />
<label for="subscribe">订阅产品更新与资讯（可选）</label>
</div>
</fieldset>
<!-- 提交 -->
<div class="actions">
<button class="btn" id="submit-btn" type="submit">创建账号</button>
</div>
<!-- 表单级消息输出 -->
<div class="form-message" id="form-message" aria-live="polite" role="status"></div>
</form>
</main>
<script>
// 可访问性辅助：工具函数
const qs = (sel, ctx = document) => ctx.querySelector(sel);
const setStatus = (el, message, type = "info") => {
if (!el) return;
el.textContent = message || "";
el.classList.remove("ok", "warn", "err");
if (type === "ok") el.classList.add("ok");
if (type === "warn") el.classList.add("warn");
if (type === "err") el.classList.add("err");
};
document.addEventListener("DOMContentLoaded", () => {
const form = qs("#register-form");
const username = qs("#username");
const usernameStatus = qs("#username-status");
const email = qs("#email");
const sendCodeBtn = qs("#send-email-code");
const emailStatus = qs("#email-status");
const emailCode = qs("#email-code");
const password = qs("#password");
const confirmPassword = qs("#confirm-password");
const confirmError = qs("#confirm-error");
const phone = qs("#phone");
const formMessage = qs("#form-message");
// 启用/禁用“发送验证码”按钮
const toggleSendBtn = () => {
sendCodeBtn.disabled = !email.validity.valid;
};
email.addEventListener("input", toggleSendBtn);
toggleSendBtn();
// 用户名唯一性检查（占位接口：请在使用说明中替换为真实接口）
let userCheckTimer = null;
username.addEventListener("input", () => {
setStatus(usernameStatus, "");
username.setCustomValidity("");
if (!username.validity.valid) return;
if (userCheckTimer) clearTimeout(userCheckTimer);
userCheckTimer = setTimeout(async () => {
try {
setStatus(usernameStatus, "正在检查可用性…", "warn");
const res = await fetch(`/api/check-username?u=${encodeURIComponent(username.value)}`, {
headers: { "Accept": "application/json" }
});
if (!res.ok) throw new Error("network");
const data = await res.json(); // 期望 { available: boolean }
if (data && data.available) {
setStatus(usernameStatus, "用户名可用", "ok");
username.setCustomValidity("");
} else {
setStatus(usernameStatus, "该用户名已被占用", "err");
username.setCustomValidity("用户名已被占用");
}
} catch (e) {
setStatus(usernameStatus, "暂时无法验证，请稍后重试", "warn");
// 不阻断提交，仅提示
username.setCustomValidity("");
}
}, 400);
});
// 发送邮箱验证码（占位接口）
let cooldown = 0;
let cooldownTimer = null;
const startCooldown = (sec = 60) => {
cooldown = sec;
sendCodeBtn.disabled = true;
sendCodeBtn.textContent = `已发送 (${cooldown}s)`;
cooldownTimer = setInterval(() => {
cooldown--;
if (cooldown <= 0) {
clearInterval(cooldownTimer);
sendCodeBtn.textContent = "重新发送";
toggleSendBtn();
} else {
sendCodeBtn.textContent = `已发送 (${cooldown}s)`;
}
}, 1000);
};
sendCodeBtn.addEventListener("click", async () => {
if (!email.validity.valid) return;
setStatus(emailStatus, "");
try {
sendCodeBtn.disabled = true;
sendCodeBtn.textContent = "发送中…";
const res = await fetch("/api/send-email-code", {
method: "POST",
headers: { "Content-Type": "application/json", "Accept": "application/json" },
body: JSON.stringify({ email: email.value })
});
if (!res.ok) throw new Error("network");
const data = await res.json(); // 期望 { ok: boolean }
if (data && data.ok) {
setStatus(emailStatus, "验证码已发送，请查收邮箱", "ok");
startCooldown(60);
emailCode.focus();
} else {
setStatus(emailStatus, "发送失败，请稍后重试", "err");
sendCodeBtn.textContent = "发送验证码";
toggleSendBtn();
}
} catch (e) {
setStatus(emailStatus, "网络异常，稍后再试", "err");
sendCodeBtn.textContent = "发送验证码";
toggleSendBtn();
}
});
// 确认密码一致性校验
const checkPasswords = () => {
if (confirmPassword.value && password.value !== confirmPassword.value) {
confirmPassword.setCustomValidity("两次输入的密码不一致");
confirmError.textContent = "两次输入的密码不一致";
} else {
confirmPassword.setCustomValidity("");
confirmError.textContent = "";
}
};
password.addEventListener("input", checkPasswords);
confirmPassword.addEventListener("input", checkPasswords);
// 手机号：如果用户只填了 11 位中国号，自动补齐 +86（不影响手动输入）
phone.addEventListener("blur", () => {
const raw = phone.value.trim();
if (/^1[3-9]\d{9}$/.test(raw)) {
phone.value = "+86 " + raw;
}
});
// 提交前汇总提示（浏览器本地校验基础上增强）
form.addEventListener("submit", (e) => {
setStatus(formMessage, "");
checkPasswords();
if (!form.checkValidity()) {
// 让浏览器显示原生校验气泡
return;
}
// 可根据需要在此增加更多前置校验或埋点
});
});
</script>
</body>
</html>
CSS样式
:root{
--bg: #ffffff;
--text: #0f172a;
--muted: #6b7280;
--primary: #2563eb;
--primary-600: #1d4ed8;
--border: #e5e7eb;
--ring: #93c5fd;
--error: #dc2626;
--ok: #16a34a;
--warn: #d97706;
--card: #ffffff;
--shadow: 0 6px 24px rgba(15, 23, 42, 0.08);
}
@media (prefers-color-scheme: dark){
:root{
--bg:#0b1020;
--text:#e5e7eb;
--muted:#9ca3af;
--primary:#60a5fa;
--primary-600:#3b82f6;
--border:#1f2937;
--ring:#2563eb66;
--error:#f87171;
--ok:#34d399;
--warn:#fbbf24;
--card:#0f172a;
--shadow: 0 8px 28px rgba(0,0,0,0.35);
}
}
* { box-sizing: border-box; }
html,body { height: 100%; }
body{
margin:0;
background:var(--bg);
color:var(--text);
font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
.container{
min-height:100%;
display:grid;
place-items:center;
padding: 32px 16px;
}
.form-card{
width:100%;
max-width: 560px;
background:var(--card);
border:1px solid var(--border);
border-radius:14px;
box-shadow: var(--shadow);
padding: 20px;
}
.form-title{
margin: 6px 0 4px;
font-size: 22px;
font-weight: 700;
}
.form-subtitle{
margin: 0 0 12px;
color: var(--muted);
font-size: 14px;
}
.section{
margin: 10px 0 6px;
padding: 10px 0 0;
border: 0;
}
.section-title{
font-size: 14px;
color: var(--muted);
margin-bottom: 8px;
}
.field{
display: grid;
gap: 6px;
margin-bottom: 14px;
}
.checkbox-field{
grid-template-columns: 20px 1fr;
align-items: start;
}
.checkbox-field > input{
margin-top: 2px;
}
label{
font-weight: 600;
}
input, select, button{
font: inherit;
}
input, select{
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 10px;
background: transparent;
color: var(--text);
outline: none;
transition: border-color .2s, box-shadow .2s, background-color .2s;
}
input::placeholder { color: color-mix(in oklab, var(--muted) 80%, transparent); }
input:focus-visible,
select:focus-visible{
border-color: var(--primary);
box-shadow: 0 0 0 4px var(--ring);
}
input:invalid[required]{
border-color: color-mix(in oklab, var(--error) 60%, var(--border));
}
.hint{
color: var(--muted);
font-size: 12px;
}
.error-text{
color: var(--error);
font-size: 13px;
}
.status{
font-size: 13px;
min-height: 1em;
}
.status.ok{ color: var(--ok); }
.status.warn{ color: var(--warn); }
.status.err{ color: var(--error); }
.cluster{
display: grid;
gap: 8px;
}
@media (min-width: 520px){
.cluster{
grid-template-columns: 1fr auto;
align-items: center;
}
}
.actions{
margin-top: 10px;
}
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap: 8px;
padding: 10px 16px;
border-radius: 10px;
border: 1px solid transparent;
background: var(--primary);
color: white;
cursor: pointer;
font-weight: 600;
transition: transform .04s ease, background .2s, opacity .2s;
}
.btn:hover{ background: var(--primary-600); }
.btn:active{ transform: translateY(1px); }
.btn[disabled]{
opacity: .6;
cursor: not-allowed;
}
.btn.btn-secondary{
color: var(--primary-600);
background: transparent;
border-color: color-mix(in oklab, var(--primary) 40%, var(--border));
}
.btn.btn-secondary:hover{
background: color-mix(in oklab, var(--primary) 10%, transparent);
}
.form-message{
margin-top: 10px;
min-height: 1em;
font-size: 14px;
color: var(--muted);
}
a{ color: var(--primary-600); text-decoration: none; }
a:hover{ text-decoration: underline; }
使用说明
- 文件组织
- 将“CSS样式”部分保存为 form.css，并确保 HTML 中已通过 引入
- 可将 HTML 直接作为注册页面。若需内联样式，可将 CSS 放入
适用用户
前端开发工程师
用一键生成的表单作为基础，快速完善交互与校验，节省布局与响应式适配时间。
网站运营/营销经理
快速搭建活动报名与线索收集表单，提升提交率，缩短从创意到上线的周期。
产品经理
用模板化表单快速验证字段与流程，低成本迭代原型并与团队对齐需求。
特征总结
•
一键生成注册、联系、数据提交表单，含配套样式与结构，快速投入页面使用。
•
自动理解需求并匹配字段与布局，减少反复沟通，几分钟内拿到可直接改的代码。
•
响应式设计开箱即用，手机与桌面均舒适操作，降低跳失，提高提交完成率。
•
内置人性化校验与错误提示，避免无效提交，提升表单质量与转化效率。
•
支持多字段类型、分组与多列排版，复杂表单也能清晰呈现，填写更顺畅。
•
样式可按品牌偏好快速换肤，颜色、间距、按钮风格一键调整，统一形象。
•
遵循标准与可访问性要求，兼容主流浏览器与读屏场景，覆盖更多用户。
•
生成代码原创规范，避免安全隐患与过时写法，减少后期维护与返工成本。
•
提供部署与定制说明，从接入到上线有迹可循，新人也能稳妥完成交付。
•
可重复调用为不同页面批量产出表单，支持快速迭代与AB测试，缩短上线周期。
如何使用购买的提示词模板
1. 直接在外部 Chat 应用中使用
将模板生成的提示词复制粘贴到您常用的 Chat 应用（如
ChatGPT、Claude 等），即可直接对话使用，无需额外开发。适合个人快速体验和轻量使用场景。
2. 发布为 API 接口调用
把提示词模板转化为
API，您的程序可任意修改模板参数，通过接口直接调用，轻松实现自动化与批量处理。适合开发者集成与业务系统嵌入。
3. 在 MCP Client 中配置使用
在 MCP client 中配置对应的 server 地址，让您的 AI
应用自动调用提示词模板。适合高级用户和团队协作，让提示词在不同 AI 工具间无缝衔接。
