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