Feature Request

(originally posted in #2791, that issue was based on mixed (on owning div / form tag directly) .form() usage, this issue is feature request to fix the support natively and allow .form() to be used on the owning div with (self closed/empty) form tag inside)

Nested forms theory and current Fomantic-UI impl.

please see atk4/ui#1275

Nesting html

tags is not possible, hovewer they can be closed immediatelly and linked with the input controls/tags, see https://stackoverflow.com/questions/3430214/form-inside-a-form-is-that-alright#21900324

forms spec: https://www.w3.org/TR/html52/sec-forms.html

In atk4/ui all html forms code look like <div id="fff"><form id="fff_form"></form><input form="fff_form"> to overcome the form tag limitation and allow form nesting. This is the only possible solution per html forms spec.

In atk4/ui I tried to fix all JS .form() calls to be done on form tag ($('fff_form').form( instead of $('fff').form() but this is not working with Fomantic-UI as well, as:

a) success class is not added to the owning form div (with id fff) causing all success messages to be hidden
b) $('fff_form').form('add prompt', ...) errors with Form: Field identifier email1 not found

So calling .form() on a form tag is not a solution either.

Looking into https://github.com/fomantic/Fomantic-UI/blob/develop/src/definitions/behaviors/form.js code Fomantic-UI simply expects all form components to be a contained in the module element.

Current atk4/ui impl./usage

In atk4/ui#1275 I found some sweet spot to do some .form() calls on the owning div and some on the form tag directly:

• https://github.com/atk4/ui/blob/97515e971970649a9590879b3c0e10a226205d16/src/Form.php#L549 (form initialized on the owning div causing this issue)
• https://github.com/atk4/ui/blob/97515e971970649a9590879b3c0e10a226205d16/src/Form.php#L551 (form api processing on the form tag directly)
• https://github.com/atk4/ui/blob/97515e971970649a9590879b3c0e10a226205d16/src/Form.php#L171 (hack needed because of this back, should be not needed)
• https://github.com/atk4/ui/blob/97515e971970649a9590879b3c0e10a226205d16/src/Form.php#L300 (add prompt on the owning div)

This is obviously a hack. As Fomantic-UI module expects the module to be a parent of all form subviews, I propose to fix the nested forms (via official/W3 immediately self closing form tag) support by:

a) allow to specify the form element selector explicitly
b) if the selector is not specified, locate&use the first form tag relative/within the module
c) if the explicitly passed element is not a form tag or no form tag was found, emit an error