Bisakah Anda membuat sarang formulir html?

Apakah mungkin untuk membuat sarang bentuk html seperti ini

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

sehingga kedua bentuk itu berfungsi? Teman saya mengalami masalah dengan ini, bagian dari subFormpekerjaan, sedangkan bagian lain tidak.

Singkatnya, tidak. Anda dapat memiliki beberapa formulir di halaman tetapi tidak boleh disarangkan.

Dari draft kerja html5 :

4.10.3 formElemen

Model konten:

Mengalirkan konten, tetapi tanpa keturunan elemen bentuk.

Saya mengalami masalah yang sama, dan saya tahu itu bukan jawaban untuk pertanyaan itu, tetapi dapat membantu seseorang dengan masalah seperti ini:
jika ada kebutuhan untuk meletakkan elemen dari dua bentuk atau lebih dalam urutan yang diberikan , atribut HTML5 <input> form bisa menjadi solusinya.

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

1. Atribut form baru dalam HTML5.
2. Menentukan <form>elemen mana yang <input>dimiliki elemen. Nilai dari atribut ini harus merupakan atribut id dari <form>elemen dalam dokumen yang sama.

Skenario :

• input_Form1_n1
• input_Form2_n1
• input_Form1_n2
• input_Form2_n2

Implementasi :

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

Di sini Anda akan menemukan kompatibilitas browser.

Formulir kedua akan diabaikan, lihat cuplikan dari WebKit misalnya:

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

Html polos tidak memungkinkan Anda untuk melakukan ini. Tetapi dengan javascript Anda dapat melakukannya. Jika Anda menggunakan javascript / jquery, Anda bisa mengklasifikasikan elemen formulir Anda dengan kelas dan kemudian menggunakan serialize () untuk membuat cerita bersambung hanya elemen-elemen formulir tersebut untuk subset dari item yang ingin Anda kirim.

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

Kemudian di javascript Anda, Anda bisa melakukan ini untuk membuat serialisasi elemen class1

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

Untuk class2 bisa Anda lakukan

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

Untuk seluruh bentuk

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

atau sederhana

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

Jika Anda menggunakan AngularJS, <form>tag apa pun di dalam Anda ng-appdiganti saat runtime dengan ngFormarahan yang dirancang untuk disarangkan.

Dalam bentuk Angular bisa bersarang. Ini berarti bahwa bentuk luar valid ketika semua bentuk anak valid juga. Namun, browser tidak memungkinkan <form>elemen bersarang , sehingga Angular memberikan ngFormarahan yang berperilaku identik <form>tetapi dapat disarangkan. Ini memungkinkan Anda untuk memiliki formulir bersarang, yang sangat berguna saat menggunakan arahan validasi sudut dalam formulir yang dihasilkan secara dinamis menggunakan ngRepeatarahan. ( sumber )

Karena tahun 2019 saya ingin memberikan jawaban terbaru untuk pertanyaan ini. Dimungkinkan untuk mencapai hasil yang sama dengan bentuk bersarang, tetapi tanpa bersarang. HTML5 memperkenalkan atribut form. Anda bisa menambahkan atribut formulir ke kontrol formulir di luar formulir untuk menautkannya ke elemen formulir tertentu (berdasarkan id).

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

Dengan cara ini Anda dapat menyusun html Anda seperti ini:

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

Atribut form didukung oleh semua browser modern. Meskipun demikian, IE tidak mendukung hal ini, tetapi IE bukan lagi peramban, melainkan alat kompatibilitas, sebagaimana dikonfirmasi oleh Microsoft sendiri: https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a -browser-so-stop-use-it-as-your-default / . Sudah saatnya kita berhenti peduli tentang membuat sesuatu berfungsi di IE.

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

Dari spec html:

Fitur ini memungkinkan penulis untuk mengatasi kurangnya dukungan untuk elemen formulir bersarang.

Cara lain untuk mengatasi masalah ini, jika Anda menggunakan beberapa bahasa skrip sisi server yang memungkinkan Anda untuk memanipulasi data yang diposting, adalah mendeklarasikan formulir html Anda seperti ini:

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

Jika Anda mencetak data yang diposting (Saya akan menggunakan PHP di sini), Anda akan mendapatkan array seperti ini:

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

Maka Anda bisa melakukan sesuatu seperti:

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

$ _POST Anda sekarang hanya memiliki data "formulir utama" Anda, dan data subformulir Anda disimpan dalam variabel lain yang dapat Anda manipulasi sesuka hati.

Semoga ini membantu!

Seperti yang dikatakan Craig, tidak.

Namun, mengenai komentar Anda mengapa :

Mungkin lebih mudah menggunakan 1 <form>dengan input dan tombol "Perbarui", dan gunakan salin input tersembunyi dengan tombol "Kirim Pesanan" di tombol lain <form>.

Perhatikan bahwa Anda tidak diizinkan untuk membuat elemen FORMULIR!

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

https://www.w3.org/TR/html4/appendix/changes.html#hA.3.9 (spesifikasi html4 mencatat tidak ada perubahan mengenai formulir bersarang dari 3,2 ke 4)

https://www.w3.org/TR/html4/appendix/changes.html#hA.1.1.12 (spesifikasi html4 mencatat tidak ada perubahan mengenai formulir bersarang dari 4.0 hingga 4.1)

