Question

I have several forms loaded via AJAX so to avoid nested forms I want to use some select and checkbox selectors here and there to trigger some jquery actions but not inside a form element. Something like:

<div>
[select]    [checkbox]
    [form via ajax][/form]
[select]    [checkbox]
    [form via ajax][/form]
[select]    [checkbox]
</div>

Seems work well in firefox and chrome but is it really a legal practice? THX.-

Answer 1

Assuming I’ve understood your question correctly, it’s completely fine to have form controls outside of a <form> tag. The HTML 4.01 spec states this:

The elements used to create controls generally appear inside a FORM
element, but may also appear outside of a FORM element declaration
when they are used to build user interfaces.

However, form controls outside of a form tag are not what the spec calls “successful controls”, which means they cannot be submitted along with a form (fairly obviously).

The section of the spec on intrinsic events goes on to state the following:

Control elements such as INPUT, SELECT, BUTTON, TEXTAREA, and LABEL
all respond to certain intrinsic events. When these elements do not
appear within a form, they may be used to augment the graphical user
interface of the document.

For instance, authors may want to include press buttons in their
documents that do not submit a form but still communicate with a
server when they are activated.

That seems to be pretty much exactly the sort of thing you’re doing, so yes, it’s completely valid to do it.