发表新帖
发表新帖

Is it valid to have a html form inside another html form?

前端 未结
关注
14 1729
故里飘歌
故里飘歌 2020-11-22 06:01

Is it valid html to have the following:
相关标签:
14条回答
  • 甜味超标
    2020-11-22 06:39

    A. It is not valid HTML nor XHTML

    In the official W3C XHTML specification, Section B. "Element Prohibitions", states that:

    "form must not contain other form elements."

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

    As for the older HTML 3.2 spec, the section on the FORMS element states that:

    "Every form must be enclosed within a FORM element. There can be several forms in a single document, but the FORM element can't be nested."

    B. The Workaround

    There are workarounds using JavaScript without needing to nest form tags.

    "How to create a nested form." (despite title this is not nested form tags, but a JavaScript workaround).

    Answers to this StackOverflow question

    Note: Although one can trick the W3C Validators to pass a page by manipulating the DOM via scripting, it's still not legal HTML. The problem with using such approaches is that the behavior of your code is now not guaranteed across browsers. (since it's not standard)

    0 讨论(0)
  • -上瘾入骨i
    2020-11-22 06:43

    HTML 4.x & HTML5 disallow nested forms, but HTML5 will allow a workaround with "form" attribute ("form owner").

    As for HTML 4.x you can:

    1. Use an extra form(s) with only hidden fields & JavaScript to set its input's and submit the form.
    2. Use CSS to line up several HTML form to look like a single entity - but I think that's too hard.
    0 讨论(0)
  • 时光说笑
    2020-11-22 06:44

    rather use a custom javascript-method inside the action attribute of the form!

    eg

    <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>
    0 讨论(0)
  • 青春惊慌失措
    2020-11-22 06:47

    A possibility is to have an iframe inside the outer form. The iframe contains the inner form. Make sure to use the <base target="_parent" /> tag inside the head tag of the iframe to make the form behave as part of the main page.

    0 讨论(0)
  • 没有蜡笔的小新
    2020-11-22 06:51

    No, it is not valid but you can trick your inner form position on the HTML with a help of CSS and jQuery usage. First create some container div inside your parent form and then in any other place on the page the div with your child (inner) form:

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

    Give your container div some stable heaght

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

    Thank trick the "other_form" position relatively to container 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>

    P.S.: You'll have to play with numbers to make it look nice.

    0 讨论(0)
  • 名媛妹妹
    2020-11-22 06:54

    As others have said, it is not valid HTML.

    It sounds like your are doing this to position the forms visually within each other. If that is the case, just do two separate forms and use CSS to position them.

    0 讨论(0)
 看不清?
提交回复
热议问题