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

331

Это действительно HTML, чтобы иметь следующее:

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

Поэтому, когда вы отправляете «b», вы получаете только поля во внутренней форме. Когда вы отправляете «а», вы получаете все поля, кроме «б».

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

html web-standards standards-compliance allyourcode
источник
28
Мне кажется, что это на самом деле очень распространенная потребность, которая знакома по интерфейсам БД. Если форма обновляет таблицу А, и эта таблица имеет поле, связанное с таблицей В, нам часто требуется способ обновить или создать записи для этого связанное поле, не покидая текущей формы. Вложенные подформы были бы очень интуитивным способом сделать это (и реализован ли пользовательский интерфейс несколькими настольными базами данных).
monotasker
3
Это не действительно. Есть обходные пути, но вы должны использовать другой метод для получения этих данных. Рассмотрим одну форму, отправляющую все данные в почтовый скрипт PHP, который затем отправляет часть (часть из а) как одно электронное письмо, а часть (часть из б) как другое письмо. Или в базу данных, или что вы делаете с этими данными. Вложенные формы могут быть сделаны, но это НЕ ответ!
2
возможный дубликат Можете ли вы вложить HTML формы?
пользователь
Вопрос хороший, но быстрый поиск в Google (даже без щелчка по предоставленным ссылкам) показывает, действительны ли формы в формах или нет. Мне лично понравился ответ @Andreas.
Джаретт Ллойд

Ответы:

380

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. В одном документе может быть несколько форм, но элемент FORM не может быть вложенным».

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

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

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

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

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

GeneQ
источник
4
Смотрите мой комментарий выше .... Это прекрасный ответ, отличный обходной путь, но ужасная практика. Вы можете сделать то же самое с меньшими хлопотами, отправив все данные в скрипт PHP, а затем разделив их и отправив по своему адресу. Хотя вы и ответили на вопрос, который великолепен, это просто плохая и бессмысленная практика, потому что вы можете сделать это правильно за меньшее время.
53

В случае, если кто-то найдет этот пост здесь - отличное решение без необходимости использования 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!";
?>
Andreas
источник
Это не одно и то же, в этом случае вы хотите перейти на одну и ту же страницу и выполнить разные действия, с помощью двух форм вы можете перейти на разные страницы и / или получать разную информацию в каждом случае.
Луис Теллез
Вы можете использовать php-файл в качестве оболочки и включать любой файл, который вы хотите, если вы хотите код в разных файлах. Таким образом, вместо (эхо «сохранено!»;) Вы можете написать (включая «a.php»;)
Андреас
У меня есть несколько кнопок удаления в моей форме (причина, по которой я пришел сюда с учетом вложенной формы) 1 для каждой записи и флажок списка на каждой, чтобы выполнить массовое удаление. Ваш ответ побудил меня переосмыслить свой план, и теперь я думаю, что я должен назвать кнопки для отдельного удаления с числовым идентификатором и массовым удалением. Я сделаю php сделать сортировку.
Крис
@ Андреас на деньги. Это естественное решение для изменения интерпретации ввода формы. Если вы используете Post / Redirect / Get, то назначение может также отличаться. Однако, если у вас нет гибкости на стороне сервера для объединения ваших действий в единую конечную точку 'aORb', то я думаю, что вы застряли с хаком, я боюсь.
27

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

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

  1. Используйте дополнительные формы с только скрытыми полями и JavaScript, чтобы установить входные данные и отправить форму.
  2. Используйте CSS, чтобы выстроить несколько HTML-форм, чтобы они выглядели как единое целое, но я думаю, что это слишком сложно.
Ниши
источник
1
Не уверен, почему за это проголосовали. Вот ссылка на раздел W3C владельцев форм: w3.org/TR/html5/…
SooDesuNe
5
@SooDesuNe ваша ссылка устарела, вот новая w3.org/TR/html5/forms.html#form-owner
chiliNUT
13

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

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

user64075
источник
1
Это то, что я думал, мне понадобится для моего сайта, но мне очень нравится пример того, как это сделать.
Брайан Петерсон
8

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

Дэвид Грант
источник
5

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

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

Кристиан Студер
источник
5

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

например

<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>
Андреас Нидермаир
источник
5

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

Робин Маноли
источник
1

Нет, это недействительно. Но «решением» может быть создание модального окна вне формы «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.

Джонатас Гортензия
источник
0

Обход без JavaScript для вложения тегов формы:

Потому что вы позволяете

все поля минус те, которые находятся внутри "b".

при отправке «а» будет работать следующее, используя обычные веб-формы без хитрых трюков JavaScript:

Шаг 1. Разместите каждую форму на своей веб-странице.

Шаг 2. Вставьте iframe везде, где вы хотите, чтобы эта подформа появлялась.

Шаг 3. Прибыль.

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

ADJenks
источник
-1

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

cbWrites
источник
-2

Нет, это недопустимо, но вы можете обмануть свою внутреннюю позицию в форме 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>

Дайте вашему контейнеру div немного стабильной высоты

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

Спасибо трюк позиции "other_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>

PS: Вам придется играть с числами, чтобы они выглядели красиво.

Ярослав Вархол
источник