PrimeFaces Layout and h:form - html

Question

The Primefaces Documentation states that the following code will be invalid due to the fact that every layoutUnit needs its own form:
<p:layout fullPage="true">
<h:form>
<p:layoutUnit position="north">
<p:inputText value="#{testBean.input1}" />
</p:layoutUnit>
<p:layoutUnit position="center">
<p:inputText value="#{testBean.input2}" />
<p:commandButton value="save" action="#{testBean.save}" />
</p:layoutUnit>
<p:layoutUnit position="south">
<p:inputText value="#{testBean.input3}" />
</p:layoutUnit>
</h:form>
</p:layout>
However, when I nest p:layout inside of a form, the code works without any problem:
<h:form>
<p:layout fullPage="true">
<p:layoutUnit position="north">
<p:inputText value="#{testBean.input1}" />
</p:layoutUnit>
<p:layoutUnit position="center">
<p:inputText value="#{testBean.input2}" />
<p:commandButton value="save" action="#{testBean.save}" />
</p:layoutUnit>
<p:layoutUnit position="south">
<p:inputText value="#{testBean.input3}" />
</p:layoutUnit>
</p:layout>
</h:form>
What is the explanation for that behaviour? Can my approach of having just a single form tag outside of p:layout cause problems at some time point?

Answer 1

The PrimeFaces documentation does indeed state on Page 309 of the 6.1 documentation
When working with forms and full page layout, avoid using a form that contains layoutunits as generated dom may not be the same. So following is
invalid.
And in that they reference your first example. It is technically not invalid but due to the way the layout component renders the html needed in the browser (and maybe client-side does dom manipulation) to get the good full page experience, it might (will? never tried it myself) result in unexpected behaviour.
They also state
A layout unit must have it’s own form instead, also avoid trying to update layout units because of same reason, update it’s content instead.
'Must have' (emphasis above is mine) is to strong here, they'd better have stated
give each layout unit its own form if a form is needed in the layout unit.
A full form around the full page layout might work now assuming the layout will not mess with things and e.g. add parts to the surrounding body tag (if it does do dom manipulation to achieve a certain behaviour), but I doubt they'd give you guarantees. An additional reason to not do it like you ask might be that you can run into nested forms when developers of 'partial pages' a not fully aware of the 'god form'. So I would advise against it.
So if e.g. the north and south layoutunit contain sort of fixed functionality (header with search, footer with some features) then put a h:form directly in the layout unit. If the center part contains dynamic things e.g. a ui:include, put the `h:form in the included parts.
See also:
How to use <h:form> in JSF page? Single form? Multiple forms? Nested forms?
How to ajax-refresh dynamic include content by navigation menu? (JSF SPA)