是否应该使用元素名称或 id 来访问表单元素？答案

【问题标题】：Should element name or id be used to access form elements?是否应该使用元素名称或 id 来访问表单元素？
【发布时间】：2015-05-25 17:38:44
【问题描述】：

我正在使用 jQuery 验证器插件http://jqueryvalidation.org/。

我发现我可以使用它们的 ID 或它们的名称访问表单中的元素（至少使用 Firefox 和 Chrome）。一种方法比另一种更正确且浏览器兼容吗？或者也许我应该干点别的？

http://jsbin.com/daxaju/2/

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Testing</title>  
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js" type="text/javascript"></script>
        <script type="text/javascript"> 
            $(function(){
                $("#myForm").validate({
                    submitHandler: function(form) {
                        console.log('using id',form.myElementID.value);
                        console.log('using name',form.myElementName.value);
                    }
                });                
            });
        </script>
    </head>

    <body>
        <form id="myForm">
            <input type="text" name="myElementName" id="myElementID" />
            <input type="submit" />
        </form>
    </body> 
</html>

【问题讨论】：

我有一个用ID，一个用名字，第三个都用！

标签： javascript html forms dom

【解决方案1】：

通过 ID 选择元素是最快的。 Id 在文档上（应该）是唯一的。它适用于所有浏览器。

【讨论】：

【解决方案2】：

最好的办法是把id和name都放，jquery用id，php用name。对于浏览器兼容，id/name 都可以正常工作。

【讨论】：

【解决方案3】：

因为在 input 上需要一个名称（我不知道文档对此有什么说法，但如果您想稍后检索它，例如在 PHP 中，您应该将 name 属性放在它），我认为通过 name 引用您的元素更安全。

正如您在此处看到的：http://www.javascript-coder.com/javascript-form/javascript-get-all-form-objects.phtml，原生 API 使用名称来引用表单元素。

【讨论】：

谢谢 Cyrille，有趣的是，如果我的表单中有两个输入 <input type="text" name="myElementName" id="myElementID" /> 和 <input type="text" name="myElementID" id="myElementName" />，我都无法读取它们！