Допустимо ли иметь HTML-форму внутри другой HTML-формы? - PullRequest
Новая
       60

Допустимо ли иметь HTML-форму внутри другой HTML-формы?

296 голосов
/ 17 февраля 2009

Допустим ли html следующее: 

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

Поэтому, когда вы отправляете «b», вы получаете только поля во внутренней форме. Когда вы отправляете «а», вы получаете все поля, кроме «б».

Если это невозможно, какие обходные пути для этой ситуации доступны?

Ответы [ 11 ]

344 голосов
/ 17 февраля 2009

A. Это недопустимый HTML или XHTML

В официальной спецификации W3C XHTML, раздел B. «Запрещение элементов», говорится, что: 

"form must not contain other form elements."

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

Что касается более старых HTML 3.2 spec , раздел элемента FORMS гласит:

"Каждая форма должна быть заключена в Элемент ФОРМА. Там может быть несколько формы в одном документе, но Элемент FORM не может быть вложенным. "

B. Обходной путь

Существуют обходные пути, использующие JavaScript без необходимости вложения тегов форм.

"Как создать вложенную форму." (несмотря на заголовок это не теги вложенной формы, но обходной путь JavaScript).

Ответы на этот вопрос StackOverflow

Примечание: Несмотря на то, что можно проверять валидаторы W3C, чтобы они пропускали страницу, манипулируя DOM с помощью сценариев, но это все еще не разрешенный HTML. Проблема с использованием таких подходов заключается в том, что поведение вашего кода теперь не гарантируется во всех браузерах. (так как это не стандартно)

48 голосов
/ 31 мая 2012

Если кто-то найдет этот пост, это отличное решение без необходимости использования 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!";
?>
24 голосов
/ 14 мая 2010

HTML 4.x и HTML5 запрещают вложенные формы, но HTML5 разрешит обходной путь с атрибутом «form» («владелец формы»).

Что касается HTML 4.x, вы можете:

  1. Используйте дополнительные формы с только скрытыми полями и JavaScript, чтобы установить свои входные данные и отправить форму.
  2. Используйте CSS, чтобы выстроить несколько HTML-форм, чтобы они выглядели как единое целое, но я думаю, что это слишком сложно.
13 голосов
/ 17 февраля 2009

Как уже говорили другие, это недействительный HTML.

Похоже, вы делаете это, чтобы визуально расположить формы друг в друге. Если это так, просто создайте две отдельные формы и используйте CSS для их размещения.

7 голосов
/ 17 февраля 2009

Нет, спецификация HTML гласит, что ни один элемент FORM не должен содержать другой элемент FORM.

6 голосов
/ 17 февраля 2009

лучше использовать собственный javascript-метод внутри атрибута действия формы!

например 

<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>
5 голосов
/ 27 февраля 2012

Возможность состоит в том, чтобы иметь iframe внутри внешней формы. Iframe содержит внутреннюю форму. Обязательно используйте тег <base target="_parent" /> внутри тега заголовка iframe, чтобы форма работала как часть главной страницы.

5 голосов
/ 17 февраля 2009

Вы можете очень легко ответить на свой вопрос, введя HTML-код в W3 Validator . (Имеет поле для ввода текста, вам даже не придется размещать свой код на сервере ...)

(И нет, оно не будет подтверждено.)

5 голосов
/ 17 февраля 2009

нет, см w3c

2 голосов
/ 06 августа 2017

Нет, это недействительно. Но «решением» может быть создание модального окна вне формы «a», содержащего форму «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>

Это легко сделать, если вы используете bootstrap или материализуете css. Я делаю это, чтобы избежать использования iframe.

Страница:
...