Apakah valid untuk memiliki formulir html di dalam formulir html lain?

331

Apakah html valid memiliki yang berikut:

<form action="a">
    <input.../>
    <form action="b">
        <input.../>
        <input.../>
        <input.../>
    </form>
    <input.../>
</form>

Jadi, ketika Anda mengirimkan "b" Anda hanya mendapatkan bidang dalam formulir batin. Saat Anda mengirimkan "a" Anda mendapatkan semua bidang dikurangi yang ada di dalam "b".

Jika tidak memungkinkan, solusi apa untuk situasi ini tersedia?

html  web-standards  standards-compliance 
— semua kode Anda
sumber
28
Tampaknya bagi saya bahwa ini sebenarnya adalah kebutuhan yang sangat umum yang akrab dengan antarmuka db - Jika formulir memperbarui tabel A, dan tabel tersebut memiliki bidang yang ditautkan ke tabel B, kami sering menginginkan cara untuk memperbarui atau membuat entri untuk itu bidang yang ditautkan tanpa harus meninggalkan formulir saat ini. Sub-bentuk bersarang akan menjadi cara yang sangat intuitif untuk melakukannya (dan ini adalah ui yang diimplementasikan oleh beberapa database desktop).
— monotasker
3
Itu tidak valid. Ada beberapa solusi tetapi Anda harus menggunakan metode lain untuk mendapatkan data ini. Pertimbangkan satu formulir mengirim semua data ke skrip surat PHP, yang kemudian mengirimkan bagian (bagian dari a) sebagai satu email, dan bagian (bagian dari b) sebagai email lain. Atau ke dalam basis data, atau apa pun yang Anda lakukan dengan data ini. Formulir bersarang bisa dilakukan tetapi BUKAN jawabannya!
2
— pengguna
Pertanyaannya bagus, tetapi pencarian cepat Google (tanpa mengklik tautan yang disediakan bahkan) mengungkapkan apakah formulir dalam formulir valid atau tidak. Saya, secara pribadi, menyukai jawaban Australia.
— Jarett Lloyd

Jawaban:

380

A. Ini bukan HTML atau XHTML yang tidak valid

Dalam spesifikasi XHTML W3C resmi, Bagian B. "Larangan Elemen", menyatakan bahwa:

"form must not contain other form elements."

http://www.w3.org/TR/xhtml1/#prohibitions

Adapun spesifikasi HTML 3.2 yang lebih lama , bagian pada elemen FORMS menyatakan bahwa:

"Setiap formulir harus dilampirkan dalam elemen FORMULIR. Mungkin ada beberapa bentuk dalam satu dokumen, tetapi elemen FORMULIR tidak bisa disarangkan."

B. Penyelesaiannya

Ada pemecahan masalah menggunakan JavaScript tanpa perlu membuat tag bentuk sarang.

"Cara membuat formulir bersarang." (meskipun judul ini bukan tag bentuk bersarang, tetapi solusi JavaScript).

Jawaban untuk pertanyaan StackOverflow ini

Catatan: Meskipun seseorang dapat menipu Validator W3C untuk melewati halaman dengan memanipulasi DOM melalui skrip, itu masih bukan HTML legal. Masalah dengan menggunakan pendekatan seperti itu adalah bahwa perilaku kode Anda sekarang tidak dijamin di seluruh browser. (karena itu bukan standar)

— GeneQ
sumber
4
Lihat komentar saya di atas .... Ini adalah jawaban yang bagus, latihan yang bagus, tetapi praktik yang mengerikan. Anda dapat melakukan hal yang sama persis dengan lebih mudah mengirimkan semua data ke skrip PHP dan membagi serta mengirim ke tujuan mereka sendiri dari sana. Meskipun, Anda menjawab pertanyaan yang bagus, itu hanya praktik yang buruk dan tidak berguna karena Anda bisa melakukannya dengan cara yang benar dalam waktu yang lebih singkat.
53

Jika seseorang menemukan posting ini di sini adalah solusi yang bagus tanpa perlu JS. Gunakan dua tombol kirim dengan nama atribut yang berbeda periksa dalam bahasa server Anda yang tombol kirim ditekan karena hanya satu dari mereka yang akan dikirim ke server.

