表单生成器

body{margin-top:20px;}

.box{font-family:Tahoma,simsun;font-size:12px;border:1px solid #1678BE;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-top:5px;}

.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;}

(function(window) {

var FormBuilder = function(data) {

this.data = data;

};

FormBuilder.prototype.create = function() {

var html = '';

for (var k in this.data) {

var item = {tag: '', text: '', attr: {}, option: null};

for (var n in this.data[k]) {

item[n] = this.data[k][n];

}

html += builder.toHTML(item);

}

return '

';

};

var builder = {

toHTML: function(obj) {

var html = this.item[obj.tag](this.attr(obj.attr), obj.option);

return '

' + obj.text + '' + html + '';

},

attr: function(attr) {

var html = '';

for(var k in attr) {

html += k + '="' + attr[k] + '" ';

}

return html;

},

item: {

input: function(attr, option) {

var html = '';

if (option === null) {

html += '';

} else {

for (var k in option) {

html += '' + option[k] + '';

}

}

return html;

},

select: function(attr, option) {

var html = '';

for (var k in option) {

html += '' + option[k] + '';

}

return '' + html + '';

},

textarea: function(attr) {

return '';

}

}

};

window.FormBuilder = FormBuilder;

})(window);

var elements = [

{tag: 'input', text: '姓名', attr: {type: 'text', name: 'user'}},

{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: '上海', sz: '深圳'}},

{tag: 'textarea', text: '自我介绍', attr: {name: 'introduce', cols:'50', rows: '5'}},

{tag: 'input', attr: {type: 'submit', value: '提交'}}

];

document.getElementById('form').innerHTML = new FormBuilder(elements).create();

• 返回

一键复制

编辑

Web IDE

原始数据

按行查看

历史