Consegue aninhar formulários html?

O segundo formulário será ignorado, veja o excerto do WebKit por exemplo:

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

1. o atributo form é novo em HTML5.
2. especifica qual <form> Elemento an <input> o elemento pertence a. O valor deste atributo deve ser o atributo id de um elemento <form> no mesmo documento.

Cenário:

• input_Form1_n1
• input_Form2_n1
• input_Form1_n2
• input_Form2_n2

Execução:

<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" />

Aqui vai encontrar a compatibilidade do browser.

O HTML simples não lhe permite fazer isto. Mas com javascript você pode ser capaz de fazer isso. Se você estiver usando javascript / jquery você pode classificar seus elementos de forma com uma classe e então usar serialize() para serializar apenas aqueles elementos de forma para o subconjunto dos itens que você deseja enviar.

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

Então no seu javascript você poderia fazer isso para serializar elementos da classe 1

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

Para a classe 2 você poderia fazer

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

Para todo o formulário

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

Ou simplesmente

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

Se estiver a usar AngularJS, quaisquer {[[0]} marcas dentro do seu ng-app são substituídas no tempo de execução por ngForm directivas que são concebidas para serem aninhadas.

Em formas angulares podem ser aninhadas. Isto significa que a forma exterior é válida quando todas as formas infantis são válidas também. No entanto, os navegadores não permitem o aninhamento de <form> elementos, por isso o Angular fornece a Directiva ngForm que se comporta de forma idêntica a <form> mas pode ser aninhada. Isto permite-lhe ter formas aninhadas, o que é muito útil ao utilizar directivas de validação Angular em formas que são geradas dinamicamente utilizando a Directiva ngRepeat. (Fonte)

Mas, em relação ao seu comentário sobre porquê:

Pode ser mais fácil usar 1 <form> com as entradas e o botão "Actualizar", e usar a cópia das entradas escondidas com o botão" Enviar A Ordem " num outro {[[0]}.

Outra forma de contornar este problema, se estiver a usar alguma linguagem de programação do lado do servidor que lhe permite manipular os dados publicados, é declarar a sua forma html como esta:

<form>
<input name="a_name"/>
<input name="a_second_name"/>
<input name="subform[another_name]"/>
<input name="subform[another_second_name]"/>
</form>

Se você imprimir os dados postados( eu vou usar o PHP aqui), você vai obter um array como este:

//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']);

O seu $ _POST agora só tem os dados da sua "forma principal" , e os dados da sua sub-reforma são armazenados noutra variável que pode manipular em poder.

Note que não é permitido aninhar elementos de forma!

Http://www.w3.org/MarkUp/html3/forms.html

Https://www.w3.org/TR/html4/appendix/changes.html#h-A.3.9 (Especificação html4 notas não há alterações no que respeita aos formulários de nidificação de 3.2 a 4)

Https://www.w3.org/TR/html4/appendix/changes.html#h-A.1.1.12 (as especificações do html4 não indicam alterações no que respeita aos formulários de nidificação de 4.0 a 4.0 4.1)

Https://www.w3.org/TR/html5-diff/ (especificação html5 notas não há alterações no que respeita aos formulários de nidificação de 4 a 5)

Https://www.w3.org/TR/html5/forms.html#association-of-controls-and-forms comentários a " esta característica permite aos autores trabalhar em torno da falta de suporte para elementos de forma aninhada.", mas não cita onde for especificado, o que eu acho que eles estão partindo do princípio de que devemos assumir que é especificado no html3 especificação :)

Uma solução simples é usar uma iframe para manter a forma "aninhada". Visualmente o formulário é aninhado, mas no lado do código está em um arquivo html separado completamente.

Mesmo que você pudesse fazê-lo funcionar em um navegador, não há garantia de que ele funcionaria o mesmo em todos os navegadores. Então, enquanto você pode ser capaz de fazê-lo funcionar alguns do tempo, você, certamente, não seria capaz de fazê-lo funcionar todos os do tempo.

Até teria problemas em fazê-lo funcionar em diferentes versões do mesmo navegador. Então, evite usar isso.

Cenário de Utilização: uma superforme que permite alterar os itens N de uma só vez. Ele tem um botão "Submeter tudo" no fundo. Cada item quer ter sua própria forma aninhada com um botão" Submeter Item # N". Mas não posso...

Neste caso, pode-se realmente usar uma única forma, e então ter o nome dos botões be submit_1..submit_N e submitAll e lidar com servidores de TI-lado, por apenas olhando para os parâmetros que terminam em _1 se o nome do botão fosse 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>

A minha resposta/exemplo anterior não tinha em conta a marcação html, desculpe.

<form id='form_1' et al>
  <input stuff>
  <submit onClick='ajaxFunction(That_Puts_form_2_In_The_ajaxContainer)' >
  <td id='ajaxContainer></td>
</form>

O Form_2 falhou constantemente ao dizer o form_2 inválido.

Utilize a etiqueta do formulário vazia antes da sua forma aninhada

Testado e trabalhado no Firefox, cromado

Não testado em i. E.

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

Embora a questão seja bastante antiga e eu concorde com o @ everyone que o ninho da forma não é permitido no HTML

Where you can hack (i'm called it A hack since I sure this ain't legitimate) html to allow browser to have nested form

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

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

Você também pode usar formaction = "" dentro da marca do botão.

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

Isto seria aninhado na forma original como um botão separado.

Formulários aninhados deram-me uma identificação para analisar para a acção correcta a tomar. Não Cedi até tentar ligar um campo a um dos botões e validar reclamou. Não foi nada de mais para desvendá-lo. usei uma linha explícita na forma exterior para que não importasse. o envio e o formulário não correspondem. Sim, sim, devia ter levado os botões de um submit para um onclick.