title: Generating forms dynamically
body: <p>I have attached crude images of two of the multiple forms I need to build in my web application:</p>
  
  <p><img src="https://i.stack.imgur.com/0vvy8.jpg" alt="Form"></p>
  
  <p>If I consider forms in general, it has the following elements:</p>
  
  <ol>
  <li>Checkbox</li>
  <li>Date</li>
  <li>DateTime</li>
  <li>File</li>
  <li>Image</li>
  <li>Password</li>
  <li>Radio Button</li>
  <li>Text Box</li>
  <li>Label</li>
  <li>Text Area</li>
  <li>Time</li>
  <li>Link</li>
  </ol>
  
  <p>I was wondering if there could be a way where I could store the structure/meta-data of all the forms somewhere(config. file, database etc.) and depending upon some action, generate the form, on-the-fly based on the meta-data - the user will simply input the values. I went through several topics like <a href="https://stackoverflow.com/questions/4636098/dynamic-form-in-spring-3">this</a> and <a href="https://stackoverflow.com/questions/890250/better-way-for-dynamic-forms-with-spring">this</a> but couldn't find the answer. Assuming it is possible, how to structure the stored elements so that they are rendered properly in the generated page/form, how to store the values for combo-boxes, how to make text-boxes read-only and queries like that have added to my confusion.</p>
  
  <p>Please note while <em>I'm restricted to the use of JQuery and Spring</em>, I would also like to know the other technologies and ways,of course, to achieve the same!</p>
  
  <p>Thanks and regards !</p>
  
  <p>*1st edit begins</p>
  
  <p>While the solution provided by pbibergal appears to address my problem, I'm still looking forward to a some Spring-based/pure JQuery-based solution to achieve the same - I'm not sure if I would be allowed to explore and use a JS template engine !</p>
  
  <p>*1st edit ends</p>
  
  <p>*2nd edit begins</p>
  
  <p>This is the single page where I'm trying to render the form using doT.js - am I missing some HTML tag somewhere to be passed to the js code where it can render the form?</p>
  
  <pre><code>    &lt;html&gt;
      &lt;script src="../../jquery1.8.3/jquery-1.8.3.js"&gt;&lt;/script&gt;
  
      &lt;script src="https://raw.github.com/olado/doT/master/doT.js"&gt;
      &lt;/script&gt;
  
      &lt;script id="form-tmpl" type="text/x-dot-template"&gt;
          {{~it.form :value:index}}
              &lt;{{=value.element}} id="input_{{=value.index}}" type="{{=value.type}}" value="{{=value.value}}"&gt;
          {{~}}
      &lt;/script&gt;
  
      &lt;script&gt;
      var json =  "{fileState:"Processed",reason:"",cancel:"Cancel"}";
  
      $(document).ready(function(){
          var tmpl = doT.template(document.getElementById('form-tmpl').text);
          $('body').append(tmpl(json));
      });
      &lt;/script&gt;
  
      &lt;body&gt;
      &lt;/body&gt;
  
      &lt;/html&gt;
  </code></pre>
  
  <p>*2nd edit ends</p>