title: Form elements IDs as global variables in IE11
body: <p>Do you know why named access [1] does not work in IE11 for form elements (<code>input</code>) inside <code>form</code>?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
   &lt;input id="inDiv" /&gt;
   &lt;script&gt;
    document.write(typeof inDiv);
   &lt;/script&gt;
  &lt;/div&gt;
  &lt;form&gt;
   &lt;input id="inForm" /&gt;
   &lt;script&gt;
    document.write(typeof inForm);
   &lt;/script&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Above snippet writes <code>object object</code> in "any browser except IE11".</p>
  
  <p>In IE11 it writes <code>object undefined</code>.</p>
  
  <hr>
  
  <p>What is even more strange: in IE11 <strong>inline event handler</strong> on element <strong>in the form</strong> sees the "global id" of element in the same form just OK:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h5,h6 { margin: 0;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
   &lt;input id="i1" value="input i1 in DIV" /&gt;
   &lt;h5&gt;What is &lt;code&gt;typeof i1&lt;/code&gt; in:&lt;/h5&gt;
   &lt;h6&gt;- inline script inside &lt;code&gt;DIV&lt;/code&gt;:&lt;/h6&gt;
   &lt;script&gt;
    document.write(typeof i1); // `object` in IE11
   &lt;/script&gt;
   &lt;h6&gt;- inline event handler inside &lt;code&gt;DIV&lt;/code&gt;:&lt;/h6&gt;
   &lt;span&gt;&lt;img src="" onerror="this.parentNode.innerText = typeof i1; // `object` in IE11" &gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;h6&gt;- inline script outside &lt;code&gt;DIV&lt;/code&gt;:&lt;/h6&gt;
  &lt;script&gt;
   document.write(typeof i1); // `object` in IE11
  &lt;/script&gt;
  &lt;h6&gt;- inline event handler &lt;u&gt;outside&lt;/u&gt; &lt;code&gt;DIV&lt;/code&gt;:&lt;/h6&gt;
  &lt;span&gt;&lt;img src="" onerror="this.parentNode.innerText = typeof i1; // `object` in IE11" &gt;&lt;/span&gt;
  
  &lt;hr&gt;
  
  &lt;form&gt;
   &lt;input id="i2" value="input i2 in FORM" /&gt;
   &lt;h5&gt;What is &lt;code&gt;typeof i2&lt;/code&gt; in:&lt;/h5&gt;
   &lt;h6&gt;- inline script inside &lt;code&gt;FORM&lt;/code&gt;:&lt;/h6&gt;
   &lt;script&gt;
    document.write(typeof i2); // `undefined` in IE11
   &lt;/script&gt;
   &lt;h6&gt;- inline event handler inside &lt;code&gt;FORM&lt;/code&gt;:&lt;/h6&gt;
   &lt;span&gt;&lt;img src="" onerror="this.parentNode.innerText = typeof i2; // `object` in IE11" &gt;&lt;/span&gt;
  &lt;/form&gt;
  &lt;h6&gt;- inline script outside &lt;code&gt;FORM&lt;/code&gt;:&lt;/h6&gt;
  &lt;script&gt;
   document.write(typeof i2); // `undefined` in IE11
  &lt;/script&gt;
  &lt;h6&gt;- inline event handler &lt;u&gt;outside&lt;/u&gt; &lt;code&gt;form&lt;/code&gt;:&lt;/h6&gt;
  &lt;span&gt;&lt;img src="" onerror="this.parentNode.innerText = typeof i2; // `undefined` in IE11" &gt;&lt;/span&gt;
  
  &lt;hr&gt;
  
  &lt;h5&gt;Result in IE 11&lt;/h5&gt;
  &lt;pre&gt;
  What is typeof i1 in:
  
  - inline script inside DIV:
  object 
  - inline event handler inside DIV:
  object 
  - inline script outside DIV:
  object 
  - inline event handler outside DIV:
  object 
  
   
  What is typeof i2 in:
  
  - inline script inside FORM:
  undefined 
  - inline event handler inside FORM:
  object 
  - inline script outside FORM:
  undefined 
  - inline event handler outside form:
  undefined
  &lt;/pre&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <p>[1] <a href="http://w3c.github.io/html/browsers.html#named-access-on-the-window-object" rel="nofollow noreferrer">http://w3c.github.io/html/browsers.html#named-access-on-the-window-object</a></p>
  
  <p>Related questions: <a href="https://stackoverflow.com/questions/3434278/do-dom-tree-elements-with-ids-become-global-variables">Do DOM tree elements with ids become global variables?</a>, <a href="https://stackoverflow.com/questions/25325221/why-dont-we-just-use-element-ids-as-identifiers-in-javascript">Why don&#39;t we just use element IDs as identifiers in JavaScript?</a>.</p>