Add DOM clobbering note to the form controls section

Closes whatwg#2720.

Author: Donovan Glover

source

@@ -52551,6 +52551,27 @@ interface <dfn>HTMLLegendElement</dfn> : <span>HTMLElement</span> {
 
   </div>
 
+  <div class="note">
+   <p>DOM clobbering is a common cause of security issues. Avoid using the names of
+   built-in form properties with the <code data-x="attr-fe-name">name</code> content attribute.</p>
+
+   <p>In this example, the <code>input</code> element overrides the built-in <code
+   data-x="attr-fs-method">method</code> property:</p>
+
+   <pre>let form = document.createElement("form");
+let input = document.createElement("input");
+form.appendChild(input);
+
+form.method;           // => "get"
+input.name = "method"; // DOM clobbering occurs here
+form.method === input; // => true
+</pre>
+
+   <p>Since the input name takes precedence over built-in form properties, the JavaScript reference
+   <code data-x="">form.method</code> will point to the <code>input</code> element named "method"
+   instead of the built-in <code data-x="attr-fs-method">method</code> property.</p>
+  </div>
+
 
   <h5>Submitting element directionality: the <code data-x="attr-fe-dirname">dirname</code> attribute</h5>