FormData与单选按钮的默认行为
在前端开发中，我们经常使用FormData对象来方便地收集表单数据，以便通过fetch或XMLHttpRequest发送到服务器。然而，许多开发者在遍历FormData.entries()时会遇到一个常见问题：未被选中的单选按钮（radio button）并没有被包含在收集到的数据中。
考虑以下HTML结构中的一个送货城市选择器：
<div>
<label class="label is-size-4">
<span class="mr-1 has-text-primary-dark">Delivery City</span>
<span class="has-text-danger">*</span>
</label>
<div class="field abc-featured-property-label">
<div class="control">
<label class="radio is-size-5">
<input type="radio" name="delivery-city" value="Orange Beach" class="abc-contact-form-field-delivery-city">
Orange Beach
</label>
<label class="radio is-size-5">
<input type="radio" name="delivery-city" value="Gulf Shores" class="abc-contact-form-field-delivery-city">
Gulf Shores
</label>
</div>
</div>
</div>当用户未选择任何一个“Delivery City”选项时，FormData对象在构建时会忽略名为delivery-city的输入字段。这可能导致表单验证或后端数据处理时出现意料之外的缺失数据。
技术解析：undefined与空字符串的差异
FormData构造函数在处理表单元素时，遵循一个关键原则：它会跳过那些在JavaScript中其值被视为undefined的输入元素。这是导致单选按钮行为差异的根本原因。
- 未选中的单选按钮： 当一个单选按钮组中的任何选项都未被选中时，这些未选中单选按钮的value属性在JavaScript环境中被视为undefined。由于FormData构造函数会忽略undefined值，因此这些单选按钮不会被添加到FormData对象中。
- 文本输入框： 相比之下，一个空的文本输入框（）即使没有用户输入，其value属性的值也是一个空字符串""。空字符串""在JavaScript中是一个有效且有定义的字符串值，而非undefined。因此，FormData会包含这些空的文本输入框，并将其值设为""。
这种行为差异是设计使然，但对于不了解其内部机制的开发者来说，可能会造成困惑。
最佳实践与解决方案
为了确保表单数据的完整性和用户体验，处理单选按钮时应遵循以下最佳实践：
-
始终预设一个选中项： 最直接和推荐的解决方案是为单选按钮组中的一个选项设置checked属性。这确保了在表单加载时，总有一个单选按钮被选中，从而其值不会是undefined，并始终会被FormData包含。
<div class="control"> <label class="radio is-size-5"> <input type="radio" name="delivery-city" value="Orange Beach" class="abc-contact-form-field-delivery-city" checked> Orange Beach </label> <label class="radio is-size-5"> <input type="radio" name="delivery-city" value="Gulf Shores" class="abc-contact-form-field-delivery-city"> Gulf Shores </label> </div>通过预设checked，即使在用户未进行任何操作的情况下提交表单，delivery-city的值也会是Orange Beach。
考虑使用下拉选择框（ 如果业务逻辑不允许预选，或者选项数量较多，
用户体验考量： 从用户体验的角度来看，为单选按钮组提供一个默认选中项通常是更好的做法。它能清晰地引导用户，减少用户遗漏选择的可能，从而降低表单提交错误率。如果确实没有默认选项，可以考虑添加一个“请选择”或“不适用”的选项，并将其预选。
示例代码演示
以下代码演示了FormData如何处理选定和未选定的单选按钮。
HTML 结构：
<form>
<div class="mt-2 is-hidden abc-contact-form-delivery-required-fields">
<div class="field">
<label class="label is-size-4">
<span class="mr-1 has-text-primary-dark">Delivery Street Address</span>
<span class="has-text-danger">*</span>
</label>
<div class="control has-icons-left has-icons-right abc-featured-property-label">
<input class="input" type="text" name="deliveryAddr" placeholder="Your Beach Home Address">
<span class="icon is-small is-left">
<i class="fas fa-road"></i>
</span>
</div>
</div>
<div>
<label class="label is-size-4">
<span class="mr-1 has-text-primary-dark">Delivery City</span>
<span class="has-text-danger">*</span>
</label>
<div class="mb-3 abc-featured-property-label">Sorry we do not deliver to Fort Morgan</div>
<div class="field abc-featured-property-label">
<div class="control">
<label class="radio is-size-5">
<input type="radio" name="delivery-city" value="Orange Beach" class="abc-contact-form-field-delivery-city">
Orange Beach
</label>
<label class="radio is-size-5">
<input type="radio" name="delivery-city" value="Gulf Shores" class="abc-contact-form-field-delivery-city">
Gulf Shores
</label>
</div>
</div>
</div>
</div>
<button type="submit">提交表单</button>
</form>JavaScript 代码：
let counter = 0;
document.querySelector('form').addEventListener('submit', e => {
e.preventDefault(); // 阻止表单默认提交行为
counter++;
// 创建 FormData 对象
const formData = new FormData(e.target); // e.target 就是 form 元素
console.log(`--- 提交 #${counter} ---`);
// 遍历 FormData 条目并打印
for (let [fieldName, val] of formData.entries()) {
console.log(`${fieldName}: ${JSON.stringify(val)}`);
}
console.log(`--- 提交 #${counter} 结束 ---`);
});运行结果分析：
-
初次提交（未选择“Delivery City”）： 控制台输出将包含deliveryAddr（即使为空，其值也是""），但不会包含delivery-city。
--- 提交 #1 --- deliveryAddr: "" --- 提交 #1 结束 ---
-
选择“Orange Beach”后提交： 控制台输出将包含deliveryAddr和delivery-city及其选中的值。
--- 提交 #2 --- deliveryAddr: "" delivery-city: "Orange Beach" --- 提交 #2 结束 ---
这个示例清晰地展示了FormData在处理未选中单选按钮时的行为。
总结
理解FormData对象如何处理表单元素，特别是单选按钮，对于构建健壮的前端表单至关重要。核心在于FormData会忽略值被视为undefined的输入元素。为了避免数据丢失和提升用户体验，强烈建议在单选按钮组中始终预设一个选中项。如果业务场景特殊，无法预设，则应考虑使用
