# AI HTML活动报名练习包 · v0.2
## 目标和材料
产品设计工作坊；11月6日14:00—16:00；线上会议；计划名额30；姓名、手机号、协议。
练习数据小林、13800000000；仅当前浏览器状态，不发送数据、不保存信息、不统计真实名额。
## 完整单文件代码
复制以下代码，保存为UTF-8编码index.html，在浏览器打开。
```html
<!doctype html>
<html lang="zh-CN"><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>产品设计工作坊报名练习</title>
<style>body{font:16px/1.6 system-ui;margin:0;background:#f6f7fb;color:#202432}main{max-width:640px;margin:32px auto;padding:24px;box-sizing:border-box;background:#fff}label{display:block;margin:16px 0 4px}input:not([type=checkbox]),button{font:inherit;padding:12px;box-sizing:border-box;width:100%}button{margin-top:20px;background:#635bff;color:white;border:0;border-radius:8px}button:focus-visible,input:focus-visible{outline:3px solid #1468c5;outline-offset:3px}button:disabled{opacity:.65}h1{font-size:28px;line-height:1.4}#status{min-height:1.6em}@media(max-width:680px){main{margin:0;padding:20px}}</style>
<main><h1>产品设计工作坊</h1><p>11月6日 14:00—16:00 · 线上会议 · 计划名额30人</p><p>本地报名练习，不发送或保存个人信息。</p>
<form id="signup"><label for="name">姓名</label><input id="name" name="name" required maxlength="30" autocomplete="name">
<label for="phone">手机号（11位数字）</label><input id="phone" name="phone" type="tel" inputmode="numeric" pattern="[0-9]{11}" required aria-describedby="phone-help"><small id="phone-help">练习可填13800000000，不进行号码真实性验证。</small>
<label><input type="checkbox" required>我已阅读本次练习说明</label><button id="submit">提交演示报名</button></form><p id="status" role="status"></p></main>
<script>const form=document.querySelector('#signup'),button=document.querySelector('#submit'),status=document.querySelector('#status');let busy=false;
form.addEventListener('submit',e=>{e.preventDefault();if(busy||!form.reportValidity())return;busy=true;button.disabled=true;status.textContent='正在处理演示报名…';setTimeout(()=>{status.textContent='演示报名已完成。没有发送或保存数据；刷新后重置。';button.textContent='演示已完成';},600)});</script></html>
```
## 接入主图时的目录
index.html / style.css / app.js / assets/workshop.jpg / README.md。
真实文件assets/workshop.jpg，对应引用./assets/workshop.jpg；注意大小写，不误用站点根目录路径。
## 局部修正提示词
只修复活动主图引用，真实路径assets/workshop.jpg；保留表单文案样式脚本；列出修改文件与前后引用，不新增外链。
## 交付单
入口index.html，版本v0.2。演示姓名必填、11位数字输入与协议确认、处理中和成功状态。
没有真实报名接口、短信、名额锁定、通知或账号身份。真实业务须接入服务端验证与持久化。
## 回归
空姓名、手机号格式、未同意、正常提交、重复点击、刷新、320/390/1440宽度、键盘焦点。
## 版本记录
v0.1：收到初稿。v0.2：约定相对路径、补表单条件、完成示例。
## 待填写
实际文件版本、预览地址、问题截图、真实接口负责人、上线环境与回滚地址。
