HTML formlarını iç içe yerleştirebilir misiniz?

HTML formlarını böyle yerleştirmek mümkün mü

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

böylece her iki form da çalışır mı? Arkadaşım bunun bir problemi, subFormeserlerin bir kısmı , diğer bir kısmı ise yok.

Tek kelimeyle, hayır. Bir sayfada birkaç formunuz olabilir, ancak iç içe yerleştirilmemelidirler.

Gönderen html5 çalışma taslağı :

4.10.3 formEleman

İçerik modeli:

Akış içeriği, ancak form öğesi torunları yok.

Benzer bir sorunla karşılaştım ve bunun sorunun cevabı olmadığını biliyorum, ancak bu tür bir sorunu olan birine yardımcı olabilir:
belirli bir sırayla iki veya daha fazla formun elemanlarını koymaya ihtiyaç varsa , HTML5 <input> form özelliği çözüm olabilir.

Gönderen http://www.w3schools.com/tags/att_input_form.asp :

1. Form özelliği HTML5'te yenidir.
2. <form>Bir <input>öğenin hangi öğeye ait olduğunu belirtir . Bu özelliğin değeri <form>, aynı belgedeki bir öğenin id niteliği olmalıdır .

Senaryo :

• input_Form1_n1
• input_Form2_n1
• input_Form1_n2
• input_Form2_n2

Uygulama :

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

Burada tarayıcının uyumluluğunu bulacaksınız.

İkinci form yok sayılır, örneğin WebKit'ten snippet'e bakın :

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

Düz html bunu yapmanıza izin veremez. Ancak javascript ile bunu yapabilirsiniz. Javascript / jquery kullanıyorsanız, form öğelerinizi bir sınıfla sınıflandırabilir ve sonra göndermek istediğiniz öğelerin alt kümesi için yalnızca bu form öğelerini serileştirmek için serialize () kullanabilirsiniz.

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

Daha sonra javascript'inizde class1 öğelerini serileştirmek için bunu yapabilirsiniz

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

Class2 için şunları yapabilirsiniz

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

Tüm form için

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

ya da sadece

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

AngularJS kullanıyorsanız, <form>içinizdeki tüm etiketler ng-appçalışma zamanında ngFormiç içe yerleştirilmek üzere tasarlanmış yönergelerle değiştirilir .

Açısal formlarda yuvalanabilir. Bu, tüm alt formlar da geçerli olduğunda dış formun geçerli olduğu anlamına gelir. Ancak, tarayıcılar <form>öğelerin iç içe yerleştirilmesine izin vermez , bu nedenle Angular, ngFormaynı şekilde davranan <form>ancak iç içe olabilen yönergeyi sağlar . Bu, ngRepeatdirektif kullanılarak dinamik olarak oluşturulan formlarda Açısal doğrulama direktiflerini kullanırken çok yararlı olan iç içe formlara sahip olmanızı sağlar . ( kaynak )

2019 olduğu için bu soruya güncel bir cevap vermek istiyorum. Yuvalanmış formlarla aynı sonucu elde etmek mümkündür, ancak onları yuvalamaksızın. HTML5 form niteliğini tanıttı. Belirli bir form öğesine (id ile) bağlamak için form özniteliklerini form dışında form özniteliklerine ekleyebilirsiniz.

https://www.impressivewebs.com/html5-form-attribute/

Bu şekilde HTML'nizi şu şekilde yapılandırabilirsiniz:

<form id="main-form" action="/main-action" method="post"></form>
<form id="sub-form"  action="/sub-action"  method="post"></form>

<div class="main-component">
    <input type="text" name="main-property1" form="main-form" />
    <input type="text" name="main-property2" form="main-form" />

    <div class="sub-component">
        <input type="text" name="sub-property1" form="sub-form" />
        <input type="text" name="sub-property2" form="sub-form" />
        <input type="submit" name="sub-save" value="Save" form="sub-form" />
    </div>

    <input type="submit" name="main-save" value="Save" form="main-form" />
</div>

Form özelliği tüm modern tarayıcılar tarafından desteklenir. IE bunu desteklemiyor, ancak IE artık bir tarayıcı değil, Microsoft tarafından onaylandığı gibi bir uyumluluk aracı: https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a -browser-so-stop-varsayılan-olarak-kullanarak- . IE'de işlerin yapılmasına özen göstermenin zamanı geldi.

https://caniuse.com/#feat=form-attribute
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fae-form

Html spec'ten:

Bu özellik, yazarların iç içe form öğeleri için destek eksikliği üzerinde çalışmasına olanak tanır.

Gönderilen verileri değiştirmenize izin veren bazı sunucu tarafı komut dosyası dili kullanıyorsanız, bu sorunu aşmanın başka bir yolu, html formunuzu şu şekilde bildirmektir:

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

Yayınlanan verileri yazdırırsanız (burada PHP kullanacağım), şöyle bir dizi alırsınız:

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

Sonra sadece şöyle bir şey yapabilirsiniz:

$my_sub_form_data = $_POST['subform'];
unset($_POST['subform']);

$ _POST'nuz artık yalnızca "ana form" verilerinize sahiptir ve alt form verileriniz isteğe bağlı olarak değiştirebileceğiniz başka bir değişkende saklanır.

Bu yardımcı olur umarım!

Craig'in dediği gibi, hayır.

Ancak, nedeninizle ilgili yorumunuzla ilgili olarak :

1'i <form>girişler ve "Güncelle" düğmesiyle kullanmak ve gizli gizli girişleri "Siparişi Gönder" düğmesiyle diğerinde kullanmak daha kolay olabilir <form>.

FORM öğelerini iç içe yerleştirmenize izin verilmediğini unutmayın!

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