https://www.w3.org/TR/html5-diff/ (spesifikasi html5 mencatat tidak ada perubahan mengenai formulir bersarang dari 4 hingga 5)

https://www.w3.org/TR/html5/forms.html#association-of-controls-and-forms komentar untuk "Fitur ini memungkinkan penulis untuk mengatasi kurangnya dukungan untuk elemen bentuk bersarang.", tetapi tidak tidak menyebutkan di mana ini ditentukan, saya pikir mereka berasumsi bahwa kita harus berasumsi bahwa itu ditentukan dalam spesifikasi html3 :)

Solusi sederhana adalah dengan menggunakan iframe untuk memegang formulir "bersarang". Secara visual formulir bersarang tetapi pada sisi kode dalam file html yang terpisah sama sekali.

Anda juga dapat menggunakan formaction = "" di dalam tag tombol.

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

Ini akan disarangkan dalam bentuk asli sebagai tombol terpisah.

Bahkan jika Anda bisa membuatnya bekerja di satu browser, tidak ada jaminan bahwa itu akan berfungsi sama di semua browser. Jadi sementara Anda mungkin bisa membuatnya bekerja beberapa saat, Anda tentu tidak akan bisa membuatnya bekerja sepanjang waktu.

Anda bahkan akan mengalami masalah membuatnya bekerja di versi berbeda dari browser yang sama. Jadi hindari menggunakannya.

Meskipun saya tidak memberikan solusi untuk bentuk bersarang (itu tidak berfungsi dengan baik), saya menghadirkan solusi yang bekerja untuk saya:

Skenario penggunaan: Bentuk super memungkinkan untuk mengubah item N sekaligus. Ini memiliki tombol "Kirim Semua" di bagian bawah. Setiap item ingin memiliki bentuk bersarang sendiri dengan tombol "Kirim Item # N". Tapi tidak bisa ...

Dalam hal ini, seseorang dapat benar-benar menggunakan bentuk tunggal, dan kemudian memiliki nama tombol menjadi submit_1.. submit_Ndan submitAlldan menanganinya sisi server, dengan hanya melihat params yang berakhir _1jika nama tombol itu 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>

Ok, jadi tidak banyak penemuan, tapi itu berhasil.

Tentang formulir bersarang: Saya menghabiskan 10 tahun pada suatu sore mencoba men-debug skrip ajax.

jawaban / contoh saya sebelumnya tidak menjelaskan markup html, maaf.

<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 selalu gagal mengatakan form_2 tidak valid.

Ketika saya memindahkan ajaxContainer yang menghasilkan form_2 <i>outside</i>dari form_1, saya kembali berbisnis. Ini menjawab pertanyaan mengapa seseorang bisa membuat sarang. Maksudku, sungguh, untuk apa ID jika tidak menentukan bentuk mana yang akan digunakan? Pasti ada yang lebih baik, pekerjaan yang lebih licin.

Gunakan tag formulir kosong sebelum formulir bersarang Anda

Diuji dan Bekerja pada Firefox, Chrome

Tidak Diuji pada IE

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

Meskipun pertanyaannya sudah cukup lama dan saya setuju dengan @ semua orang bahwa bersarang formulir tidak diperbolehkan dalam HTML

Tapi ini sesuatu yang semua mungkin ingin melihat ini

tempat Anda dapat meretas (saya menyebutnya peretasan karena saya yakin ini tidak sah) html untuk memungkinkan peramban memiliki bentuk bersarang

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

LINK TA FIDDLE

http://jsfiddle.net/nzkEw/10/

Tidak, Anda tidak dapat memiliki formulir bersarang. Sebagai gantinya, Anda dapat membuka Modal yang berisi formulir dan melakukan pengiriman formulir Ajax.

Benar-benar tidak mungkin ... Saya tidak dapat membuat tag bentuk ... Namun saya menggunakan kode ini:

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

dengan {% csrf_token %}dan barang-barang

dan menerapkan beberapa JS

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

Hari ini, saya juga terjebak dalam masalah yang sama, dan menyelesaikan masalah saya telah menambahkan kontrol pengguna dan
pada kontrol ini saya menggunakan kode ini

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

dan pada acara PreRenderComplete dari halaman panggil metode ini

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

Saya percaya ini akan membantu.

Sebelum saya tahu saya tidak seharusnya melakukan ini, saya memiliki formulir bersarang untuk tujuan memiliki beberapa tombol kirim. Berlari seperti itu selama 18 bulan, ribuan transaksi pendaftaran, tidak ada yang menelepon kami tentang kesulitan apa pun.

Formulir bersarang memberi saya ID untuk menguraikan tindakan yang benar untuk diambil. Tidak pecah sampai saya mencoba melampirkan bidang ke salah satu tombol dan Validasi mengeluh. Bukan masalah besar untuk menguraikannya - saya menggunakan string eksplisit pada formulir luar sehingga tidak masalah pengiriman dan formulir tidak cocok. Ya, ya, seharusnya mengambil tombol dari kirim ke klik.

Intinya adalah ada keadaan di mana itu tidak sepenuhnya rusak. Tapi "tidak sepenuhnya rusak" mungkin standar terlalu rendah untuk menembak :-)