Bisakah Anda membuat sarang formulir html?


451

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.


Dia menyiapkan keranjang, di mana jumlah pembaruan ada di dalam formulir yang melacak total. Saya pribadi tidak akan melakukan itu, tetapi dia mengalami masalah dalam menjalankannya.
Lewi

1
Sepertinya dia akan lebih baik menggunakan Javascript untuk menyalin nilai dari satu formulir ke yang lain, daripada mencoba untuk bersarang. Saya pikir sarang tidak akan bekerja.
Ben

15
Pertanyaan lama, tetapi untuk menjawab komentar, formulir bersarang bisa diperlukan untuk menghindari JavaScript. Saya menemukan ini karena saya ingin membuat bentuk untuk tombol "reset" subformulir, yang tidak memerlukan JavaScript untuk diaktifkan.
vol7ron


Jawaban:


459

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.


126
Saya setuju dengan jawabannya, tetapi untuk bertanya yang lain, mengapa tidak? Mengapa HTML tidak mengizinkan formulir bersarang? Bagi saya, tampaknya menjadi batasan bahwa kita akan lebih baik tanpanya. Ada banyak contoh di mana menggunakan formulir bersarang akan lebih mudah diprogram (yaitu menggunakan formulir unggah foto dengan formulir edit profil).
Ryan

20
@Nilzor dia tidak bertanya apakah itu tidak bisa dilakukan, dia bertanya MENGAPA tidak. Saya setuju; bentuk bersarang sebenarnya sangat berguna. Jadi, jika Anda memiliki aplikasi satu halaman dengan tab, setiap tab adalah formulirnya sendiri (sehingga Anda dapat mengirimkannya untuk menyimpan kemajuan), dan semuanya dibungkus dalam formulir, yang dapat Anda kirim untuk menyimpan semuanya. Masuk akal bagi saya.
Rob Grant

5
Saya setuju dengan apa yang dikatakan orang lain. Batasan ini tampaknya sewenang-wenang dan berbahaya.
Agustus

12
Jadi kita perlu HTML 5.1 dengan formulir bersarang.
Hector

3
Masalah dengan formulir bersarang adalah arsitektur formulir dalam HTML, di mana tindakan di dalam formulir itu mengarah ke acara pengiriman. Pertanyaannya adalah tentang apa yang perlu disampaikan. Anda mungkin memiliki beberapa bidang dalam formulir, atau beberapa formulir di dalam div, tetapi tidak benar-benar masuk akal untuk memiliki formulir di dalam formulir. Jika konten berjalan bersama, itu semua satu bentuk; jika konten dikirimkan secara terpisah, itu benar-benar formulir terpisah yang tidak memerlukan formulir luar.
Kyle Baker

96

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.


1
ini bekerja dengan baik! harus dimasukkan dalam jawaban yang diterima
Nahouto

1
Untuk menunjukkan tabel dukungan browser: caniuse.com/#feat=form-attribute Resuming - berfungsi di mana saja (Chrome, Firefox, Opera, Egde, Safari, browser Android ...) kecuali IE (termasuk yang terbaru sekarang v11) .
dmikam

@ cliff-burton, apa bedanya di sini? Saya hanya bisa melihat input di luar formulir. JS masih perlu mengirimkan kedua formulir sekaligus. Bukan?
sdlins

Eh, sudah lama sejak terakhir kali saya menggunakan ini tapi saya pikir JS tidak diperlukan untuk mengirimkan formulir. Asalkan <input type="submit"terhubung dengan nya <form>yang menentukan action, <input />(s) terkait dengan yang sama <form>akan digunakan dalam permintaan itu
Cliff Burton

90

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

43

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

31

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 )


Ini adalah jawaban yang saya cari :) Dan ya itu masuk akal untuk bentuk sarang karena jika Anda memiliki banyak tab tetapi Anda ingin melakukan validasi hanya pada satu tab, maka dengan bentuk bersarang Anda dapat melakukannya.
NeverGiveUp161

Apakah sama untuk komponen web?
Gangadhar JANNU

31

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.


apa bedanya di sini? Saya hanya bisa melihat input di luar formulir. JS masih perlu mengirimkan kedua formulir sekaligus. Bukan?
sdlins

@sdlins Tidak, idenya adalah gaya komponen utama dan sub-komponen seperti yang Anda inginkan, bersarang. 2 tag bentuk yang sebenarnya tidak akan terlihat. Setiap tombol kirim akan memicu form masing-masing mengirimkan. Tidak diperlukan javascript.
Materi iklan

jika Anda ingin memicu hanya satu atau bentuk lainnya, ok. Tetapi bagaimana cara mengatasinya ketika Anda perlu memicu & quot; induk & quot; bentuk dengan bentuk anaknya seperti itu satu dan tanpa js?
sdlins

@ddins bukan itu pertanyaan ini. Pertanyaannya adalah tentang 2 bentuk yang berbeda, tetapi membuatnya bersarang. Saya ingin tahu mengapa Anda ingin memiliki 2 formulir tetapi masih 1 fungsi ajukan? Tidak bisakah Anda memiliki 1 formulir saja? Anda memang harus menggunakan javascript untuk sesuatu yang seaneh itu: P
Creative

ya, Anda benar, itu bukan pertanyaan OP. Saya akan memposting sendiri. Terima kasih!
sdlins

12

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!


11

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


Saya membuat halaman troli saya seperti itu, dia hanya pergi dengan cara yang berbeda dan tidak ingin mengubahnya. Saya tidak positif jika metodenya juga valid.
Levi

9

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


23
Saya tidak tahu mengapa Anda memposting pertanyaan yang telah dijawab 3 setengah tahun, tetapi yang lebih bermasalah adalah tautan ke HTML3 yang belum menjadi rekomendasi untuk waktu yang lama.
Aidiakapi

7
Ini adalah referensi untuk berapa lama pertanyaan mendasar telah dijawab, yang saya yakini konstruktif. Saya juga menemukan bebas taktik, "Perhatikan bahwa Anda tidak diizinkan untuk elemen elemen FORMULIR!" dalam spesifikasi untuk menjadi lucu.
Mark Peterson

1
Ini masalah karena saya harus memasukkan API yang merupakan formulir dan karena aplikasi .net (yang membungkus tag <form> di sekitar segalanya). Bagaimana Anda mengatasi masalah ini.
jelly46

4

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.


1
Waktu untuk iframe
muhammad tayyab

3

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.


ini tidak menjawab pertanyaan tetapi ini hanya membantu saya memecahkan masalah lain yang saya miliki sehingga memberikan upvote
codeAndStuff

abaikan di atas (tidak akan saya edit setelah 5 menit ... hmm). bantuan besar di sini - persis memetakan apa yang saya coba lakukan pagi ini. ini sebabnya kami semua suka SO
codeAndStuff

2

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.


2

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


2

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.


1

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.


1

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>

ketika saya mencoba ini di chrome itu output ini <form name = "mainForm"> </form> <form name = "subForm"> </form>
ianace

1
Apakah Anda mencoba dengan tombol kirim. Saya menggunakan metode ini berkali-kali dan selalu berhasil.
Fatih

10
Ini merupakan pelanggaran terhadap spesifikasi dan menggunakannya untuk memohon masalah di masa depan.
Oskar Berggren

Versi webkit yang lebih baru hanya menghapus elemen formulir bersarang.
perempuan

0

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/


0

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


0

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

-1

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.


-1

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.