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


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

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

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

19 386

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

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

тестировался и работал на 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 на внешней форме, поэтому это не так дело в том, что подача и форма не совпадали. Да, да, надо было взять кнопки из отправки в onclick.

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

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