making a one to many form html that serializes no javascript -

i trying make simple form allows multiple photos added before upload. creating object manually javascript

var objarr = []; for(var = 0; < <arrayofinputs>.length; i++){     objarr.push({         img://image file         caption://caption text         title://image title         tags://image tags     }); } 

and submit form. there way structure html markdown have same effect.

i tried

<form>     <fieldset name="img[]">         <input type="file" name="img"/>         <input type="text" name="caption"/>         ...     </fieldset>//repeat each photo 

this not have desired effect. pure html solution possible or need use javascript serialize form manually?

after serialization object should this:(im using mongodb shouldn't effect structure of form)

{     'name':'some name',     'description':'some description',     'images':[{         'img':imgfile,         'caption':'some image',         'title':'some title',         'tags':'some tags'     },{         'img':otherimgfile,         'caption':'some other image',         'title':'some other title',         'tags':'some other tags'     }] } 

you can add button spawns new fieldset, being able add many photos want before submitting form.

<form>   <fieldset name="img[]">     <input type="file" name="img"/>     <input type="text" name="caption"/>     <input type="file" name="title"/>     <input type="text" name="tags"/>   </fieldset>   <button id="add-photo-btn">add photo</button> </form>  $('#add-photo-btn').on('click', function() {    var myform = $('form');   var fieldset = '<fieldset name="img[]"><input type="file" name="img"/><input type="text" name="caption"/><input type="file" name="title"/><input type="text" name="tags"/></fieldset>';    myform.append(fieldset); });