Можете ли вы вложить HTML формы?

Можно ли вложить HTML-формы, как это

<form name="mainForm">
  <form name="subForm">
  </form>
</form>

так что обе формы работают? У моего друга проблемы с этим, частьsubForm работает, а другая часть - нет.

 Khanh Pham13 нояб. 2015 г., 05:56
Да, у меня была такая же проблема, как и у вас. И я использую форму отправки AJAX, чтобы решить эту проблему.
 Levi18 дек. 2008 г., 23:58
Он настраивает корзину, где количество обновлений находится внутри формы, которая отслеживает итоги. Лично я бы так не поступил, но он сталкивается с проблемами, заставляя это работать.
 Castro Roy05 июн. 2015 г., 01:39
 yankee17 июн. 2012 г., 00:09
Возможный дубликат:stackoverflow.com/questions/597596/...
 vol7ron15 июн. 2011 г., 20:12
Старый вопрос, но чтобы ответить на комментарий, могут потребоваться вложенные формы, чтобы избежать JavaScript. Я сталкиваюсь с этим, потому что я хотел бы вложить формы для кнопок сброса подчиненной формы, для которых не требуется JavaScript.
 Ben19 дек. 2008 г., 00:04
Похоже, ему лучше использовать Javascript для копирования значений из одной формы в другую, а не пытаться их вложить. Я не думаю, что вложение будет работать.

Ответы на вопрос(21)

Используйте пустой тег формы перед вашей вложенной формой

Протестировано и работало на Firefox, Chrome

Не проверено на I.E.

<form name="mainForm" action="mainAction">
  <form></form>
  <form name="subForm"  action="subAction">
  </form>
</form>
 ianace11 сент. 2015 г., 00:11
когда я попробовал это на Chrome, он выводит этот <form name = "mainForm"> </ form> <form name = "subForm"> </ form>
 woens03 авг. 2018 г., 11:49
Более новые версии webkit просто удаляют вложенные элементы формы.
 Oskar Berggren28 янв. 2016 г., 15:45
Это является нарушением спецификации, и его использование требует новых проблем.
 Fatih30 сент. 2015 г., 10:04
Вы пробовали с кнопкой отправки. Я использовал этот метод много раз и всегда работал.

Хотя вопрос довольно старый, и я согласен с @everyone, что в HTML не разрешено вложение форм

Но это то, что все, возможно, захотят увидеть это

где вы можете взломать (я называю это взломом, так как я уверен, что это не законно) HTML, чтобы браузер имел вложенную форму

<form id="form_one" action="http://apple.com">
  <div>
    <div>
        <form id="form_two" action="/">
            <!-- DUMMY FORM TO ALLOW BROWSER TO ACCEPT NESTED FORM -->
      </form>
    </div>
      <br/>
    <div>
      <form id="form_three" action="http://www.linuxtopia.org/">
          <input type='submit' value='LINUX TOPIA'/>
      </form>
    </div>
      <br/>

    <div>
      <form id="form_four" action="http://bing.com">
          <input type='submit' value='BING'/>
      </form>
    </div>
      <br/>  
    <input type='submit' value='Apple'/>
  </div>  
</form>

JS FIDDLE LINK

http://jsfiddle.net/nzkEw/10/

Поскольку сейчас 2019 год, я бы хотел дать обновленный ответ на этот вопрос. Можно достичь того же результата, что и вложенные формы, но без их вложения. HTML5 ввел атрибут формы. Вы можете добавить атрибут формы для элементов управления формы вне формы, чтобы связать их с определенным элементом формы (по идентификатору).

https://www.impressivewebs.com/html5-form-attribute/

Таким образом, вы можете структурировать ваш HTML следующим образом:

<form id="main-form" action="/main-action" method="post"></form>
<form id="sub-form"  action="/sub-action"  method="post"></form>

<div class="main-component">
    <input type="text" name="main-property1" form="main-form" />
    <input type="text" name="main-property2" form="main-form" />

    <div class="sub-component">
        <input type="text" name="sub-property1" form="sub-form" />
        <input type="text" name="sub-property2" form="sub-form" />
        <input type="submit" name="sub-save" form="sub-form" value="Save"/>
    </div>

    <input type="submit" name="main-save" value="Save" form="main-form" />
