Отображение элемента рядом с другим из разных частей дерева DOM

Question

У меня есть две формы, одна большая и одна поменьше. Я хотел бы отобразить меньшую форму рядом с указанным c вводом большей формы. Недопустимо html встраивать одну форму в другую в DOM, но есть ли способ отобразить одну форму поверх / внутри другой формы рядом с указанным c вводом, используя CSS или JS?

<!-- Main Form -->
<form action="action1" method="post">
    Name <input type="text" name="name" value="">
    Job Title <input type="text" name="job_title" value="">
    Cell Number <input type="tel" name="mobile" value=""> <!-- SMALLER FORM SHOULD DISPLAY NEXT TO CELL # INPUT -->
    Favorite Sport <input type="text" name="favorite_sport" value="">
    Hobbies <input type="text" name="hobbies" value="">
    <input type="submit" value="Save">
</form>

<!-- Smaller form loaded via js -->
<form id="optin_js_loaded_form"></form>

<!-- js -->
<script src="external_js_library.js"></script>
<script>
    // js code to load form into #optin_js_loaded_form using external_js_library.js
</script>

ПРИМЕЧАНИЯ

• Формы должны быть отделены друг от друга, поскольку форма меньшего размера создается из внешней библиотеки js из службы маркетинга.
• Я знаю, что мог бы сделать данные из более крупной формы отправкой через ajax, но я надеюсь, что смогу сохранить некоторую работу, просто изменив место отображения меньшей формы.

РЕДАКТИРОВАТЬ 2020-02-05 14: 40

Нашел веб-страницу, которая предлагает некоторые возможные решения, но не дает много указаний о том, как их реализовать. https://discourse.wicg.io/t/position-an-element-relatively-to-another-element-from-anywhere-in-the-dom/968

Answer 1

Вы можете использовать атрибут form , чтобы избежать вложения элементов form. Вы перемещаете элементы управления из главной формы за пределы этого элемента формы и добавляете атрибут form ко всем из них.

Теперь вы можете поместить небольшую форму в нужное положение, не нарушая HTML правило, что form элементы не должны быть вложенными.

Вам все равно нужно применить немного CSS к этому элементу малой формы, чтобы он не перемещался влево. Может быть полезно что-то вроде display: inline-block или подобное.

Вот рекомендуемая HTML часть:

<form id="mainform" action="action1" method="post"></form>
<div>
    Name <input type="text" name="name" form="mainform" value="">
    Job Title <input type="text" name="job_title" form="mainform" value="">
    Cell Number <input type="tel" name="mobile" form="mainform" value="">
        <!-- Smaller form loaded via js -->
        <form id="optin_js_loaded_form">
        </form>
    Favorite Sport <input type="text" name="favorite_sport" form="mainform" value="">
    Hobbies <input type="text" name="hobbies" form="mainform" value="">
    <input type="submit" form="mainform" value="Save">
</div>