label 必须显式绑定（for/id匹配）或严格隐式包裹（input完全嵌套于label内），否则点击文字无法聚焦输入框；fieldset+legend构成语义分组，name决定数据提交，type/required/autocomplete需与label协同生效。
label 必须显式绑定或严格隐式包裹
点击文字无法聚焦输入框？90% 是 label 和 input 没真正关联。浏览器不认“看着挨着”，只认 for 与 id 严格匹配，或 input 完全嵌套在 label 内部且无 DOM 中断。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 布局允许时，优先用隐式包裹：
<label>邮箱<input type="email" name="email"></label>——简洁、无匹配风险 - 布局分离（如 label 在左、input 在右）时，必须用显式绑定：
<label for="email">邮箱</label><input id="email" name="email">，检查大小写、空格、是否重复 - 避免混用：既写
for="email"又把input塞进label里，部分浏览器会触发两次 focus - 动态渲染（React/Vue）中，确保
id在 DOM 插入后存在，用useId()或稳定:key防冲突
form + fieldset + legend 构成语义分组骨架
一堆 input 堆在一起，屏幕阅读器读出来就是“输入框、输入框、下拉框……”，用户根本不知道哪几个是一组。没有 fieldset 和 legend，逻辑分组就不存在。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
fieldset包裹语义相关的控件，比如“收货地址”“支付方式”“兴趣偏好” -
legend必须是fieldset的第一个子元素，且内容要具体（如“常用联系邮箱”，而非“信息”） - 单个表单可含多个
fieldset，但不要嵌套；legend不可省略，否则分组失去标题意义 - 多选 checkbox/radio 组合必须放同一
fieldset内，否则辅助技术无法识别“这是同一问题的多个选项”
name 属性决定数据流向，不能靠 JS 补救
提交后后端收不到字段？大概率是 name 缺失、拼错，或用了无意义值。浏览器根本不传没 name 的 input，JS 拿 FormData 也取不到。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
name必须存在，且语义清晰：name="user_phone"，而不是name="field_7"或name="txt1" - 数组型字段（如多选）统一用现代命名：
name="hobbies"（后端按同名聚合），避免混用name="hobbies[]"（PHP 风格）导致解析歧义 - 禁用的
input若需提交，应设disabled为false或改用readonly——disabled元素不会出现在表单数据中 - 不要指望 JS 动态加
name来“修复”：表单提交瞬间只读取当前 DOM 中的name，异步设置无效
type、required、autocomplete 要配合 label 一起生效
只加 type="email" 却没 label，移动端键盘不会自动弹出 @ 键；只加 required 却没视觉提示和错误文案，用户提交失败只会看到英文报错或无反应。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
type必须精准：type="tel"触发数字键盘，type="search"带清空按钮，type="password"启用密码管理器识别 -
required必须搭配视觉反馈：用:user-invalid控制红框，用setCustomValidity("手机号格式不对")替换原生英文提示 -
autocomplete值要规范：autocomplete="email"、autocomplete="shipping street-address"，别写autocomplete="on"这种无效值 - 所有校验逻辑（包括
pattern、minlength）都依赖name和type正确，缺一不可
最常被忽略的是：label 的语义作用只在「关联成立」时生效。哪怕 HTML 初始写对了，JS 如果用 replaceWith() 替换 input、或用 innerHTML 重绘整个区块，id 就断了——这时候显式绑定必然失效，而隐式包裹反而更鲁棒。
