HTML单选按钮最佳实践

我在工作中处理一个大型主干应用程序。接口本质上是一种大形式。我们使用name属性将输入映射到模型属性，这样我们可以在更改或输入时自动保存每个字段，让主干完成它的工作。我花了两天时间试图弄明白为什么某个特定的部分会导致页面重新加载一个奇怪的URL。答案现在是显而易见的，但在开发一个大应用程序9个月之后，你往往会忽略一些小事情

在整个应用程序中，我们在没有包装的情况下到处使用。但是，在一种情况下，我们有一个把手模板形式的重复元素，其中包含具有相同名称的单选按钮：

<div id="1">
    <input type="radio" name="choose" value="yes"> Yes
    <input type="radio" name="choose" value="no"> No
    <input type="text">
</div>

<div id="2">
    <input type="radio" name="choose" value="yes"> Yes
    <input type="radio" name="choose" value="no"> No
    <input type="text">
</div>

<div id="3">
    <input type="radio" name="choose" value="yes"> Yes
    <input type="radio" name="choose" value="no"> No
    <input type="text">
</div>

这对于单选按钮来说效果很好，但是现在我们有了一个表单，在文本上点击enter实际上是提交表单，而不是技术上的自动保存，除了自动保存之外。当时，我甚至从未想到过这一点，因为我们设法在应用程序的其他地方避免了这种情况

我可以想出几个不同的解决方案：在表单上设置提交处理程序，在文本输入上设置提交处理程序，将文本输入保留在表单之外。但这些看起来像是对付我所说的坏行为的黑客。如果输入元素在表单之外工作，那么分组输入元素应该在表单之外工作。而且，由于我们已经在使用name属性，该属性适用于其他所有内容，因此唯一名称实际上不是一个选项

那么，对于这种情况，有没有最佳实践？除此之外，是否有其他元素可以正确地确定单选按钮的范围？难道我就要和你一起生活吗

另外，我们支持IE 8+

更新

这就是我的结局：

<div id="1">
    <form onsubmit="return false;">
        <input type="radio" name="choose" value="yes"> Yes
        <input type="radio" name="choose" value="no"> No
    </form>

    <input type="text">
</div>

最好的办法是将每个组的名称更改为唯一的。 第二个最好的方法是像您所做的那样按表单对它们进行分组，并添加返回值false。 第三个最好的方法是使用jquery“preventdefault”阻止表单提交，这可以适用于给定特定id的所有表单。 最后也是最荒谬的选择是将每组按钮发送到它自己的小html文件中，并使用iFrame在同一页面上显示它们。

---

出于好奇，为什么不能让这些名字变得独一无二？我相信这在技术上是最好的“最佳实践”，我们使用name属性将输入字段映射到模型属性以进行自动保存。解决这个问题需要做更多的工作，也不会比我正在考虑的更优雅。更新了问题以包含这些信息。最终将文本输入从表单中删除，并添加了提交处理程序。

<div id="1">
    <form onsubmit="return false;">
        <input type="radio" name="choose" value="yes"> Yes
        <input type="radio" name="choose" value="no"> No
    </form>

    <input type="text">
</div>