I did not get an answer but still did an html form generated from data, with bootstrap. This is just an example. The data is objects that I made. You can see some examples of constructions here, that are responsive.
You need to download the linked stylesheets and scripts (see the HTML file) for it to work. You only need bootstrap and JQuery for most of the app, the other includes are for specific controls.
I hope this can help.
This is my index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="js/bootstrap-checkbox.min.js" defer></script>
<script src="js/bootstrap-filestyle.min.js" defer></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.js"></script>
<script src="js/myJavaScript.js"></script>
</head>
<body onload="addAllElements()">
<h1>Exemple de formulaire responsive généré pour Bootstrap</h1>
<br/>
<div class="row" id="mainRow">
</div>
</body>
</html>
And this is my javascript file
//This function should read a json file and produce the right form
function addAllElements() {
//A test for generated forms (from objects)
for (var i = 0; i < 3; i++) {
addElement({
label: "SAQ ID :",
tag: "input",
type: "text",
infos: { name: "sapID" }
});
addElement({
label: "Family of equipement :",
tag: "textarea",
infos: { name: "familyEQ" }
});
addElement({
label: "Category of equipement :",
tag: "textarea",
infos: { name: "categoryEQ" }
});
addElement({
label: "Name of the equipement :",
tag: "input",
type: "text",
infos: { name: "nameEQ" }
});
addElement({
label: "Serial Number :",
tag: "input",
type: "text",
infos: { name: "serial" }
});
addElement({
label: "Type/Model :",
tag: "input",
type: "text",
infos: { name: "typeModel" }
});
addElement({
label: "Photo :",
tag: "pictureUpload",
type: "file",
infos: { name: "photo" }
});
addElement({
label: "Can the material be assigned or sold :",
tag: "checkbox",
type: "checkbox",
infos: {}
});
addElement({
label: "Some rich text editing :",
tag: "richEditor",
});
}
//We add the styling for checkboxes, file inputs and rich editors
$(':checkbox').checkboxpicker();
$(":file").filestyle({ buttonText: "File", buttonName: "btn-primary", placeholder: "No file" });
$('.richEditor').summernote();
}
//This function add a single element to the form
function addElement() {
//We create the group div (the whole element div)
var newDiv = document.createElement("div");
if(arguments[0].tag !== "richEditor"){
newDiv.className = "form-group col-xs-12 col-sm-6 col-lg-4 col-xl-3";
}else{
newDiv.className = "form-group col-xs-12 col-sm-12 col-lg-12 col-xl-12";
}
//We create and add the label to the div
var newLabel = document.createElement("label");
if(arguments[0].tag == "richEditor"){
newLabel.className = "col-xs-12 col-sm-2 col-lg-2 col-xl-2 control-label";
}else{
newLabel.className = "col-xs-12 col-sm-5 control-label";
}
newLabel.innerHTML = arguments[0].label;
newDiv.appendChild(newLabel);
//We create and add the input to the div
var inputDiv = document.createElement("div");
if(arguments[0].tag == "richEditor"){
inputDiv.className = "col-xs-12 col-sm-10 col-lg-10 col-xl-10";
//inputDiv.style.paddingLeft = "5%"
}else{
inputDiv.className = "col-xs-12 col-sm-7";
}
newDiv.appendChild(inputDiv);
switch (arguments[0].tag) {
case "input":
var newInput = document.createElement("input");
newInput.className = "form-control";
newInput.type = (arguments[0].type !== undefined ? arguments[0].type : "");
newInput.placeholder = (arguments[0].infos.placeholder !== undefined ? arguments[0].infos.placeholder : "");
newInput.name = (arguments[0].infos.name !== undefined ? arguments[0].infos.name : "");
inputDiv.appendChild(newInput);
break;
case "textarea":
var newInput = document.createElement("textarea");
newInput.className = "form-control";
newInput.type = (arguments[0].type !== undefined ? arguments[0].type : "");
newInput.placeholder = (arguments[0].infos.placeholder !== undefined ? arguments[0].infos.placeholder : "");
newInput.name = (arguments[0].infos.name !== undefined ? arguments[0].infos.name : "");
newInput.style = "resize: vertical;";
inputDiv.appendChild(newInput);
break;
case "pictureUpload":
var newInput = document.createElement("input");
newInput.className = "form-control stylesheet";
newInput.type = "file";
newInput.placeholder = (arguments[0].infos.placeholder !== undefined ? arguments[0].infos.placeholder : "");
newInput.name = (arguments[0].infos.name !== undefined ? arguments[0].infos.name : "");
inputDiv.appendChild(newInput);
break;
case "checkbox":
var newInput = document.createElement("input");
newInput.className = "form-control";
newInput.type = "checkbox";
var att = document.createAttribute("data-reverse");
newInput.setAttributeNode(att);
att = document.createAttribute("checked");
newInput.setAttributeNode(att);
inputDiv.appendChild(newInput);
break;
case "richEditor":
var newInput = document.createElement("div");
newInput.className = "form-control richEditor";
inputDiv.appendChild(newInput);
break;
default:
}
var mainRow = document.getElementById("mainRow");
mainRow.appendChild(newDiv);
}
