Javascript 表单元素上的id属性导致全局变量_Javascript_Html

Javascript 表单元素上的id属性导致全局变量

javascript html

Javascript 表单元素上的id属性导致全局变量,javascript,html,Javascript,Html,可能重复：说明： <form class="input-form" id="test"> <label for="key">Key</label> <input type="text" name="key"> </form> 大家好，我刚刚注意到，当我在表单上使用id时，它可以作为全局变量使用在这之后。我在Firefox 17.0和Google Chrome 23.0上都在Mac上进行了测试。当我看到这个

可能重复：

说明：

<form class="input-form" id="test">
      <label for="key">Key</label>
      <input type="text" name="key">
</form>

大家好，我刚刚注意到，当我在表单上使用id时，它可以作为全局变量使用在这之后。我在Firefox 17.0和Google Chrome 23.0上都在Mac上进行了测试。当我看到这个的时候，我有点惊讶

HTML代码：

<form class="input-form" id="test">
      <label for="key">Key</label>
      <input type="text" name="key">
</form>


钥匙

问题：

<form class="input-form" id="test">
      <label for="key">Key</label>
      <input type="text" name="key">
</form>

这是否意味着在from上使用id实际上是一个非常糟糕的主意，还是我完全错了

提前感谢。

如果您的意思是它在浏览器控制台中可用，那么它就可以了。这只是浏览器试图减轻编写

document.getElementById（'test'）

的痛苦的一种方式。至少铬合金是这样的。如果您打开Chrome控制台（例如在本页上），只需键入“sidebar”并点击enter，您将看到它返回id为“sidebar”的div

直接回答您的问题：在表单（或任何其他节点）上使用id是完全正常的。

如果您的表单是正文中的直接子级，则这是正常的。例如：

<body>
<form id="myForm" >
    <input type="file"/>
    <div>
        <form id="myForm2" >
            <input type="text" />
        </form>
    </div>
</form>
</body>

myForm将作为全局变量提供。但是myForm2将不可用。

我相信这种情况会发生在您提供ID的任何元素上-您无法避免它，只需确保您没有使用该全局变量引用该元素-这就是

getElementById

的用途。这里有一个答案：感谢这两个答案非常有用。这就是我喜欢stackoverflow的原因！你说得对，我实际上只是在控制台上试过，比如“test”和window.test。我认为嵌套表单不是一个好主意