Можете ли вы вложить html-формы?
можно ли вложить html-формы, как это
<form name="mainForm">
<form name="subForm">
</form>
</form>
Так что обе формы работают? У моего друга возникли проблемы с этим, частью subForm работает, а часть нет.
19 ответов:
словом, нет. Вы можете иметь несколько форм на странице, но они не должны быть вложенными.
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:
- форму атрибут является новым в HTML5.
- указывает, что
<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
сегодня, я также застрял в той же проблеме, и решить проблему я добавил пользовательский элемент управления и
на этом элементе управления я использую этот код<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.
дело в том, что есть обстоятельства, когда он не полностью сломан. Но "не совсем сломанный", возможно, слишком низкий стандарт, чтобы стрелять: -)