本文讲解如何通过 html 表单中的 `type="number"` 输入框，结合合理的 `name` 属性命名规则，将用户选择的餐品名称与数量一并提交为结构化数组（如 php 的 `$_post['drinks']`），适用于快餐订单等场景。
在构建快餐订单表单时，若希望用户通过数字输入框（）指定每种饮品/食品的数量，同时后端能清晰接收「饮品名 + 数量」的配对数据（而非仅数字），关键在于语义化命名表单字段，而非依赖单一数组语法（如 name="drinks[]"）。
✅ 正确做法：使用嵌套键名传递结构化数据
HTML 中应为每种商品设置两个关联字段：一个隐藏域存商品标识（如 cokeclassic），一个数字输入框存数量，并统一用带索引的数组名组织：
? 为什么这样命名？name="drinks[0][name]" 和 name="drinks[0][amount]" 会被 PHP 自动解析为二维关联数组：$_POST['drinks'] = [ ['name' => 'cokeclassic', 'amount' => 3], ['name' => 'sprite', 'amount' => 1] ];前端 JavaScript 也可通过 FormData 或 querySelectorAll 轻松提取该结构。
⚠️ 注意事项
- 避免混用 [] 与点号语法：name="drinks[].name" 是无效的，浏览器不识别；必须使用方括号嵌套（drinks[0][name]）。
- 索引需连续且唯一：建议按顺序编号（[0], [1], [2]…），便于后端遍历；若用 JS 动态增删项，请同步更新索引。
- 服务端务必校验：检查 $_POST['drinks'] 是否为数组、每个子项是否含 name 和 amount 键，并验证 amount 为非负整数。
- 用户体验优化：可添加 JS 实时禁用值为 0 的项，或自动聚焦下一个非零输入框，提升操作效率。
✅ 总结
用数字输入框构建结构化订单数组，核心是放弃“单字段数组”思维，转而采用「隐藏标识 + 数字数量」成对字段 + 合理嵌套 name 属性的方式。这既保持了 HTML 表单的简洁性，又为后端提供了可直接映射为对象列表的数据结构，完美契合学校项目中对清晰性、可维护性与扩展性的要求。
