留言表单必须用<form>包裹并设置method和action属性，<textarea>需设name，所有控件须配语义化<label>，required仅作前端提示，服务端必须校验；留言列表应使用<article><time datetime="ISO8601">等语义标签，未登录时服务端不应输出表单HTML。
留言表单必须用 <form> 包裹，否则点击提交没反应
浏览器默认只对 <form> 内的 <input type="submit"> 或 <button type="submit"> 触发表单提交行为。如果只是写个 <div> 套几个输入框，哪怕加了 onclick，也属于“假表单”——用户按回车、屏幕阅读器、无障碍操作全会失效。
实操建议：
- 表单必须有
method和action属性，哪怕暂用action="#"占位，否则部分老浏览器可能静默忽略提交 -
<textarea>一定要设name（如name="message"），后端靠这个键名取值，漏写就收不到留言内容 - 每个
<input>或<textarea>都要配<label for="xxx">，for值必须和对应控件的id完全一致，不然点击标签无法聚焦输入框
required 属性不能代替服务端校验
加 required 确实能让空提交弹出浏览器提示，但这是纯前端约束，用户禁用 JS、用 curl 发请求、或直接改 DOM 都能绕过。线上环境只要没服务端校验，就等于没校验。
常见错误现象：本地测试一切正常，上线后数据库存了一堆空字符串或 null。
立即学习“前端免费学习笔记（深入）”；
实操建议：
-
required只用于提升用户体验，配合<input type="email">或pattern做基础格式提示 - 服务端必须重新检查
$_POST['name']（PHP）、request.form.get('name')（Python Flask）等是否非空且符合长度/格式 - 不要依赖
maxlength限制字符数——它可被轻易绕过，服务端仍需截断或拒绝超长内容
留言列表用语义化 <article> + <time> 而不是一堆 <div>
留言是独立、可引用的内容单元，<div> 没有语义，对 SEO、屏幕阅读器、未来 CSS 选择器扩展都不友好。用错标签会导致结构松散、维护成本上升。
使用场景：需要支持按时间倒序排列、单独分享某条留言、或后期接入 RSS 推送。
实操建议：
- 每条留言用
<article>包裹，作者名用<header>或<h3>，时间必须用<time datetime="2024-06-15T14:22">2024-06-15</time>，datetime值要 ISO 8601 格式，不能写“刚刚”或“昨天” - 避免在
<article>外套<div class="list">，直接用<main>或<section>作为留言容器更合理 - 如果留言含用户头像，用
<figure><img><figcaption>组合，比<div><img><span>更易被辅助技术识别
CSS 不要用 display: none 隐藏未登录用户的留言框
单纯用 display: none 隐藏表单，HTML 结构里它依然存在。搜索引擎可能索引到“请登录后留言”这类文字，更严重的是，无障碍工具（如读屏软件）仍会把隐藏表单读出来，造成信息干扰。
性能影响：无实际性能问题，但逻辑混乱——该由服务端控制的权限状态，被推给前端掩盖。
实操建议：
- 未登录时，服务端直接不输出
<form>HTML 片段，连 DOM 都不存在，最干净 - 若必须前端控制（如 SPA 场景），用
aria-hidden="true"+tabindex="-1"配合display: none，确保键盘和读屏都跳过 - 永远别在
<form>上加disabled——表单元素不支持该属性，无效
重构留言版最常被忽略的点：时间戳的 datetime 值是否真实可解析。很多人手写“2024年6月”或留空，导致 <time> 标签失去机器可读性，后续做时间筛选、iCal 导出、或语义搜索时直接卡死。
