表单提交多个筛选条件需确保所有字段有name属性、不设disabled、非隐藏控件仍可见；多选用name="tag[]"，范围用独立字段，空值传空字符串而非省略；GET适合可分享链接但受URL长度限制，POST无长度限制但不可 bookmark 且刷新易重复提交。
表单提交时如何正确传递多个筛选条件
HTML 表单本身不区分“筛选”或“普通提交”，只要 、 等控件有 name 属性且未被禁用（disabled），就会在提交时作为键值对发往服务端。关键不是“怎么提交多条件”，而是“怎么让参数不丢、不串、不被忽略”。
哪些字段会被提交？必须满足三个条件
常见错误是加了 id 却漏写 name，或用了 disabled 却以为只是视觉禁用——其实它会让字段彻底不出现在请求中。
-
name属性必须存在，且值唯一（同名多选框除外） - 不能带
disabled属性（可用readonly配合 CSS 视觉禁用） - 不能是
type="hidden"以外的隐藏控件（比如display: none的仍会提交）
多选、范围、空值这些场景怎么处理
后端接收时，不同框架对空字符串、缺失参数、重复 name 的处理差异很大，前端得提前对齐预期。
- 多选下拉（
）：浏览器默认用多个同名参数发送，如?tag=vue&tag=react；若后端只取第一个，需改用数组式命名：name="tag[]"或name="tag"+ 后端解析多值 - 日期/数字范围：用两个独立字段（如
start_date和end_date），避免用——它没语义化值，不适合筛选 - 可选条件留空：提交空字符串（
keyword=）比完全不传更可控；若后端想跳过空值，应在服务端判断，而非前端删掉字段
不用 JS 也能动态增减筛选项？可以，但有代价
纯 HTML 下，新增筛选字段只能靠服务端渲染（比如点击“添加品类”触发一次页面重载），或者用 预埋占位字段并配合 CSS 显示/隐藏。但注意：
- 预埋太多隐藏字段会增大 HTML 体积，且无法响应式校验
- 如果筛选项数量不确定（如“最多加 5 个标签”），纯 HTML 无法做实时计数和禁用，必须用 JS
- 所有通过
form.submit()或回车触发的提交，都会包含当前 DOM 中所有有效字段——JS 动态插入的也要确保有name
最易被忽略的一点：GET 提交时 URL 长度限制（通常 2000 字符左右），含大量筛选条件时可能截断；POST 虽无此限，但刷新会导致重复提交，且无法直接分享链接。该用哪种，得看业务是否需要可 bookmark 的筛选结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
