나는 대답을 얻지 못했지만 데이터에서 생성 된 html 폼을 부트 스트랩과 함께 만들었습니다. 이것은 단지 예일뿐입니다. 데이터는 제가 만든 객체입니다. 당신은 여기서 반응의 구조의 몇 가지 예를 볼 수 있습니다.
링크 된 스타일 시트와 스크립트 (HTML 파일 참조)를 다운로드해야 작동 할 수 있습니다. 대부분의 앱에는 부트 스트랩과 JQuery 만 필요하고 다른 컨트롤에는 특정 컨트롤이 필요합니다.
도움이되기를 바랍니다.
이것은 내 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>
입니다 그리고 이것은 내 자바 스크립트 파일입니다
//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);
}