</div>

Атрибут формы поддерживается всеми современными браузерами. IE не поддерживает это, хотя IE уже не браузер, а скорее инструмент совместимости, что подтверждается самой Microsoft:https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a-browser-so-stop-using-it-as-your-default/, Пора перестать заботиться о том, чтобы все работало в IE.

https://caniuse.com/#feat=form-attribute
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fae-form

Из спецификации HTML:

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

 Oussama Bouyardane16 апр. 2019 г., 04:04
Огромное спасибо!!!!! этот способ облегчает мне жизнь: D

Я столкнулся с подобной проблемой, и я знаю, что это не ответ на вопрос, но он может помочь кому-то с такой проблемой:
если необходимо поместить элементы двух или более форм в заданную последовательность,HTML5 <input> form атрибут может быть решением.

Отhttp://www.w3schools.com/tags/att_input_form.asp:

Формаатрибут новое в HTML5.Определяет, какой<form> элемент<input> элемент принадлежит. Значением этого атрибута должен быть атрибут id<form> элемент в том же документе.

сценарий:

input_Form1_n1input_Form2_n1input_Form1_n2input_Form2_n2

Реализация:

<form id="Form1" action="Action1.php" method="post"></form>
<form id="Form2" action="Action2.php" method="post"></form>

<input type="text" name="input_Form1_n1" form="Form1" />
<input type="text" name="input_Form2_n1" form="Form2" />
<input type="text" name="input_Form1_n2" form="Form1" />
<input type="text" name="input_Form2_n2" form="Form2" />

<input type="submit" name="button1" value="buttonVal1" form="Form1" />
<input type="submit" name="button2" value="buttonVal2" form="Form2" />

Вот Вы найдете совместимость браузера.

 TheFrost13 июн. 2017 г., 07:15
По состоянию на июнь 2017 года в Edge это тоже не работает.
 Mohammad hayajneh09 окт. 2017 г., 11:18
По состоянию на октябрь 2017 года это работает в Edge
 Nahouto31 янв. 2018 г., 15:49
это прекрасно работает! должны быть включены в принятый ответ
 Cliff Burton14 июн. 2017 г., 12:48
Спасибо, что указали на это @TheFrost, добавлено в ответ
 dmikam27 июл. 2018 г., 12:57
Просто чтобы указать таблицу поддержки браузера:caniuse.com/#feat=form-attribute  Возобновление - это работает везде (Chrome, Firefox, Opera, Egde, Safari, Android-браузер ...), кроме IE (включая последнюю версию v11).

Если вы используете AngularJS, любой<form> теги внутри вашегоng-app заменяются во время выполненияngForm директивы, которые предназначены для вложенности.

В угловых формах могут быть вложенными. Это означает, что внешняя форма действительна, когда все дочерние формы также действительны. Однако браузеры не допускают вложения<form> элементы, поэтому Angular обеспечиваетngForm директива, которая ведет себя идентично<form> но может быть вложенным. Это позволяет вам иметь вложенные формы, что очень полезно при использовании директив Angular validation в формах, которые динамически генерируются с использованиемngRepeat директивы. (источник)

 ColacX18 мая 2015 г., 11:40
угловой спасает деньjsfiddle.net/gikoo/qNrFX
 Gangadhar Jannu15 нояб. 2018 г., 11:36
Это то же самое для веб-компонентов?
 NeverGiveUp16127 мар. 2018 г., 22:48
Это был ответ, который я искал :) И да, имеет смысл вкладывать форму, потому что если у вас есть несколько вкладок, но вы хотите выполнить проверку только на одной вкладке, то с помощью вложенной формы вы можете сделать это.

Обратите внимание, что вам не разрешено вложить элементы FORM!

http://www.w3.org/MarkUp/html3/forms.html

https://www.w3.org/TR/html4/appendix/changes.html#h-A.3.9 (спецификация html4 не отмечает никаких изменений в отношении вложенности форм с 3.2 до 4)

