User form example

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="https://raw.github.com/powmedia/backbone-forms/master/distribution/backbone-forms.js"></script>
<script src="https://raw.github.com/powmedia/backbone-forms/master/distribution/editors/list.js"></script>
<!DOCTYPE html>
<html>

<head>

</head>
<body>
<div id="test">

</div>

</body>
</html>

CSS

/* STYLES FROM BACKBONE-FORMS DEFAULT TEMPLATE */
/* Form */
.bbf-form {
  margin: 0;
  padding: 0;
  border: none;
}


/* Field */
.bbf-field {
  margin: 1em 0;
  list-style-type: none;
  position: relative;
  clear: both;
}

  .bbf-field label {
    float: left;
    width: 25%;
  }
  
  .bbf-field .bbf-editor {
    margin-left: 25%;
    width: 74%;
  }
      
    .bbf-field input, .bbf-field textarea, .bbf-field select {
      width: 100%;
    }
  
  .bbf-field .bbf-help {
    margin-left: 25%;
    width: 74%;
    color: #999;
  }

  .bbf-field.bbf-error .bbf-editor {
    outline: 1px solid red;
  }


/* Radio */
.bbf-radio {
  list-style-type: none;
}

  .bbf-radio input {
    width: auto;
  }

  .bbf-radio label {
    float: none;
  }


/* Checkboxes */
.bbf-checkboxes {
  list-style-type: none;
}

  .bbf-checkboxes input {
    width: auto;
  }

  .bbf-checkboxes label {
    float: none;
  }


/* List */
.bbf-list ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

  .bbf-list .bbf-error {
    border: 1px solid red;
  }

  .bbf-list li {
    clear: both;
    width: 100%;
  }

    .bbf-list li .bbf-editor-container {
      margin-right: 2em;
    }

    .bbf-list li .bbf-remove {
      float: right;
      width: 2em;
    }

.bbf-list .bbf-actions {
  text-align: center;
  clear: both;
}

/* List.Modal */
.bbf-list-modal {
  cursor: pointer;
  border: 1px solid #ccc;
  width: 208px;
  border-radius: 3px;
  padding: 4px;
  color: #555;
}



/* Date */
.bbf-date .bbf-date {
  width: 4em;
}

.bbf-date .bbf-month {
  width: 9em;
}

.bbf-date .bbf-year {
  width: 6em;
}


/* DateTime */
.bbf-datetime .bbf-date-container {
  float: left;
  margin-right: 1em;
}

.bbf-datetime select {
  width: 4em;
}

JavaScript

$(function() {
    var User = Backbone.Model.extend({
        schema: {
            title:      { type: 'Select', options: ['', 'Mr', 'Mrs', 'Ms'] },
            name:       'Text',
            email:      { validators: ['required', 'email'] },
            birthday:   'Date',
            password:   'Password',
            notes:      { type: 'List', listType: 'Text' }
        }
    });
    
    var user = new User({
        title: 'Mr',
        name: 'Sterling Archer',
        email: '[email protected]',
        birthday: new Date(1978, 6, 12),
        password: 'dangerzone',
        notes: [
            'Buy new turtleneck',
            'Call Woodhouse',
            'Buy booze'
        ]
    });
    
    var form = new Backbone.Form({
        model: user
    }).render();
    
    $('body').append(form.el);
});