Başka bir html formunun içinde bir html formunun olması geçerli midir?

331

Aşağıdakilere sahip olmak geçerli html mi?

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

Yani "b" yi gönderdiğinizde alanları sadece iç formda alırsınız. "A" gönderdiğinizde tüm alanları eksi "b" içindeki alanlardan alırsınız.

Mümkün değilse, bu durum için hangi geçici çözümler mevcuttur?

html  web-standards  standards-compliance 
— allyourcode
kaynak
28
Bana öyle geliyor ki, bu aslında db arabirimlerinden tanıdık gelen çok yaygın bir ihtiyaçtır - Bir form A tablosunu güncelleştirirse ve bu tablonun B tablosuna bağlı bir alanı varsa, genellikle bunun için girişleri güncellemenin veya oluşturmanın bir yolunu isteriz geçerli formdan ayrılmak zorunda kalmadan bağlantılı alan. Yuvalanmış alt formlar bunu yapmanın çok sezgisel bir yolu olacaktır (ve çeşitli masaüstü veritabanları tarafından uygulanan kullanıcı arayüzüdür).
— monotasker
3
Geçerli değil. Geçici çözümler var, ancak bu verileri elde etmek için başka bir yöntem kullanıyor olmalısınız. Tüm verileri bir PHP posta komut dosyasına gönderen bir form düşünün; bu, daha sonra bir parçayı (a'dan gelen kısım) bir e-posta olarak ve parçayı (b'den gelen kısım) başka bir e-posta olarak gönderir. Veya bir veritabanına veya bu verilerle ne yaparsanız yapın. Yuvalama formları yapılabilir ancak cevap DEĞİLDİR!
2
— kullanıcı
Soru iyi, ancak hızlı bir google araması (sağlanan bağlantıları bile tıklatmadan) formlardaki formların geçerli olup olmadığını gösterir. Ben şahsen, @Andreas cevabını beğendim.
— Jarett Lloyd

Yanıtlar:

380

A. Geçerli HTML veya XHTML değil

Resmi W3C XHTML spesifikasyonunda, Bölüm B. "Eleman Yasakları", şunları belirtir:

"form must not contain other form elements."

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

Eski HTML 3.2 spesifikasyonlarına gelince , FORMS öğesindeki bölüm şunları belirtir:

"Her form bir FORM öğesi içine alınmalıdır. Tek bir belgede birkaç form olabilir, ancak FORM öğesi yuvalanamaz."

B. Geçici Çözüm

Form etiketlerini yerleştirmeye gerek kalmadan JavaScript kullanmanın geçici çözümleri vardır.

"Yuvalanmış bir form nasıl oluşturulur." (başlık rağmen bu olduğunu değil biçim etiketleri iç içe ama bir JavaScript Geçici çözüm).

Bu StackOverflow sorusunun yanıtları

Not: W3C Doğrulayıcıları, DOM'u komut dosyası aracılığıyla manipüle ederek bir sayfa geçirmeleri için kandırabilir, ancak yine de yasal HTML değildir. Bu tür yaklaşımları kullanmayla ilgili sorun, kodunuzun davranışının tarayıcılarda artık garanti edilmemesidir. (standart olmadığı için)

— Geneq
kaynak
4
Yukarıdaki yorumuma bakın .... Bu harika bir cevap, harika bir çözüm, ama korkunç bir uygulamadır. Aynı şeyi bir PHP betiğine tüm verileri gönderme ve oradan kendi hedeflerine bölme ve gönderme ile daha az güçlükle yapabilirsiniz. Harika soruya cevap vermiş olsanız da, bu sadece kötü ve anlamsız bir uygulamadır, çünkü daha kısa sürede doğru şekilde yapabilirsiniz.
53

Birisi bu yazı bulmak durumunda JS gerek kalmadan harika bir çözümdür. Farklı ad özelliklerine sahip iki gönderme düğmesi kullanın sunucu dilinizde kontrol edin, hangi gönderme düğmesine basıldığından bunlardan yalnızca biri sunucuya gönderilir.

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

Eğer php kullanıyorsanız sunucu tarafı böyle bir şey olabilir:

<?php
    if(isset($_POST['save']))
        echo "Stored!";
    else if(isset($_POST['delete']))
        echo "Deleted!";
    else
        echo "Action is missing!";
