See More About:

Dynamic JavaScript Forms

Get the Form Object

More of this Feature

Now that you know how to use the Form object all that remains is to copy the Form object code from the textarea below and save it into a JavaScript file on your site. You then link this script as well as the code that you have built to call it into your web page so that it gets run after the part of the page where you are adding the form has been loaded.

// JavaScript Form Generator
// copyright Stephen Chapman 21st June 2008
// http://javascript.about.com
// You are granted permission to use this script
// provided that the code including these comments
// is used exactly as supplied
function Form(a, m, e, txt) {this.F = document.createElement("form"); this.F.action = a; this.F.method = m; if (e != '') this.F.enctype = e; this.fld = document.createElement("fieldset"); var t = document.createTextNode(txt); var l = document.createElement("legend"); l.appendChild(t); this.fld.appendChild(l);} Form.prototype.addInput = function(tx, l, n, v, st) {switch(tx) {case 'text': case 'radio': case 'checkbox': case 'submit': case 'button': var d = document.createElement("div"); var t = document.createTextNode(l+' '); var lab = document.createElement("label"); lab.appendChild(t); /*@cc_on @if (@_jscript) var inp = document.createElement("<input name='"+n+"'>"); @else */ var inp = document.createElement("input"); inp.name = n; /* @end @*/ inp.type = tx; if (tx == 'radio') {if (this.n != +this.n) this.n = 0; this.n++; n+= this.n;} inp.id = n; lab.htmlFor = n; inp.value = v; if (st.match(/c/i)) inp.checked = true; if (st.match(/d/i)) inp.disabled = true; if (st.match(/r/i)) inp.readOnly = true; if (tx == 'radio' || tx == 'checkbox') {d.appendChild(inp); d.appendChild(lab); } else {d.appendChild(lab); d.appendChild(inp);} this.fld.appendChild(d); break; default:}}; Form.prototype.addTextarea = function(l, n, v, st) {var d = document.createElement("div"); var t = document.createTextNode(l+' '); var lab = document.createElement("label"); lab.appendChild(t); /*@cc_on @if (@_jscript) var inp = document.createElement("<textarea name='"+n+"'>"); @else */ var inp = document.createElement("textarea"); inp.name = n; /* @end @*/ inp.id = n; var c = document.createTextNode(v); inp.appendChild(c); if (st.match(/d/i))  inp.disabled = true; if (st.match(/r/i)) inp.readOnly = true; d.appendChild(lab); d.appendChild(inp); this.fld.appendChild(d);}; Form.prototype.addHidden = function(n, v) {/*@cc_on @if (@_jscript) var inp = document.createElement("<input name='"+n+"'>"); @else */ var inp = document.createElement("input"); inp.name = n; /* @end @*/ inp.type = 'hidden'; inp.id = n; inp.value = v; this.fld.appendChild(inp);}; Form.prototype.addSelect = function(l,n,sz,opt,st) {var d = document.createElement("div"); var t = document.createTextNode(l+' '); var lab = document.createElement("label"); lab.appendChild(t); /*@cc_on @if (@_jscript) var inp = document.createElement("<select name='"+n+"'>"); @else */ var inp = document.createElement("select"); inp.name = n; /* @end @*/ inp.id = n; lab.htmlFor = n; for (i = 0; i < opt.length; i++) {inp.options[i] = new Option(opt[i][0],opt[i][1]); if (opt[i][2].match(/d/i)) inp.options[i].disabled = true; if (opt[i][2].match(/s/i)) inp.options[i].selected = true;} if (st.match(/d/i)) inp.disabled = true; if (st.match(/m/i)) {inp.multiple = true; if (sz == 1) sz = '';} if (sz != '') inp.size=sz; d.appendChild(lab); d.appendChild(inp); this.fld.appendChild(d);}; Form.prototype.addForm = function(i) {this.F.appendChild(this.fld); document.getElementById(i).appendChild(this.F);};

Guide since 2004

Stephen Chapman
JavaScript Guide

Sign up for my Newsletter

About.com Special Features

Family Tech Center

Stay connected and entertained with reviews on tips on the latest HDTVs, cellphones and more. More >

Connect Your Home Computers

Easy ways to connect two computers for networking purposes. More >

JavaScript