<form method="post" action="ServerFileToExecute.php">
    <input type="submit" name="save" value="Click here to save" />
    <input type="submit" name="delete" value="Click here to delete" />
</form>

Sisi server bisa terlihat seperti ini jika Anda menggunakan php:

<?php
    if(isset($_POST['save']))
        echo "Stored!";
    else if(isset($_POST['delete']))
        echo "Deleted!";
    else
        echo "Action is missing!";
?>
— Andreas
sumber
Ini tidak sama, dalam hal ini Anda ingin pergi ke halaman yang sama dan melakukan tindakan berbeda, dengan 2 formulir Anda dapat pergi ke halaman yang berbeda Dan / ATAU memiliki informasi yang berbeda dikirim dalam setiap kasus.
— Luis Tellez
Anda bisa menggunakan file php sebagai pembungkus dan memasukkan file apa pun yang Anda inginkan jika Anda menginginkan kode dalam file yang berbeda. Jadi alih-alih (gema "disimpan!";) Anda bisa menulis (termasuk "a.php";)
— Andreas
Saya memiliki beberapa tombol hapus dalam formulir saya (alasan saya datang ke sini mengingat formulir bersarang) 1 untuk setiap catatan dan kotak centang daftar pada masing-masing untuk melakukan penghapusan massal. Tanggapan Anda telah mendorong saya untuk memikirkan kembali rencana saya dan saya berpikir sekarang bahwa saya harus memberi nama tombol untuk penghapusan individu dengan id numerik dan penghapusan massal seperti itu. Il membuat php melakukan penyortiran.
— Chris
@ Andreas ada di uang. Ini adalah solusi alami untuk memvariasikan bagaimana input formulir ditafsirkan. Jika Anda menggunakan Post / Redirect / Get maka tujuan dapat bervariasi juga. Namun, jika Anda tidak memiliki fleksibilitas di sisi server untuk menggabungkan tindakan Anda menjadi titik akhir 'aORb' maka saya pikir Anda terjebak dengan peretasan, saya khawatir.
27

HTML 4.x & HTML5 melarang formulir bersarang, tetapi HTML5 akan memungkinkan penyelesaian dengan atribut "form" ("form owner").

Sedangkan untuk HTML 4.x Anda dapat:

  1. Gunakan formulir tambahan dengan hanya bidang tersembunyi & JavaScript untuk mengatur inputnya dan mengirimkan formulir.
  2. Gunakan CSS untuk menyusun beberapa formulir HTML agar terlihat seperti satu entitas - tapi saya pikir itu terlalu sulit.
— Nishi
sumber
1
Tidak yakin mengapa ini tidak dipilih. Berikut link ke bagian W3C dari pemilik bentuk: w3.org/TR/html5/...
— SooDesuNe
5
@SooDesuNe link Anda adalah dari tanggal, di sini adalah yang baru w3.org/TR/html5/forms.html#form-owner
— chiliNUT
13

Seperti yang dikatakan orang lain, ini bukan HTML yang valid.

Sepertinya Anda melakukan ini untuk memposisikan formulir secara visual di dalam satu sama lain. Jika itu masalahnya, lakukan saja dua formulir terpisah dan gunakan CSS untuk memposisikannya.

— pengguna64075
sumber
1
Ini adalah apa yang saya pikir akan saya butuhkan untuk situs web saya, tetapi akan menyukai contoh bagaimana melakukan ini.
— Brian Peterson
8

Tidak, spesifikasi HTML menyatakan bahwa tidak ada FORMelemen yang boleh mengandung FORMelemen lain .

— David Grant
sumber
5

Anda dapat menjawab pertanyaan Anda sendiri dengan sangat mudah dengan memasukkan kode HTML ke Validator W3 . (Ini fitur bidang input teks, Anda bahkan tidak perlu meletakkan kode Anda di server ...)

(Dan tidak, itu tidak akan divalidasi.)

— Christian Studer
sumber
5

alih-alih gunakan metode javascript khusus di dalam atribut action dari form!

misalnya

