Чи можна розмістити form всередині іншого form?

[ Полезный рекламный блок ]

Попробуйте свои силы в игре, где ваши навыки программирования на C# станут решающим фактором. Переходите по ссылке 🔰.

Не можна вкласти одну форму (form) в іншу форму в HTML. Розміщення однієї форми всередині іншої суперечить специфікаціям HTML і може призвести до непередбачуваної поведінки браузерів.

Якщо вам потрібно розділити форму на кілька логічних частин, є кілька альтернативних підходів:

Використовуйте кілька форм

Розділіть вашу форму на кілька окремих форм. Це дає змогу надсилати дані частинами.

<form action="/submit-part1" method="post">
    <input type="text" name="field1" placeholder="Field 1">
    <button type="submit">Submit Part 1</button>
</form>

<form action="/submit-part2" method="post">
    <input type="text" name="field2" placeholder="Field 2">
    <button type="submit">Submit Part 2</button>
</form>

<button type="submit">Submit Part 1</button>

</form>

<button type="submit">Submit Part 2</button>

</form>

Використовуйте поля set

Поле <fieldset> дає змогу групувати елементи форми разом із заголовком, використовуючи <legend>:

<form action="/submit" method="post">
    <fieldset>
        <legend>Part 1</legend>
        <input type="text" name="field1" placeholder="Field 1">
    </fieldset>

    <fieldset>
        <legend>Part 2</legend>
        <input type="text" name="field2" placeholder="Field 2">
    </fieldset>

    <button type="submit">Submit All</button>
</form>

</fieldset>

</fieldset>

<button type="submit">Submit All</button>

</form>

Використовуйте JavaScript для динамічного надсилання даних

Ви можете використовувати JavaScript, щоб надіслати дані форми частинами:

<form id="mainForm" action="/submit" method="post">
    <div id="part1">
        <input type="text" name="field1" placeholder="Field 1">
        <button type="button" onclick="submitPart1()">Submit Part 1</button>
    </div>

    <div id="part2">
        <input type="text" name="field2" placeholder="Field 2">
        <button type="button" onclick="submitPart2()">Submit Part 2</button>
    </div>

    <button type="submit">Submit All</button>
</form>

<script>
    function submitPart1() {
        const form = document.getElementById('mainForm');
        const part1Data = new FormData();
        part1Data.append('field1', form.field1.value);
        
        fetch('/submit-part1', {
            method: 'POST',
            body: part1Data
        }).then(response => {
            // Handle the response
        });
    }

    function submitPart2() {
        const form = document.getElementById('mainForm');
        const part2Data = new FormData();
        part2Data.append('field2', form.field2.value);
        
        fetch('/submit-part2', {
            method: 'POST',
            body: part2Data
        }).then(response => {
            // Handle the response
        });
    }
</script>