<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单生成器</title>
<style>
body {
margin-top: 20px;
}
.box {
font-family: Tahoma,simsun;
font-size: 12px;
border: 1px solid #2487c9;
display: table;
margin: 0 auto;
}
.box-head {
padding: 5px 20px;
background-color: #2487c9;
color: #fff;
font-size: 14px;
}
.box-body {
padding: 10px 20px;
}
.box-body th {
font-weight: normal;
vertical-align: top;
padding: 2px 5px;
cursor: pointer;
}
.box-body td {
padding-top: 2px;
padding-bottom: 8px;
}
.box-body select {
font-family: Tahoma,simsun;
font-size: 12px;
padding: 2px 5px;
cursor: pointer;
}
.box-body label {
margin-right: 5px;
cursor: pointer;
}
.box-body label input {
cursor: pointer;
}
.box-body input {
vertical-align: middle;
font-family: Tahoma,simsun;
font-size: 12px;
}
.box-body input [type=text] {padding: 2px;}
.box-body input [type=radio] {margin-top: -1px;}
.box-body input [type=submit] {padding: 4px 15px; cursor: pointer;}
</style>
</head>
<body>
<form id="form"></form>
<script src="FormBuilder.js"></script>
<script>
var elements=[
{
tag:'input',
Text:'姓名：',
attr:{type:'text',name:'user'},
option:null
},
{
tag:'input',
text:'性别：',
attr:{type:'radio',name:'gender'},
option:{m:'男',w:'女'}
},
{
tag:'input',
text:'爱好：',
attr:{type:'checkbox',name:'hobby[]'},
option:{swimming:'游泳',reading:'读书',running:'跑步'}
},
{
tag:'select',
text:'住址：',
attr:{name:'area'},
option:{'':'--请选择--',bj:'北京',sh:'深圳'}
},
{
tag:'textarea',
text:'自我介绍：',
attr:{name:'introduce',rows:'5',cols:'50'},
option:null
},
{
tag:'input',
text:'',
attr:{type:'submit',value:'提交'},
Option:null
},
];
var html=new FormBuilder(elements).create();
document.getElementById('form').innerHTML=html;
</script>
</body>
</html>
948
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