<html>
    <head>
        <script language="javascript" type="text/javascript">
        var input1 = null;
        var input2 = null;
        function InitInputs() {
            if (input1 == null) {
                input1 = document.getElementById("input1");
            }
            if (input2 == null) {
                input2 = document.getElementById("input2");
            }

            if (input1 == null) {
                alert("input1 missing");
            }
            if (input2 == null) {
                alert("input2 missing");
            }
        }
        function myMethod1() {
            InitInputs();
            alert(input1.value + " " + input2.value);
        }
        function myMethod2() {
            InitInputs();
            alert(input1.value);
        }
        </script>
    </head>
    <body>
        <form action="javascript:myMethod1();">
            <input id="input1" type="text" />
            <input id="input2" type="text" />
            <input type="button" onclick="myMethod2()" value="myMethod2"/>
            <input type="submit" value="myMethod1" />
        </form>
    </body>
</html>
— Andreas Niedermair
sumber
5

Kemungkinan adalah memiliki iframe di dalam bentuk luar. Iframe berisi bentuk batin. Pastikan untuk menggunakan <base target="_parent" />tag di dalam tag kepala iframe untuk membuat formulir berperilaku sebagai bagian dari halaman utama.

— Robin Manoli
sumber
1

Tidak, ini tidak valid. Tetapi "solusi" dapat membuat jendela modal di luar bentuk "a" yang berisi bentuk "b".

<div id="myModalFormB" class="modal">
    <form action="b">
        <input.../>
        <input.../>
        <input.../>
        <button type="submit">Save</button>
    </form>
</div>

<form action="a">
    <input.../>
    <a href="#myModalFormB">Open modal b </a>
    <input.../>
</form>

Ini dapat dengan mudah dilakukan jika Anda menggunakan bootstrap atau mematerialisasi css. Saya melakukan ini untuk menghindari menggunakan iframe.

— Jonathas Hortense
sumber
0

Solusi non-JavaScript untuk tag formulir bersarang:

Karena Anda mengizinkan

semua bidang minus yang ada di dalam "b".

saat mengirimkan "a", yang berikut ini akan berfungsi, menggunakan formulir web biasa tanpa trik JavaScript yang bagus:

Langkah 1. Letakkan setiap formulir di halaman web sendiri.

Langkah 2. Masukkan iframe di mana pun Anda ingin sub-formulir ini muncul.

Langkah 3. Keuntungan.

Saya mencoba menggunakan situs web kode-bermain untuk menunjukkan demo, tetapi banyak dari mereka melarang menyematkan situs web mereka di iframe, bahkan di dalam domain mereka sendiri.

— ADJenks
sumber
-1

Jika Anda memerlukan formulir Anda untuk mengirim / mengkomit data ke database relasional 1: M, saya akan merekomendasikan membuat pemicu DB "setelah disisipkan" pada tabel A yang akan memasukkan data yang diperlukan untuk tabel B.

— cbWrites
sumber
-2

Tidak, ini tidak valid tetapi Anda dapat mengelabui posisi inner form Anda di atas HTMLdengan bantuan CSSdan jQuerypenggunaan. Pertama-tama buat beberapa wadah penampung di dalam formulir orang tua Anda dan kemudian di tempat lain di halaman mana div dengan formulir anak Anda (bagian dalam):

<form action="a">
    <input.../>
    <div class="row" id="other_form_container"></div>
    <input.../>
</form>

....

<div class="row" id="other_form">
    <form action="b">
        <input.../>
        <input.../>
        <input.../>
    </form>
</div>

Berikan kontainer Anda beberapa heaght stabil

<style>
  #other_form_container {
    height:90px;
    position:relative;
  }
</style>

Terima menipu trik posisi "other_form" relatif ke wadah div.

<script>
  $(document).ready(function() {
    var pos = $("#other_form_container").position();
    $("#other_form").css({
      position: "absolute",
      top: pos.top - 40,
      left: pos.left + 7,
      width: 500,
    }).show();
  });
</script>

PS: Anda harus bermain dengan angka untuk membuatnya terlihat bagus.

— Yaroslav Varkhol
sumber
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.