https://www.w3.org/TR/html4/appendix/changes.html#h-A.1.1.12 (Спецификация html4 не отмечает никаких изменений, касающихся вложенности форм с 4.0 до 4.1)

https://www.w3.org/TR/html5-diff/ (Спецификация html5 не отмечает никаких изменений, касающихся вложенности форм с 4 по 5)

https://www.w3.org/TR/html5/forms.html#association-of-controls-and-forms комментарии к «Эта функция позволяет авторам обойти отсутствие поддержки вложенных элементов формы.», но не указывает, где это указано, я думаю, что они предполагают, что мы должны предполагать, что это указано в спецификации html3 :)

 Mark Peterson13 февр. 2014 г., 21:03
Это ссылка на то, как долго на основной вопрос был дан ответ, который я считал конструктивным. Также я обнаружил, что нет такта "Обратите внимание, что вы не можете вкладывать элементы FORM!" в рамках спецификации, чтобы быть юмористическим.
 jelly4627 мар. 2014 г., 17:53
Это проблема, потому что я должен вставить API, который является формой, и потому что приложение .net (которое оборачивает тег <form> вокруг всего). Как вы преодолеваете эту проблему.
 Aidiakapi24 дек. 2013 г., 14:16
Я понятия не имею, почему вы бы опубликовали вопрос, на который ответили 3 с половиной года, но более проблематичным является ссылка на HTML3, который долгое время не был рекомендацией.

Хотя я не представляю решение для вложенных форм (оно не работает надежно), я предлагаю обходной путь, который работает для меня:

Сценарий использования: Суперформа, позволяющая изменять N элементов одновременно. Он имеет кнопку «Отправить все» внизу. Каждый элемент хочет иметь свою собственную вложенную форму с кнопкой «Отправить элемент № N». Но не могу ...

В этом случае фактически можно использовать одну форму, а затем название кнопок будетsubmit_1..submit_N а такжеsubmitAll и обрабатывать его на стороне сервера, только глядя на параметры, заканчивающиеся на_1 если название кнопки былоsubmit_1.

<form>
    <div id="item1">
        <input type="text" name="foo_1" value="23">
        <input type="submit" name="submit_1" value="Submit Item #1">
    </div>
    <div id="item2">
        <input type="text" name="foo_2" value="33">
        <input type="submit" name="submit_2" value="Submit Item #2">
    </div>
    <input type="submit" name="submitAll" value="Submit All Items">
</form>

Хорошо, так что не большая часть изобретения, но это делает работу.

О вложенных формах: один день я провел 10 лет, пытаясь отладить сценарий ajax.

мой предыдущий ответ / пример не учитывал разметку html, извините.

<form id='form_1' et al>
  <input stuff>
  <submit onClick='ajaxFunction(That_Puts_form_2_In_The_ajaxContainer)' >
  <td id='ajaxContainer></td>
</form>

form_2 постоянно терпел неудачу, говоря неверную form_2.

Когда я переместил ajaxContainer, который произвел form_2<i>outside</i> из form_1 я вернулся в бизнес. Это ответ на вопрос, почему можно вкладывать формы. Я имею в виду, на самом деле, какой идентификатор, если не определить, какую форму использовать? Должна быть лучшая, приятная работа вокруг.

Действительно невозможно ... Я не мог вкладывать теги форм ... Однако я использовал этот код:

<form>
    OTHER FORM STUFF

    <div novalidate role="form" method="post" id="fake_form_id_0" data-url="YOUR_POST_URL">
        THIS FORM STUFF
    </div>
</form>

с{% csrf_token %} и прочее

и применил некоторые JS

var url = $(form_id).attr("data-url");

$.ajax({
  url: url,
  "type": "POST",
   "data": {
    'csrfmiddlewaretoken': '{{ csrf_token }}',
    'custom-param-attachment': 'value'
  },
  success: function (e, data) {
      if (e.is_valid) {
         DO STUFF
      }
  }
});

Даже если бы вы могли заставить его работать в одном браузере, нет гарантии, что он будет работать одинаково во всех браузерах. Так что, хотя вы могли бы заставить его работатьнемного времени, вы, конечно, не сможете заставить его работатьвсе времени.

