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

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

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

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

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

Ответы

Ответ 1

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

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

"form must not contain other form elements."

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

Что касается более старой спецификации HTML 3.2, раздел элемента FORMS гласит:

"Каждая форма должна быть заключена в Элемент ФОРМА. Там может быть несколько формы в одном документе, но Элемент FORM не может быть вложенным. "

Б. Обходной путь

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

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

Ответы на этот вопрос Кару

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

Ответ 2

В случае, если кто-то найдет этот пост, это отличное решение без необходимости 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!";
?>

Ответ 3

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

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

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

Ответ 4

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

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

Ответ 5

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

Ответ 6

скорее используйте собственный 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>

Ответ 7

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

(И нет, это не будет подтверждено.)

Ответ 8

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

Ответ 9

нет, см. w3c

Ответ 10

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

<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.

Ответ 11

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

Ответ 12

Нет, это недопустимо, но вы можете изменить свою внутреннюю позицию на HTML с помощью CSS и jQuery. Сначала создайте некоторый контейнерный div внутри вашей родительской формы, а затем в любом другом месте на странице div с вашей дочерней (внутренней) формой:

<form action="a">
    <input.../>
    <div class="row" id="other_form_container"></div>
    <input.../>
</form>

....

<div class="row" id="other_form">
    <form action="b">
        <input.../>
        <input.../>
        <input.../>
    </form>
</div>

....

<script>
  $(document).ready(function() {
    var pos = $("#other_form_container").position();
    $("#other_form").css({
      position: "absolute",
      top: pos.top - 40,
      left: pos.left + 7,
      width: 500,
    }).show();
  });
</script>

....

<style>
  #other_form_container {
    height:90px;
    position:relative;
  }
</style>

Ответ 13

Даже если это разрешено (а это не так), он создает очень запутанный пользовательский интерфейс.

Для пользователя форма представляет собой форму, и вы не должны изменять ее, если вы не хотите добавить путаницу.