本文讲解如何通过 html 表单中的 `type="number"` 输入框，配合合理的 `name` 属性命名规则，将用户选择的商品名称与数量一并提交为结构化数组（如 php 中的 `$_post['drinks']`），适用于快餐订单等需“商品+数量”双维度采集的场景。
在构建快餐订单表单时，仅用 <input type="number"> 记录数量是不够的——你还需同时关联商品标识（如 "cokeclassic"）才能准确还原订单内容。HTML 本身不支持直接将字符串值写入 value 属性后又让该值作为数组键名，因此需采用语义化命名 + 后端解析或隐藏字段协同两种主流方案。以下推荐更清晰、可扩展性更强的实践方式：
✅ 推荐方案：为每项商品配对「隐藏名称 + 数量输入」
<form method="POST" action="process_order.php">
<table class="menu" style="width:100%;">
<tr>
<td class="productlist">
<!-- Coca Cola Classic -->
<input type="hidden" name="drinks[0][name]" value="cokeclassic">
<input type="number" name="drinks[0][amount]" min="0" max="20" value="0" class="productNumber">
<label class="product">Coca Cola Classic $0.75</label><br><br>
</td>
</tr>
<tr>
<td class="productlist">
<!-- Sprite -->
<input type="hidden" name="drinks[1][name]" value="sprite">
<input type="number" name="drinks[1][amount]" min="0" max="20" value="0" class="productNumber">
<label class="product">Sprite $0.75</label><br><br>
</td>
</tr>
</table>
<input type="submit" value="Submit Order" class="submit">
</form>✅ 提交后，PHP 后端可直接获取结构化数组：
// process_order.php
$drinks = $_POST['drinks'] ?? [];
foreach ($drinks as $item) {
if ((int)$item['amount'] > 0) {
echo "Item: {$item['name']}, Qty: {$item['amount']}<br>";
}
}
// 输出示例：Item: cokeclassic, Qty: 2<br>Item: sprite, Qty: 1<br>⚠ 注意事项
- 不要滥用 name="drinks[]" 单一数组：若所有输入都用 name="drinks[]"，浏览器会把所有数值（包括隐藏字段）混入同一维数组，丢失商品与数量的映射关系。
- 索引建议连续且明确：使用 [0], [1] 等显式索引，比依赖浏览器自动递增更可靠；也可用语义键如 [cokeclassic]，但需确保键名合法（无空格/特殊字符）。
- 前端增强体验（可选）：可用 JavaScript 动态生成行、校验总数、禁用零值提交等，但核心数据结构仍应由 HTML name 属性定义，保障无 JS 时基础功能可用。
? 总结
用数字输入框构建订单数组的关键，在于将“商品标识”和“数量”作为对象的两个属性共同提交，而非试图让单个 <input> 承载双重语义。通过 name="drinks[0][name]" 和 name="drinks[0][amount]" 的嵌套命名，你既保持了 HTML 表单的简洁性，又为后端提供了可直接遍历、过滤和入库的结构化数据——这才是学校项目中兼顾教学意义与工程合理性的最佳实践。
