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

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

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

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

19 ответов


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

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

4.10.3 в form элемент

содержание модели:

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


вторая форма будет пропущен, увидеть фрагмент из 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;
}

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

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

  1. форму атрибут является новым в HTML5.
  2. указывает, что <form> элемент an <input> элемент принадлежит. Значение этого атрибута должно быть атрибута id тега <form> элемент в том же документе.

сценарий:

  • input_Form1_n1
  • input_Form2_n1
  • input_Form1_n2
  • input_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" />

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


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

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

тогда в вашем javascript вы можете сделать это, чтобы сериализовать элементы class1

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

для class2, вы могли бы сделать

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

для всей форма

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

или просто

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

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

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


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

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

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


другой способ обойти эту проблему, если вы используете какой-то серверный язык сценариев, который позволяет вам манипулировать опубликованными данными, - объявить вашу 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 теперь имеет только ваши данные "основной формы", а ваши данные подформы хранятся в другой переменной вы можете управлять по желанию.

надеюсь, что это помогает!


Примечание Вы не можете вложить элементы формы!

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 :)


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


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


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


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

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

в этом случае можно фактически использовать одну форму, а затем иметь имя кнопок submit_1..submit_N и submitAll и ручка это серверы-сторона, только глядя на params, заканчивающиеся на _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, я вернулся в бизнес. Это ответ на вопрос о том, почему можно гнездиться. Я имею в виду, действительно, что такое ID, если не определить, какая форма должна быть используется? Должна же быть работа получше.


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

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

Не тестируется на Е. И.

<form name="mainForm" action="mainAction">
  <form></form>
  <form name="subForm"  action="subAction">
  </form>
</form>

хотя вопрос довольно старый, и я согласен с @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/


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

<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);
    }

Я считаю, что это поможет.


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

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

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


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

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

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


нет у вас не может быть вложенной формы. Вместо этого вы можете открыть модал, который содержит форму и выполнить AJAX form submit.