[QUESTION] Why are certain elements restricted to the form tag?

[timsim00]

I realize it's not a hard requirement and can be customized, but the main demo and some cloned apps carry this idea forward in restricting certain elements (input, textarea, etc) from being dropped anywhere but a form tag.

Was this introduced to show that it can be done or is there something else I'm missing?

[pouyamiralayi]

once i had a use case that was working with a third party component library. in that library the input and form components was available, but the rendering logic was implemented in a way that if input was not placed in the form tag, styles specific to rendering the input tag will not make any effects. so you would end up having an ugly input. so i had to restrict the users from dropping inputs anywhere beside the form tag. as an example check this famous library approach similar to this case: f7 cheers.

[artf]

@timsim00 technically you're totally free to reset this logic. I've set this up just because in HTML and CSS world (no JS) having input without a form wrapper it doesn't make sense. So, for example, let's take the input component. In grapesjs-plugin-forms the input component has this property draggable: 'form, form *',. To make it draggable anywhere you would just need this code

editor.DomComponents.addType('input', {
    model: {
        defaults: { draggable: true }
    }
})

To make it work properly, place it in a plugin and load it after grapesjs-plugin-forms