form [qx]

form.js

// create the form
var form = new qx.ui.form.Form();

// configure the required filed message
form.getValidationManager().setRequiredFieldMessage("Fill in!");

// create the first two input fields
var firstname = new qx.ui.form.TextField();
firstname.setRequired(true);
var lastname = new qx.ui.form.TextField();
lastname.setRequired(true);

// add the first group
form.addGroupHeader("Name");
form.add(firstname, "Firstname");
form.add(lastname, "Lastname");

// add the second group
form.addGroupHeader("Contact");
form.add(new qx.ui.form.TextField(), "Email", qx.util.Validate.email());
form.add(new qx.ui.form.TextField(), "Phone");

// add a save button
var savebutton = new qx.ui.form.Button("Save");
savebutton.addListener("execute", function() {
  if (form.validate()) {
    alert("You can save now...");
  }
});
form.addButton(savebutton);

// add a reset button
var resetbutton = new qx.ui.form.Button("Reset");
resetbutton.addListener("execute", function() {
  form.reset();
});
form.addButton(resetbutton);

// create the view and add it
this.getRoot().add(new qx.ui.form.renderer.Single(form), {left: 10, top: 10});​