以下是有效的html:

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

当你提交b时,你只能得到内部表单中的字段。当你提交“a”时,你会得到所有字段减去“b”内的字段。

如果不可能,对于这种情况有什么可行的变通办法?


当前回答

通过将HTML代码输入W3 Validator,您可以非常容易地回答自己的问题。(它有一个文本输入域,你甚至不需要把你的代码放在服务器上…)

(不,它不会生效。)

其他回答

如果有人发现这篇文章是一个不需要JS的伟大解决方案。使用两个具有不同名称属性的提交按钮,在您的服务器语言中检查哪个提交按钮被按下,因为只有一个将被发送到服务器。

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

如果你使用php,服务器端看起来是这样的:

<?php
    if(isset($_POST['save']))
        echo "Stored!";
    else if(isset($_POST['delete']))
        echo "Deleted!";
    else
        echo "Action is missing!";
?>

您正在尝试实现HTML中不支持的嵌套表单。

每个表单都必须包含在form元素中。有可能 在一个文档中包含多个表单,但是FORM元素不能 嵌套。

解决方案

您可以通过对HTML和JavaScript进行一些更改来实现此功能。(不使用HTML表单)

步骤 1. 用div标签创建两个表单,如下所示(不使用表单标签)

<div id="form_a">
 <input.../>
     <div id="form_b">
        <input.../>
        <input.../>
        <button id="submit_b">Submit B</button>
     </div>
 <input.../>
 <button id="submit_a">Submit A</button>
</div >

2. 添加JQuery和Ajax来提交每个表单数据

    <script>
    // Submit form A data
    $('#submit_a').click( function() {
          $.ajax({
            url: 'ajax-url',
            type: 'post',
            dataType: 'json',
            data: $('#form_a input').not( "#form_b input" ).serialize(),
            success: function(data) {
                       // ... do something with the data...
                     }
        });
        });

   // Submit form B data
    $('#submit_b').click( function() {
          $.ajax({
            url: 'ajax-url',
            type: 'post',
            dataType: 'json',
            data: $('#form_b input').serialize(),
            success: function(data) {
                       // ... do something with the data...
                     }
        });
        });
    </script>

如果你需要你的表单向1:M关系数据库提交/提交数据,我建议在表a上创建一个“插入后”DB触发器,它将为表B插入必要的数据。

作为解决方案,你可以在提交按钮上使用formaction属性。输入时用不同的名字。

<form action="a">
<input.../>
    <!-- Form 2 inputs -->
    <input.../>
    <input.../>
    <input.../>
    <input type="submit" formaction="b">

</form>
<input.../>

HTML 4。x & HTML5不允许嵌套表单,但HTML5允许使用“form”属性(“form owner”)。

至于HTML 4。X你可以:

使用一个只有隐藏字段和JavaScript的额外表单来设置其输入并提交表单。 使用CSS来排列几个HTML表单,使其看起来像一个单一的实体-但这可能很复杂。