Tobago supports nested forms and can treat each form separately. Values can be stored separately into the model, while already filled input elements keep their values (temporarily). Forms are added by the `<tc:form/>` tag.

Forms are also relevant for .

This small example contain two separate forms, each surrounded by a content box. The submit button only update the model in the current form.

<tc:box label="Form 1"> <tc:form> <tc:in label="Value 1" value="\#{formController.value1}"/> <tc:out label="Value 1 in Model" value="\#{formController.value1}"/> <tc:button label="Submit"/> </tc:form> </tc:box> <tc:box label="Form 2"> ... </tc:box>

If the validation of a form is activated and the actual value of this form is only stored temporarily, the validation is deactivated until the value is definitely stored into the model.

For example, if only the value in 'Inner Form 1' is set, the validation of the other forms are turned off.

Every form in this example is surrounded by a content box. The submit buttons in the inner forms only put the inner value into the model. The submit button in the outer form put all values into the model. The validation for the inner value 2 and for the outer value is activated, both fields are required.

<tc:box label="Outer Form"> <tc:form> <tc:box label="Inner Form 1"> <tc:form> <tc:in label="Inner Value 1"/> <tc:out label="Inner Value 1 in Model"/> <tc:button label="Submit"/> </tc:form> </tc:box> <tc:box label="Inner Form 2"> ... </tc:box> <tc:separator/> <tc:in label="Outer Value" required="true"/> <tc:out label="Outer Value in Model"/> <tc:button label="Submit"/> </tc:form> </tc:box>

The `<f:ajax execute="..." render="..."/>` tag ignore the `<tc:form>` tag. The form is only used as a naming container.

The structure of this example is similar to the example. Every form in this example is surrounded by a content box. The submit buttons in the inner forms only put the inner value into the model. The submit button in the outer form put all values into the model. The validation for the inner value 2 and for the outer value is activated, both fields are required.

There are also two more submit buttons in the outer form. The 'Inner Forms' button submit both values in the inner forms. The 'Outer Value' button only submit the outer value. Please notice, that all buttons use the `<f:ajax execute="..." render="..."/>` tag.

Also note, that the `<tc:message/>` tag has to be rerendered to show error messages.

<tc:box label="Outer Form"> <tc:form> <tc:box label="Inner Form 1"> <tc:form> <tc:in label="Inner Value 1"/> <tc:out label="Inner Value 1 in Model"/> <tc:button label="Submit"> <f:ajax execute="in" render="in out :page:messages"/> </tc:button> </tc:form> </tc:box> <tc:box label="Inner Form 2"> ... </tc:box> <tc:separator/> <tc:in label="Outer Value" required="true"/> <tc:out label="Outer Value in Model"/> <tc:button label="Submit"> <f:ajax execute="::form1:in ::form2:in in" render="::form1:in ::form2:in in ::form1:out ::form2:out out :page:messages"/> </tc:button> ... </tc:form> </tc:box> Submit only: