formyx
Version:
JQuery forms plugin
61 lines (59 loc) • 2.18 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="formy.css"/>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<title>Formy @ BS</title>
</head>
<!-- This is the Source file-->
<body style='background-color:#f3f3f3'>
<div class="bs-docs-header">
<div class="container">
<h1>Formy</h1>
<h4>A simple approach to creating HTML forms with BOOTSTRAP </h4>
</div>
</div>
<div class ="container">
<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>",
name: "pin" , type:"titlebox", attrs:{"class":"text-center"}
},
{ label: "PIN", name: "pin" },
{ label: "Password", name: "pwd", type:"password"},
{ label: "Upload CV", name: "upload", type:"file"},
{ label: "Send Email", name: "email", type:"switch"},
{ label: "Period", name: "start,end", type:"daterange"},
{ 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="formy.js"></script>
<script>
var fm = [
{ label: "<h3>Enter Your Details Here</h3>", name: "pin" , type:"titlebox", attrs:{"class":"text-center"}},
{ label: "PIN", name: "pin" },
{ label: "Password", name: "pwd", type:"password"},
{ label: "Upload CV", name: "upload", type:"file"},
{ label: "Send Email", name: "email", type:"switch"},
{ label: "Period", name: "start,end", type:"daterange"},
{ label: "Submit", name: "submit", type:"button"}
];
$("#formarea").formy("createForm", fm, { type: "horizontal", colratio: "1:3" });
</script>
</html>