HTML单选按钮最佳做法

Question

我正在工作一个大型Backbone应用程序。 该接口本质上是一个很大的形式。 我们使用name属性将输入映射到模型属性，以便我们可以在更改或输入时自动保存每个字段，让Backbone来做。 我花了两天的时间来弄清楚为什么一个特定的部分会导致页面重新加载奇怪的URL。 答案现在显而易见，但是在构建了9个月的大型应用程序之后，您往往会忽略一些小问题。

在整个应用程序中，我们在各处使用<input>而不包裹<form> 。 但是，在一种情况下，我们有一个Handlebars模板形式的重复元素，其中包含具有相同名称的单选按钮：

<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>

问题在于，由于它们都具有相同的name属性，因此它们被分组在一起。 因此，我们没有得到3个值（每个组一个），而是得到了1个值（一个大组）。

因为我们知道单选按钮组是“作用域”到包含的<form> ，所以我们只包装了它：

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

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

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

这对于单选按钮来说很好用，但是现在我们有了一个表单，在文本<input>上按enter实际上是提交表单，而不是自动保存（从技术上讲，除了自动保存之外）。 那时，我什至从未发生过这种情况，因为我们设法以某种方式避免了应用程序中其他任何地方的这种情况。

我可以想到一些不同的解决方案：在表单上设置提交处理程序，在文本输入上设置提交处理程序，将文本输入保留在表单外。 但是这些似乎是骇人听闻的技巧，可以解决我所说的残破行为。 如果输入元素在表单外部工作，则对输入元素进行分组应在表单外部工作。 而且，由于我们已经在使用name属性（适用于所有其他属性），所以唯一的名称并不是真正的选择。

那么对于这种情况是否有最佳实践？ 除了<form> ，是否还有其他元素可以正确确定单选按钮的范围？ 我是否只需要忍受<form onsubmit="return false;"> ？

PS我们支持IE 8+

UPDATE

我最终得到的是：

<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>

Answer 1

1. 最好的办法是将每个组的名称更改为唯一的。
2. 第二好的方法是像完成操作一样按形式对它们进行分组，然后添加return false。
3. 第三最好的方法是使用jquery'preventdefault'阻止表单提交（对于给定特定ID的所有表单都可以使用）。
4. 最后（也是最荒谬的选择）是将每组按钮发送到它自己的小型html文件，并使用iframe在同一页面上显示它们。