?>
— Andreas
kaynak
Bu aynı değildir, bu durumda aynı sayfaya gitmek ve farklı eylemler yapmak istersiniz, 2 formla farklı sayfalara gidebilir ve / VEYA her durumda farklı bilgiler gönderebilirsiniz.
— Luis Tellez
Bir php dosyasını sarmalayıcı olarak kullanabilir ve kodu farklı dosyalarda istiyorsanız istediğiniz herhangi bir dosyayı ekleyebilirsiniz. Yani (echo "depolandı!";) Yazabilirsiniz ("a.php" ekleyin;)
— Andreas
Formumda birden çok silme düğmesi var (burada iç içe bir form göz önünde bulundurularak gelmemin nedeni) 1 ve her bir kayıt için toplu bir silme yapmak için her bir liste onay kutusu. Yanıtınız ben şimdi sayısal im ve toplu silme ile bireysel silme düğmelerini adlandırmak gerektiğini düşünüyorum benim plan im yeniden düşünmek istedi. Ben php sıralama yapmak yapmak.
— Chris
@Andreas parada. Form girdisinin yorumlanma şeklini değiştirmek için doğal çözüm budur. Post / Redirect / Get kullanıyorsanız, hedef de değişebilir. Ancak, sunucu tarafında eylemlerinizi tek bir 'aORb' uç noktasına birleştirmek için esnekliğiniz yoksa, korktuğum bir kesmekle sıkışıp kaldığınızı düşünüyorum.
27

HTML 4.x ve HTML5 iç içe formlara izin vermiyor, ancak HTML5 "form" özniteliği ("form sahibi") ile bir geçici çözüm sağlar.

HTML 4.x'e gelince:

  1. Girdilerini ayarlamak ve formu göndermek için yalnızca gizli alanlara ve JavaScript'e sahip ek formlar kullanın.
  2. Tek bir varlık gibi görünmek için birkaç HTML formu sıralamak için CSS kullanın - ama bence bu çok zor.
— Nishi
kaynak
1
Bunun neden aşağı oy verildiğinden emin değilim. Form sahiplerinin W3C bölümüne bağlantı: w3.org/TR/html5/…
— SooDesuNe
5
@SooDesuNe bağlantınız güncel değil, işte yenisi w3.org/TR/html5/forms.html#form-owner
— chiliNUT
13

Diğerlerinin söylediği gibi, geçerli bir HTML değildir.

Formları görsel olarak birbirine yerleştirmek için bunu yapıyormuşsunuz gibi geliyor. Bu durumda, iki ayrı form yapın ve bunları konumlandırmak için CSS kullanın.

— user64075
kaynak
1
Web sitem için ihtiyaç duyacağımı düşündüğüm şey bu, ancak bunun nasıl yapılacağına dair bir örnek isterdim.
— Brian Peterson
8

Hayır, HTML belirtimi hiçbir FORMöğenin başka bir FORMöğe içermemesi gerektiğini belirtir .

— David Grant
kaynak
5

W3 Doğrulayıcısına HTML kodunu girerek kendi sorunuzu çok kolay bir şekilde cevaplayabilirsiniz . (Bir metin giriş alanı içerir, kodunuzu bir sunucuya koymak zorunda kalmazsınız ...)

(Ve hayır, onaylanmayacak.)

— Christian Studer
kaynak
5

bunun yerine formun action özelliğinde özel bir javascript yöntemi kullanın!

Örneğin

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

Dış formun içinde bir iframe bulunma olasılığı vardır. İframe iç formu içerir. <base target="_parent" />Formun ana sayfanın bir parçası olarak davranmasını sağlamak için iframe'in baş etiketi içindeki etiketi kullandığınızdan emin olun .

— Robin Manoli
kaynak
1

Hayır, geçerli değil. Ancak bir "çözüm", "a" formunun dışında "b" formunu içeren kalıcı bir pencere oluşturabilir.

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

Eğer bootstrap kullanıyorsanız veya css gerçekleştiriyorsanız kolayca yapılabilir. Bunu iframe kullanmaktan kaçınmak için yapıyorum.

— Jonathas Hortense
kaynak
0

Form etiketlerini yerleştirmek için JavaScript olmayan bir geçici çözüm:

Çünkü izin veriyorsun

tüm alanlar eksi "b" içindekiler.

"a" gönderirken, süslü JavaScript hileleri olmadan normal web formlarını kullanarak aşağıdakiler işe yarar:

Adım 1. Her formu kendi web sayfasına koyun.

Adım 2. Bu alt formun görünmesini istediğiniz yere bir iframe ekleyin.

Adım 3. Kâr.

Bir demo göstermek için bir kod bahçesi web sitesi kullanmaya çalıştım, ancak birçoğu kendi web sitelerinde bile kendi web sitelerini iframe'lere yerleştirmeyi yasaklıyor.

— ADJenks
kaynak
-1

1: M ilişkisel veritabanına veri göndermek / işlemek için formunuza ihtiyacınız varsa, tablo A için gerekli verileri ekleyecek olan Tablo A'da "eklendikten sonra" bir DB tetikleyici oluşturmanızı öneririm.

— cbWrites
kaynak
-2

Hayır, geçerli değil ama iç form konumunuzu HTMLyardımıyla CSSve jQuerykullanımıyla kandırabilirsiniz . Önce ana formunuzun içinde bir kapsayıcı div oluşturun ve daha sonra sayfadaki başka herhangi bir yerde div (alt) formunuzla birlikte div oluşturun:

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

Konteynırınıza biraz istikrarlı ağırlık verin

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

Teşekkürler trick "other_form" konumu nispeten div 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>

Not: Güzel görünmesi için sayılarla oynamanız gerekecek.

— Yaroslav Varkhol
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.