JavaScript:表单生成器

表单属性有姓名、性别、爱好、地址、自我介绍。

<body><form id="form"></form><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', clos: '50' },option: null},{tag: 'input',text: '',attr: { type: 'submit', value: '提交' },option: null}];function FormBuidder(data) {this.data = data;// return this.data;}FormBuidder.prototype.create = function () {var html = '';for (var k in this.data) {var item = { tag: ' ', text: ' ', attr: {}, option: {} };for (var n in this.data[k]) {item[n] = this.data[k][n];}html += builder.toHTML(item);//  console.log(item);}// console.log(html)return '<table>' + html + '</table>';}var builder = {toHTML: function (obj) {// console.log(obj.attr);var html = this.item[obj.tag](this.attr(obj.attr), obj.option)return '<tr><th>' + obj.text + '</th><td>' + html + '</td></tr>';},attr: function (attr) {var html = '';for (var k in attr) {html += k + '="' + attr[k] + '"';}return html;},item: {input: function (attr, option) {// console.log(attr);var html = '';if (option === null) {html += '<input ' + attr + '>'} else {for (var k in option) {html += '<lable><input ' + attr + 'value = "' + k + '"' + '>';html += option[k] + ' </lable>';}}return html;},select: function (attr, option) {var html = '';for (var k in option) {html += '<option value="' + k + '">' + option[k] + '</option>';}return '<select ' + attr + '>' + html + '</select>';},textarea: function (attr) {return '<textarea ' + attr + '></textarea>';}}};var fn = new FormBuidder(elements);var html = fn.create();document.getElementById('form').innerHTML = html;</script></body>

运行效果：

JavaScript:表单生成器相关推荐

JavaScript表单生成器
目录介绍使用程序表格展示数据控制处理控件和事件提交表格时在新页面中提交高级使用可移动形式注意下载源代码和文档 - 2.15 MB 自己试试介绍这篇文章是关于一个用于创建和管理 ...
JavaScript 表单与表单验证
JavaScript 表单 JavaScript 表单验证 HTML 表单验证可以通过 JavaScript 来完成. 以下实例代码用于判断表单字段(fname)值是否存在,如果存在,则弹出信息,否则 ...
javascript 表单验证大全（一）
javascript 表单验证大全(一) 5.身份证验证:包括15位和18位.function idNumber(s)//身份证验证 {regu1=/^[1-9]\d{7}((0\d)|(1[0-2] ...
10个强大的Javascript表单验证插件推荐
创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计.开发与测试等等环节.实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的.本文介绍了10个不错的JavaScri ...
用php实现一个简易的web表单生成器,PHP—Web表单生成器
1.实例: 2. 需求分析在项目的实际开发中,经常需要设计各种各样表单.直接编写HTML表单虽然简单,但修改.维护相对麻烦. 因此,可以利用PHP实现一个Web表单生成器,使其可以根据具体的需求定制 ...
html表单验证js代码,JavaScript表单验证实现代码
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证 JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输 ...
createform用法_vue自定义表单生成器form-create使用详解
介绍 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue 组件.结合内置17种常用表单组件和自定义组件,再复杂的表单都可 ...
用php实现一个简易的web表单生成器,网络编程PHP Web表单生成器案例分析
本文实例讲述了PHP Web表单生成器.分享给大家供大家参考,具体如下: 1.实例: 2. 需求分析在项目的实际开发中,经常需要设计各种各样表单.直接编写HTML表单虽然简单,但修改.维护相对麻烦. ...
js html form,JavaScript 表单
JavaScript 表单 JavaScript 表单验证 HTML 表单验证可以通过 JavaScript 来完成. 以下实例代码用于判断表单字段(fname)值是否存在, 如果不存在,就弹出信息, ...

JavaScript:表单生成器

JavaScript:表单生成器相关推荐

最新文章

热门文章