Решение Вопроса

Одним словом, нет. На странице может быть несколько форм, но они не должны быть вложенными.

Отhtml5 рабочий проект:

4.10.3form элемент

Модель контента:

Содержимое потока, но без потомков элементов формы.

 Jordan04 янв. 2017 г., 18:31
Я полагаю, что нет проблем с вложенными формами, если вы отправляете эти формы с помощью AJAX. Я полагаю, что OP говорит о фактической обратной передаче, нет?
 aroth07 июл. 2014 г., 08:43
Я согласен с тем, что сказали другие. Это ограничение кажется произвольным и вредным.
 Mark Baijens21 сент. 2018 г., 11:12
@RafaelAndrade Элементы, принадлежащие к категории содержимого потока, обычно содержат текст или встроенный контент.
 Rudiger W.16 янв. 2019 г., 13:11
Другая сложность заключается в том, что в элементах DOM есть свойство формы, к которому они принадлежат. Таким образом, вы не можете иметь элементы, принадлежащие более чем одной форме, как во вложенной форме.
 Hector22 июн. 2016 г., 12:33
Итак, нам нужен HTML 5.1 с вложенными формами.
 Rafael Andrade18 апр. 2018 г., 21:32
Не могли бы вы объяснить мне, что такое поток? Спасибо
 annakata19 дек. 2008 г., 00:06
и если вы попробуете это в asp.net, это тоже не так просто ...
 Ryan06 апр. 2013 г., 03:32
Я согласен с ответом, но спросить другого, почему бы и нет? Почему HTML не позволяет создавать вложенные формы? Мне кажется, это ограничение, без которого нам было бы лучше. Есть много примеров, когда использование вложенных форм было бы проще запрограммировать (т.е. использовать форму загрузки фотографий с формой редактирования профиля).
 Ryan Wheale10 окт. 2012 г., 00:59
Скорее всего, это приложение .net (которое окружает тег <form> всем). Каждый раз, когда вы пытаетесь вложить формы, где-то есть ошибка дизайна. Обычно вам нужны две формы рядом друг с другом, обернутые в один DIV только для стилизации.
 Robert Grant24 дек. 2013 г., 07:45
@ Нильзор, он не спрашивает, нельзя ли это сделать, он спрашивает, ПОЧЕМУ нет. Согласен; Вложенные формы на самом деле действительно полезны. Поэтому, если у вас есть одностраничное приложение с вкладками, каждая вкладка представляет собой собственную форму (чтобы вы могли отправить ее, чтобы сохранить прогресс), и все они обернуты в форму, которую вы можете отправить, чтобы сохранить все. Имеет смысл для меня.
 Kyle Baker11 апр. 2017 г., 01:18
Проблема с вложенными формами - это архитектура форм в HTML, где действие в этой форме приводит к событию отправки. Вопрос в волосах о том, что нужно представить. У вас может быть несколько полей внутри формы или несколько форм внутри div, но на самом деле не имеет смысла иметь формы внутри формы. Если контент идет вместе, это все одна форма; если контент представлен отдельно, это действительно отдельные формы, которые не нуждаются во внешней форме.

У вас даже могут возникнуть проблемы с его работой в разных версиях одного и того же браузера. Поэтому избегайте этого.

Другой способ обойти эту проблему, если вы используете какой-либо серверный язык сценариев, который позволяет вам манипулировать опубликованными данными, это объявить свою HTML-форму следующим образом:

<form>
<input name="a_name"/>
<input name="a_second_name"/>
<input name="subform[another_name]"/>
<input name="subform[another_second_name]"/>
</form>

Если вы напечатаете опубликованные данные (я буду использовать PHP здесь), вы получите массив, подобный этому:

//print_r($_POST) will output :
    array(
    'a_name' => 'a_name_value',
    'a_second_name' => 'a_second_name_value',
    'subform' => array(
      'another_name' => 'a_name_value',
      'another_second_name' => 'another_second_name_value',
      ),
    );

Тогда вы можете просто сделать что-то вроде:

$my_sub_form_data = $_POST['subform'];
unset($_POST['subform']);

