JSFiddle - React, Tailwind, and code Playground

by Chase Wilson

CSS

form.form {border: 1px #ccc solid; padding: 5px;font: 14px/16px "Helvetica Neue","Helvetica","Arial";}
div.field {padding: 5px;overflow: hidden;}
label.label {padding:0px 10px 0 0; display: block; float: left; width: 80px;}

JavaScript

window.Checkers = new Class({
  isObject: function(someVar){
    return (typeOf(someVar) == 'object')?true:this.throwError("You best be feeding me only Objects.");
  },
  
  throwError: function(msg){
    throw new Error(msg);
  }
});

if(!window.Form) { var Form = {};}

Form.Builder = new Class({
    Implements: [Options, Events,Checkers],
    options:{},
    
    initialize: function(options){
      this.setOptions(options);
      this.form = new Element('form',{"class":"form"});
      this.form.set(options);
    },
    
    add: function(type,options){
      if(!this.isObject(options)) return false;
      this.form.grab(new Form[type.capitalize()](options));
      //this['add'+type.capitalize()](options);
    },
    toElement:function(){
        return this.form;
    }
});

Form.Field = function(options){
    var wrapper = this.wrapper = new Element('div',{
      "class": "field"
    });
    
    var label = this.label = new Element('label',{
      "class":"label",
      "html": "<span>"+options.label+"</span>",
      "for": options.name
    }).inject(wrapper);
    
    var input = this.input = new Element('input',{
      "class":"input",
      "name": options.name,
      "type":options.type,
      "value":options.value
    }).inject(wrapper);
        
    return this.wrapper;
}
    

window.addEvent('domready',function(){
  var Builder = new Form.Builder({
    action:"index.php"
  });
  
  Builder.add('field',{
    label: "First Name",
    type:"text",
    name: "first-name"
  });
  
  Builder.add('field',{
    label: "Last Name",
    type:"text",
    name: "last-name"
  });

  Builder.add('field',{
    label: "Email",
    type:"text",
    name: "email"
  });

  Builder.add('field',{
    label: "Action",
    type:"submit",
    name: "submit",
    value: "submit"
  });
  
  var body = document.getElementsByTagName('body')[0];
  $(Builder).inject($(body));
  
});