Допустимо ли иметь html-форму внутри другой html-формы?

действительно ли html имеет следующее:

<form action="a">
    <input.../>
    <form action="b">
        <input.../>
        <input.../>
        <input.../>
    </form>
    <input.../>
</form>

поэтому, когда вы отправляете "b", вы получаете только поля во внутренней форме. Когда вы отправляете "a", вы получаете все поля минус те, которые находятся в"b".

Если это невозможно, какие обходные пути для этой ситуации доступны?

276
html standards-compliance web-standards

11 ответов

А. это недопустимый HTML или XHTML

в официальной спецификации W3C XHTML в разделе B. "запреты элементов" говорится, что:

"form must not contain other form elements."

http://www.w3.org/TR/xhtml1/#prohibitions

Что касается старшего HTML 3.2 spec, в разделе элемента FORMS указано, что:

"любая форма должна быть заключена в элемент формы. Их может быть несколько формы в одном документе, но Элемент формы не может быть вложенным."

Б. Решение

существуют обходные пути с использованием JavaScript без необходимости вложения тегов формы.

"Как создать вложенную форму." (несмотря на название это не вложенные теги формы, но обходной путь JavaScript).

http://blog.avirtualhome.com/how-to-create-nested-forms/

Примечание: хотя можно обмануть валидаторы W3C, чтобы передать страницу, манипулируя DOM с помощью сценариев, это все еще не законный HTML. Проблема с использованием таких подходов заключается в том, что поведение вашего кода теперь не гарантируется в браузерах. (поскольку это не стандарт)

320

в случае, если кто-то найдет этот пост здесь-это отличное решение без необходимости из JS. Используйте две кнопки отправки с разными атрибутами имен проверьте язык сервера, на котором была нажата кнопка отправки, потому что только одна из них будет отправлена на сервер.

<form method="post" action="ServerFileToExecute.php">
    <input type="submit" name="save" value="Click here to save" />
    <input type="submit" name="delete" value="Click here to delete" />
</form>

серверная сторона может выглядеть примерно так, если вы используете php:

<?php
    if(isset($_POST['save']))
        echo "Stored!";
    else if(isset($_POST['delete']))
        echo "Deleted!";
    else
        echo "Action is missing!";
?>
43

HTML 4.x & HTML5 запрещает вложенные формы, но HTML5 позволит обходной путь с атрибутом "форма" ("владелец формы").

Что касается HTML 4.X вы можете:

  1. используйте дополнительную форму(ы) только со скрытыми полями и JavaScript, чтобы установить свои входные данные и отправить форму.
  2. используйте CSS, чтобы выстроить несколько HTML-форм, чтобы выглядеть как один объект , но я думаю, что это слишком сложно.
21

Как говорили другие, это недопустимый HTML.

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

13

нет, в спецификации HTML указано, что нет FORM элемент должен содержать другой FORM элемент.

7

скорее используйте пользовательский javascript-метод внутри атрибута действия формы!

например

<html>
    <head>
        <script language="javascript" type="text/javascript">
        var input1 = null;
        var input2 = null;
        function InitInputs() {
            if (input1 == null) {
                input1 = document.getElementById("input1");
            }
            if (input2 == null) {
                input2 = document.getElementById("input2");
            }

            if (input1 == null) {
                alert("input1 missing");
            }
            if (input2 == null) {
                alert("input2 missing");
            }
        }
        function myMethod1() {
            InitInputs();
            alert(input1.value + " " + input2.value);
        }
        function myMethod2() {
            InitInputs();
            alert(input1.value);
        }
        </script>
    </head>
    <body>
        <form action="javascript:myMethod1();">
            <input id="input1" type="text" />
            <input id="input2" type="text" />
            <input type="button" onclick="myMethod2()" value="myMethod2"/>
            <input type="submit" value="myMethod1" />
        </form>
    </body>
</html>
6

нет, см.W3C по

5

вы можете ответить на свой собственный вопрос очень легко, введя HTML-код в Что W3 Валидатор. (К услугам гостей текстовое поле ввода, вам даже не придется размещать свой код на сервере...)

(и нет, он не будет проверять.)

5

возможность иметь iframe внутри внешней форме. В iframe содержит внутреннюю форму. Обязательно используйте <base target="_parent" /> тег внутри тега head iframe, чтобы форма вела себя как часть главной страницы.

5

нет, это недопустимо. Но " решением "может быть создание модального окна вне формы" а", содержащего форму"в".

<div id="myModalFormB" class="modal">
    <form action="b">
        <input.../>
        <input.../>
        <input.../>
        <button type="submit">Save</button>
    </form>
</div>

<form action="a">
    <input.../>
    <a href="#myModalFormB">Open modal b </a>
    <input.../>
</form>

Это можно легко сделать, если вы используете bootstrap или материализуете css. Я делаю это, чтобы избежать использования iframe.

1

Если вам нужна ваша форма для отправки / фиксации данных в реляционную базу данных 1:M, я бы рекомендовал создать триггер "после вставки" DB в таблице A, который вставит необходимые данные для таблицы B.

0