Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="aform demo">
  <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
  <script src="http://xiehuiqi220.github.io/AForm/aform.js"></script>
  <script src="http://xiehuiqi220.github.io/AForm/aform.css"></script>
  <title>JS Bin</title>
</head>
<body>
<form id="target"></form>
</body>
</html>
 
.aform {
    margin:10px 30px;
}
.aform.form-horizontal fieldset .form-control {
    display:inline;
    width:auto;
}
.aform table .form-group {
    margin-left:0px;
    margin-right:0px;
}
.aform table .form-control {
    width:70%
}
​
 
AForm.Config.extClassName.basicContainer = "form-group";
AForm.Config.extClassName.table = "table table-bordered";
AForm.Config.extClassName.control = "form-control";
​
var af = new AForm("target",{
    className:"form-horizontal",
    schemaMode:"local",
    fields:{
        "name":{label:"姓名"},
        "age":{label:"年龄",required:true,type:"number"},
        "sex":{label:"性别",type:"select",datalist:[{value:"m",text:"男"},{value:"f",text:"女"}]},
        "education":{label:"教育经历",jtype:"Array",fields:{
            school:{label:"学校"}
        }}
    }
});
af.render({
    "name": "张二狗",
    "age": 2,
    "sex":"m",
    "education":[{
        school:"中国理工大学"
    },{
        school:"中国文化大学"
    }]
});
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
xiehuiqi220pro
0viewers