用 <form> 搭建周目标表单需确保：<form> 包裹所有输入控件、设 method 和 action（如 "#"）、各输入框 name 唯一（如 week_goal_mon）、单行用 <input type="text">，多行描述用 <textarea>（内容写在标签内）、加 required 与 label 提升可用性，JS 拦截提交时务必调用 event.preventDefault()，提交后应清空或反馈避免重复提交。
怎么用 <form> 搭出可提交的周目标输入表单
直接用 <form> 包住输入控件，method="post" 或 method="get" 都行，但别漏掉 action——哪怕只是暂设为 "#" 也得写上，否则点提交会刷新页面却无反馈，新手常以为“没反应”是代码错了。
常见错误：把 <input type="text"> 写在 <form> 外面，结果点击提交时完全收不到值；或者多个输入框共用同一个 name（比如都叫 goal），后端只能拿到最后一个。
- 每个目标输入框必须有唯一且语义清晰的
name，例如week_goal_mon、week_goal_tue - 加
required属性能触发浏览器原生校验，但别全靠它——用户可以绕过（比如改 DOM 或直接发请求） - 如果后续要连 JS 处理，给
<form>加个id="weekly-goal-form"比用 class 更稳妥
input type="text" 和 textarea 选哪个更合适
单行目标（如“完成 HTML 表单练习”）用 <input type="text">；如果允许描述性内容（如“复习语义化标签，重点搞懂 <article> 和 <section> 区别”），就得换 <textarea>——input 压根不支持换行，硬敲 \n 也没用。
容易踩的坑：textarea 的初始值必须写在起始和结束标签之间，不是用 value 属性：
<textarea name="week_goal_wed">周三：重做表单验证逻辑</textarea>而不是：
<textarea name="week_goal_wed" value="..."></textarea>后者
value 会被忽略。
-
textarea默认无尺寸，加rows="2"和cols="40"或 CSSwidth/height才看得清输入范围 - 移动端下
textarea自动放大可能遮挡按钮，建议加resize: vertical禁止横向拉伸
为什么提交后页面跳转或空白？检查这三处
表单提交后白屏或跳转到奇怪地址，90% 是 action 值不对或 JS 阻止默认行为没写对。
立即学习“前端免费学习笔记（深入）”；
典型现象：action="" 会提交到当前 URL（带 query string），action="index.html" 会跳过去；而 action="#" 会滚回页面顶部，看起来像“刷新”。若用 JS 拦截，必须在事件回调里写 event.preventDefault()，漏掉就还是会提交。
- 调试时先注释掉所有 JS，纯 HTML 提交，看是否至少能收到数据（用浏览器 Network 面板查请求）
- 后端没搭好时，可用
action="https://httpbin.org/post"测试表单能否发出 POST 请求 - 如果用了
target="_blank"，新标签页打开后看不到控制台日志，容易误判 JS 是否执行
兼容性与语义：别为了省事用 div 模拟表单
用一堆 <div> + <span> + 监听 click 来“假装”是表单，短期能跑，但立刻失去键盘提交（Enter 键）、屏幕阅读器识别、自动聚焦等能力。尤其学习目标这类需反复填写的内容，用户大概率会按 Enter 快速提交。
HTML5 表单属性如 autocomplete="off"、spellcheck="false" 对目标类输入很实用——没人想让“flexbox”被浏览器改成“flex box”再红线下划。
- 给每个输入框加
label（用for关联id），不只是为了样式，更是让语音助手知道“这个框填的是周二目标” -
inputmode="text"在移动端可唤起更适合输入文字的键盘，比默认数字键盘合理得多 - 如果目标字段超过 5 个，考虑用
<fieldset>分组，配合<legend>标明“本周学习目标”，结构更清晰
最常被忽略的是：表单提交成功后，没清空输入框或没给视觉反馈。用户填完点提交，页面静默两秒，很容易再点一次——结果后端收到重复数据。加个临时提示或自动重置，成本很低，体验差很多。