В вашем $ _POST теперь есть только ваши данные «основной формы», а ваши данные подчиненной формы хранятся в другой переменной, которой вы можете манипулировать по своему желанию.

Надеюсь это поможет!

Простой HTML не может позволить вам сделать это. Но с помощью JavaScript вы можете сделать это. Если вы используете javascript / jquery, вы можете классифицировать элементы формы с помощью класса, а затем использовать serialize () для сериализации только тех элементов формы для подмножества элементов, которые вы хотите отправить.

<form id="formid">
    <input type="text" class="class1" />
    <input type="text" class="class2">
</form>

Тогда в вашем javascript вы можете сделать это для сериализации элементов class1

$(".class1").serialize();

Для класса 2 вы могли бы сделать

$(".class2").serialize();

Для всей формы

$("#formid").serialize();

или просто

$("#formid").submit();

Сегодня я также застрял в той же проблеме, и решить проблему, я добавил пользовательский элемент управления и
на этом контроле я использую этот код

<div class="divformTagEx">

</div>

<asp:Literal runat="server" ID="litFormTag" Visible="false">
'<div> <form  style="margin-bottom: 3;" action="http://login.php" method="post" name="testformtag"></form> </div>'</asp:Literal>

и на событии PreRenderComplete страницы вызовите этот метод

private void InitializeJavaScript()
{
        var script = new StringBuilder();
        script.Append("$(document).ready(function () {");
        script.Append("$('.divformTagEx').append( ");
        script.Append(litFormTag.Text);
        script.Append(" )");
        script.Append(" });");
        ScriptManager.RegisterStartupScript(this, GetType(), "nestedFormTagEx", script.ToString(), true);
    }

Я верю, что это поможет.

Нет, вы не можете иметь вложенную форму. Вместо этого вы можете открыть модал, который содержит форму и выполнить отправку формы Ajax.

Простой обходной путь - использовать iframe для хранения «вложенной» формы. Визуально форма вложенная, но на стороне кода она находится в отдельном HTML-файле.

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

Вложенные формы дали мне идентификатор для анализа на правильное действие. Не сломался, пока я не попытался прикрепить поле к одной из кнопок, и Валидат пожаловался. Ничего страшного в этом не было - я использовал явное stringify во внешней форме, поэтому не имело значения, что submit и форма не совпадали. Да, да, надо было взять кнопки из отправки на клик.

Дело в том, что есть обстоятельства, когда он не полностью нарушен. Но «не полностью сломанный», возможно, слишком низкий стандарт, чтобы стрелять :-)

Как сказал Крейг, нет.

Но, относительно вашего комментария относительноЗачем:

Это может быть проще в использовании 1<form> с входами и кнопкой «Обновить», и используйте копирование скрытых входов с кнопкой «Отправить заказ» в другой<form>.

 Levi19 дек. 2008 г., 00:05
Я сделал свою страницу корзины таким, он пошел другим путем и не хотел ее менять. Я не был уверен, если его метод был так же действителен.

Вторая форма будет проигнорирована, см.отрывок из WebKit например:

bool HTMLParser::formCreateErrorCheck(Token* t, RefPtr<Node>& result)
{
    // Only create a new form if we're not already inside one.
    // This is consistent with other browsers' behavior.
    if (!m_currentFormElement) {
        m_currentFormElement = new HTMLFormElement(formTag, m_document);
        result = m_currentFormElement;
        pCloserCreateErrorCheck(t, result);
    }
    return false;
}

Вы также можете использовать formaction = "" внутри тега кнопки.

<button type="submit" formaction="/rmDog" method='post' id="rmDog">-</button>

Это будет вложено в исходную форму в виде отдельной кнопки.

 codeAndStuff06 нояб. 2018 г., 16:16
игнорировать выше (не позволил бы мне редактировать через 5 минут ... хм). огромная помощь здесь - именно то, что я пытался сделать этим утром. Вот почему мы все так любим
 codeAndStuff06 нояб. 2018 г., 16:10
это не отвечает на вопрос, но это только помогло мне решить другую проблему

Ваш ответ на вопрос