formyx
Version:
JQuery forms plugin
76 lines • 3.32 kB
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="assets/css/docs.min.css"/>
<link rel="stylesheet" type="text/css" href="../dist/formy-min.css"/>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<title>Preset values</title>
</head>
<!-- This is the Source file-->
<body style='background-color:#f3f3f3'>
<small><a href="examples.html">Back to examples</a></small>
<div class ="container">
<div class="row">
<div class="col-lg-12">
<h3>Preloaded Forms</h3>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div id="formarea" class="panel panel-heading"></div>
</div>
<div class="col-sm-6">
<div class="panel panel-heading">
<h3>Source</h3>
<pre>
var fm = [
{ label: "<h3>Enter Your Details Here</h3>",
type:"titlebox", attrs:{"class":"text-center"}
},
{ label: "Name", name: "name" , value:"John Doe"},
{ label: "Title", name: "title", value:"Master", type:"select", options:["Mr", "Mrs", "Miss", "Master", "Chief", "Dr"] },
{ label: "Division", name: "division", type:"select", value:2, options:[
{text:"Unspecified",name:null},
{text:"Army",name:1},
{text:"Navy",name:2},
{text:"Airforce",name:3},
] },
{ label: "Children", name:"kids", value:2, type:"select", options:[0,1,2,3,4,5,6,7] },
{ label: "Iteration", name:"iter", value:2, type:"select", options:[{name:0, text:0},{name:1, text1},{name:2, text:2}] },
{ label: "Password", name: "pwd", type:"password", value:"What"},
{ label: "Upload CV", name: "upload", type:"file"},
{ label: "Period", name: "start,end", type:"daterange",value:"01-01-2010,01-01-2019"},
{ label: "Submit", name: "submit", type:"button"}
];
$("#formarea").formy("createForm", fm);
</pre>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="../dist/formy.js"></script>
<script>
var fm = [
{ label: "<h3>Enter Your Details Here</h3>", type:"titlebox", attrs:{"class":"text-center"}},
{ label: "Name", name: "name" , value:"John Doe"},
{ label: "Title", name: "title", value:"Master", type:"select", options:["Mr", "Mrs", "Miss", "Master", "Chief", "Dr"] },
{ label: "Division", name: "division", type:"select", value:2, options:[
{text:"Unspecified",name:null},
{text:"Army",name:1},
{text:"Navy",name:2},
{text:"Airforce",name:3},
] },
{ label: "Children", name:"kids", value:2, type:"select", options:[0,1,2,3,4,5,6,7] },
{ label: "Iteration", name:"iter", value:2, type:"select", options:[{name:0, text:0},{name:1, text:1},{name:2, text:2}] },
{ label: "Password", name: "pwd", type:"password", value:"What"},
{ label: "Upload CV", name: "upload", type:"file"},
{ label: "Period", name: "start,end", type:"daterange",value:"01-01-2010,01-01-2019"},
{ label: "Submit", name: "submit", type:"button"}
];
$("#formarea").formy("createForm", fm, { type: "horizontal", colratio: "1:3" });
</script>
</html>