Подтвердить что ты не робот

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

Можно ли вложить html-формы, подобные этому

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

4.10.3 Элемент form

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

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

Ответ 2

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

Ответ 3

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

С http://www.w3schools.com/tags/att_input_form.asp:

  1. Атрибут form является новым в 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" />

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

Ответ 4

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

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

Затем в вашем javascript вы можете сделать это для сериализации элементов класса1

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

Для класса 2 вы можете сделать

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

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

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

или просто

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

Ответ 5

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

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

Ответ 6

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

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

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

Ответ 7

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

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

Ответ 8

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

Ответ 9

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

Ответ 10

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

Ответ 11

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

Ответ 12

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

Сценарий использования: суперформа, позволяющая сразу изменить 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>

Хорошо, поэтому не так много, но это делает работу.

Ответ 13

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

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

Ответ 14

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

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

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

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

Ответ 15

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

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

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

Ответ 16

Хотя вопрос довольно старый, и я согласен с тем, что вложенность формы не допускается в 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/

Ответ 17

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

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

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

Ответ 18

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

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

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

Ответ 19

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