title: Specifying content of an iframe instead of the src attribute to a page
body: <p>I'm currently working on a form which includes some file inputs to upload pictures. There is an <code>onchange()</code> event for those inputs that submits the pictures to an <code>iframe</code>, then dynamically loads the uploaded pictures into the form, with fields to be modified for them (like <em>name</em> and <em>geo-localization</em>).</p>
  
  <p>Since I can't nest forms, the <code>file_input</code> is also contained in an <code>iframe</code>. In the end I use an <code>iframe</code> inside of another <code>iframe</code>. So I have something like this:</p>
  
  <pre><code>&lt;form&gt;
  &lt;!-- LOTS OF FIELDS!! --&gt;
  &lt;iframe src="file_input_url"&gt;
  &lt;!-- iframe which loads a page of a form with a file input--&gt;
  &lt;/iframe&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>and the HTML loaded into the <code>iframe</code> is something like (excluding the <code>html</code>, <code>head</code> and <code>body</code> tags)</p>
  
  <pre><code>&lt;form target="upload_iframe"&gt;
  &lt;input type="file" onchange="this.form.submit()"&gt;
  &lt;/form&gt;
  &lt;iframe name="upload_iframe"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>This works great, except for the fact that it takes a couple seconds to load the first <code>iframe</code>, so the file input does not load with the rest of the page. This is not visually ideal. I could solve it if I could specify the <code>iframe</code> content without needing to load another page (specified by <code>file_input_url</code> in the first <code>iframe</code>).</p>
  
  <p>Is there a way to specify the <code>iframe</code> content in the same document, or can it only be specified with the <code>src</code> attribute, requiring the load of another page?</p>