原生HTML表单需正确设置name、type、required、action和method属性：action不能为空或仅“/”，method应为post以保护敏感数据；type须语义化（如email、number、date等）；label必须与input通过for/id正确关联；select和textarea需主动约束空值与长度；name是后端接收字段的唯一标识。
能直接用原生 HTML 实现，不需要 JS 就能跑通提交逻辑，但必须注意 name、type 和 required 的组合是否合理，否则后端收不到字段或校验失效。
form 标签的 action 和 method 必须显式设置
不写 action 会导致表单提交到当前 URL，容易刷新页面却没发出去数据；不写 method 默认是 GET，敏感字段（如密码）会暴露在地址栏里。
-
method="post"是绝大多数场景的首选，尤其含密码、文件、长文本时 -
action值不能为空字符串或仅/，除非后端明确监听该路径 - 如果只是前端验证或测试，
action="#"可临时阻止跳转，但别上线用
input type 要按语义选，别全用 text
用错 type 不仅影响移动端键盘弹出类型（比如 tel 弹数字键盘，email 弹带 @ 键的键盘），还会让浏览器跳过原生格式校验。
-
type="email"：输入非法邮箱（如a@b）时，checkValidity()返回false，且提交会被拦截 -
type="number"：支持min/max/step，但注意它返回的是字符串而非数字，后端需转换 -
type="date"：值固定为YYYY-MM-DD格式，不支持中文显示或自定义格式 -
type="checkbox"和type="radio"必须配name才能成组或被提交；未勾选的checkbox不会出现在提交数据中
label 和 for 属性不只为了好看
漏掉 for 或 ID 不匹配，会导致点击文字无法聚焦输入框——对触屏设备和屏幕阅读器用户是硬伤。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
-
<label for="age">年龄</label><input type="number" id="age" name="age">是正确配对 - 用包裹写法（
<label>年龄<input ...></label>）可省for，但嵌套结构易出错，不推荐混用 - 没有
label的input，即使加了aria-label，部分读屏软件仍可能忽略
select 和 textarea 的边界情况要提前防
select 默认不强制选中，textarea 默认允许任意长度输入——这两点常被忽略，导致后端收到空值或超长内容。
-
select加一个空<option value="">-- 请选择 --</option>，再配合required，才能真正限制用户选择 -
textarea没有maxlength属性（HTML5 不支持），得用maxlength在 JS 中监听，或后端截断 - 多选
select（multiple）提交时字段值是数组形式，后端框架（如 Express、Django）需按数组解析，不是逗号拼接
最常被跳过的其实是 name —— 它不是可选项，而是表单数据能到达后端的唯一凭据。哪怕 id 写对了、label 匹配了，只要 name 缺失或重复，后端就收不到这个字段。