https://www.w3.org/TR/html4/appendix/changes.html#hA.3.9 (html4 belirtimi, yuvalama formlarında 3.2'den 4'e değişiklik olmadığını not eder)

https://www.w3.org/TR/html4/appendix/changes.html#hA.1.1.12 (html4 belirtimi, yuvalama formlarında 4.0 ile 4.1 arasında değişiklik olmadığını not eder)

https://www.w3.org/TR/html5-diff/ (html5 spesifikasyonu, yuvalama formlarında 4'ten 5'e değişiklik olmadığını not eder)

https://www.w3.org/TR/html5/forms.html#association-of-controls-and-forms "Bu özellik, yazarların iç içe form öğeleri için destek eksikliği konusunda çalışmalarına izin verir", ancak bunun belirtildiği yerde alıntı yapmıyorum, html3 belirtiminde belirtildiğini varsaymamız gerektiğini düşünüyoruz :)

Basit bir çözüm, "iç içe" formu tutmak için bir iframe kullanmaktır. Görsel olarak form iç içe geçmiştir ancak kod tarafında tamamen ayrı bir html dosyasındadır.

Düğme etiketinin içinde formaction = "" kullanabilirsiniz.

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

Bu, orijinal biçimde ayrı bir düğme olarak yuvalanır.

Tek bir tarayıcıda çalıştırabilseniz bile, tüm tarayıcılarda aynı şekilde çalışacağının garantisi yoktur. Alacağınız mümkün olabilir iken işe Yani bazı zaman, kesinlikle işe almak mümkün olmaz tüm zamanların.

Hatta aynı tarayıcının farklı sürümlerinde çalışmasını sağlamakta sorun yaşayabilirsiniz. Bu yüzden kullanmaktan kaçının.

İç içe formlara bir çözüm sunmasam da (güvenilir bir şekilde çalışmıyor), benim için çalışan bir geçici çözüm sunuyorum:

Kullanım senaryosu: N öğenin aynı anda değiştirilmesine izin veren bir süper biçim. Altta "Tümünü Gönder" düğmesi var. Her öğe bir "Öğe Gönder # N" düğmesi ile kendi iç içe formuna sahip olmak ister. Ama yapamam ...

Bu durumda, aslında tek bir form kullanabilir ve sonra düğmelerin adı olabilir submit_1.. submit_Nve submitAllsadece _1düğmenin adı ise biten parametreler bakarak sunucu tarafında işlemek 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>

Tamam, çok fazla icat değil, ama işi yapıyor.

Yuvalama formları hakkında: Bir öğleden sonra 10 yılını ajax senaryosunda hata ayıklamaya çalıştım.

önceki cevabım / örneğim html işaretlemesini hesaba katmadı, üzgünüm.

<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 sürekli geçersiz form_2 diyerek başarısız oldu.

Form_1 form_2 üreten ajaxContainer <i>outside</i>taşıdığımda, iş hayatına geri döndüm. Birinin neden formları yuvalayabileceği sorusunun cevabıdır. Demek istediğim, hangi formun kullanılacağını tanımlamıyorsa kimliği ne için? Etrafında daha iyi, daha ince bir çalışma olmalı.

Yuvalanmış formunuzdan önce boş form etiketi kullanın

Firefox, Chrome'da Test Edildi ve Çalışıldı

IE'de Test Edilmedi

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

Her ne kadar soru oldukça eski ve HTML'de formun yuvalanmasına izin verilmeyen herkes @

Ama bu her şeyi görmek isteyebilir

nereye sen-ebilmek kesmek (bunun meşru olmadığına eminim çünkü ben bir kesmek diyorum) html tarayıcının iç içe bir form olması için izin

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

Hayır, iç içe geçmiş bir formunuz olamaz. Bunun yerine, form içeren bir Modal açabilir ve Ajax form gönderme işlemini gerçekleştirebilirsiniz.

Gerçekten mümkün değil ... Form etiketleri iç içe olamazdı ... Ancak bu kodu kullanılır:

<form>
    OTHER FORM STUFF

    <div novalidate role="form" method="post" id="fake_form_id_0" data-url="YOUR_POST_URL">
        THIS FORM STUFF
    </div>
</form>

ile {% csrf_token %}ve şeyler

ve bazı JS uyguladı

var url = $(form_id).attr("data-url");

$.ajax({
  url: url,
  "type": "POST",
   "data": {
    'csrfmiddlewaretoken': '{{ csrf_token }}',
    'custom-param-attachment': 'value'
  },
  success: function (e, data) {
      if (e.is_valid) {
         DO STUFF
      }
  }
});

Bugün, ben de aynı sorun sıkışmış var ve bir kullanıcı kontrolü ekledim sorunu çözmek ve
bu kontrol bu kodu kullanın

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

ve sayfanın PreRenderComplete olayında bu yöntemi çağırın

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

Bunun yardımcı olacağına inanıyorum.

Bunu yapmamam gerektiğini bilmeden önce, çoklu gönderme düğmelerine sahip olmak için formları iç içe geçmiştim. 18 ay boyunca bu şekilde koştum, binlerce kayıt işlemi, kimse bizi herhangi bir zorluk hakkında çağırmadı.

Yuvalanmış formlar, doğru eylemin gerçekleştirilmesi için ayrıştırmam için bir kimlik verdi. Düğmelerden birine bir alan eklemeye çalıştım ve şikayet doğrulamak kadar kırılmadı. Çözmek için büyük bir anlaşma değildi - ben dış form üzerinde açık bir stringify kullandım, bu yüzden gönderme ve form eşleşmesi önemli değildi. Evet, evet, düğmeleri bir gönderiden onclick'e götürmeliydim.

Önemli olan, tamamen kırılmadığı durumlar var. Ama "tamamen kırık değil" belki de ateş için bir standart çok düşük :-)