title: Editing form by double clicking element
body: <p>I have a form, and I want to be able to edit any part of that form by double clicking it. So going from this:</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;table&gt;
   &lt;tr&gt;
    &lt;th&gt;Name&lt;/th&gt;
    &lt;th&gt;Email&lt;/th&gt;
    &lt;th&gt;Phone&lt;/th&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td&gt;John Smith&lt;/td&gt;
    &lt;td&gt;johnsmith@gmail.com&lt;/td&gt;
    &lt;td&gt;+12345678&lt;/td&gt;
   &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I by double-clicking an element, transform it to an input element?
  For example: if I double click on <code>John Smith</code>, the HTML changes into this:</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;table&gt;
   &lt;tr&gt;
    &lt;th&gt;Name&lt;/th&gt;
    &lt;th&gt;Email&lt;/th&gt;
    &lt;th&gt;Phone&lt;/th&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;form action="index.php" method="post"&gt;
     &lt;td&gt;&lt;input type="text" value="John Smith" name="name" /&gt;&lt;/td&gt;
     &lt;td&gt;johnsmith@gmail.com&lt;/td&gt;
     &lt;td&gt;+12345678&lt;/td&gt;
    &lt;/form&gt;
   &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  
  So now I can change John's name.</p>
  
  <p>Does someone know how to do it?</p>