Changes to caolan/forms

README.md

@@ -70,6 +70,38 @@ Would produce:
 You'll notice you have to provide your own form tags and submit button, its
 more flexible this way ;)
 
+If you would still like to add a form tag or a submit button, do it like so:
+
+    var forms = require('forms'),
+        fields = forms.fields,
+        widgets = forms.widgets,
+        validators = forms.validators;
+
+    var reg_form = forms.create({
+        username: fields.string({required: true}),
+        password: fields.password({required: true}),
+        confirm:  fields.password({
+            required: true,
+            validators: [validators.matchField('password')]
+        }),
+        email: fields.email(),
+        login: fields.button({
+          label: 'Login',
+          widget: widgets.button({submit: true})
+        })
+    });
+
+    reg_form.method('post');
+
+This would add:
+
+    <form method="post">
+        ...
+        <div class="field">
+            <input type="submit" name="submit" id="id_submit" value="Login" />
+        </div>
+    </form>
+
 Handling a request:
 
     function myView(req, res){

lib/fields.js

@@ -50,7 +50,7 @@ exports.string = function(opt){
     f.labelText = function(name){
         var label = this.label;
         if(!label){
-            label = name[0].toUpperCase() + name.substr(1).replace('_', ' ');
+            label = name[0].toUpperCase() + name.substr(1).replace(/_/g, ' ');
         }
         return label;
     };
@@ -139,3 +139,9 @@ exports.array = function(opt){
     };
     return f;
 };
+
+exports.button = function(opt){
+    opt = opt || {};
+    var f = exports.string(opt);
+    return f;
+};

lib/forms.js

@@ -12,6 +12,12 @@ exports.validators = require('./validators');
 exports.create = function(fields){
     var f = {
         fields: fields,
+        method: function(method){
+            f.method = method;
+        },
+        action: function(url){
+            f.action = url;
+        },
         bind: function(data){
             var b = {};
             b.toHTML = f.toHTML;
@@ -82,9 +88,19 @@ exports.create = function(fields){
         },
         toHTML: function(iterator){
             var form = this;
-            return Object.keys(form.fields).reduce(function(html, k){
+            output = Object.keys(form.fields).reduce(function(html, k){
                 return html + form.fields[k].toHTML(k, iterator);
             }, '');
+            // Add form tag if method is configured
+            var tags = '';
+            if (typeof form.method == 'string') {
+                tags = tags + ' method="' + form.method + '"';
+            }
+            if (typeof form.action == 'string') {
+                tags = tags + ' action="' + form.action + '"';
+            }
+            output = '<form' + tags + '>' + output + '</form>';
+            return output;
         }
     };
     return f;

lib/render.js

@@ -2,7 +2,7 @@ var wrapWith = function(tag){
     return function(name, field){
         var label = this.label;
         if(!label){
-            label = name[0].toUpperCase() + name.substr(1).replace('_', ' ');
+            label = name[0].toUpperCase() + name.substr(1).replace(/_/g, ' ');
         }
         var html = '<' + tag + ' class="' + field.classes().join(' ') + '">';
         if(field.widget.type == 'multipleCheckbox' ||
@@ -13,6 +13,9 @@ var wrapWith = function(tag){
                 field.widget.toHTML(name, field) +
             '</fieldset>';
         }
+        else if (field.widget.type == 'button') {
+            html += field.widget.toHTML(name, field);
+        }
         else {
             html += field.errorHTML() +
                 field.labelHTML(name, field.id) +

lib/widgets.js

@@ -193,3 +193,18 @@ exports.multipleSelect = function(opt){
     }
     return w;
 };
+
+exports.button = function(opt){
+    var opt = opt || {};
+    var w = {};
+    w.classes = opt.classes || [];
+    w.type = 'button';
+    w.toHTML = function(name, f){
+      var f = f || {};
+      var html = opt.submit ? '<input type="submit"' : '<input type="button"';
+      html += f.label ? ' value="' + f.label + '"' : ' value="Submit"';
+      html += attrs({name: name, id: f.id, classes: w.classes});
+      return html + ' />';
+    }
+    return w;
+};