Как преодолеть ограничение вложенности HTML-формы?

Я знаю, что XHTML не поддерживает вложенные теги форм, и я уже читал другие ответы здесь на Stack Overflow относительно этой темы, но я до сих пор не нашел элегантного решения проблемы.

Некоторые говорят, что вам это не нужно, и что они не могут придумать сценарий, если бы это было необходимо. Ну, лично я не могу придумать сценарий, который мне не нужен.

Давайте посмотрим на очень простой пример:

Вы создаете приложение для блога, и у вас есть форма с некоторыми полями для создания нового сообщения и панель инструментов с «действиями», такими как «Сохранить», «Удалить», «Отмена».

<form
 action="/post/dispatch/too_bad_the_action_url_is_in_the_form_tag_even_though_conceptually_every_submit_button_inside_it_may_need_to_post_to_a_diffent_distinct_url"
method="post">

    <input type="text" name="foo" /> <!-- several of those here -->
    <div id="toolbar">
        <input type="submit" name="save" value="Save" />
        <input type="submit" name="delete" value="Delete" />
        <a href="/home/index">Cancel</a>
    </div>
</form>

Наша цель - написать форму так, чтобы она не требовала JavaScript , просто старая HTML-форма и кнопки отправки.

Поскольку URL-адрес действия определен в теге Form, а не в каждой отдельной кнопке отправки, наш единственный вариант - опубликовать общий URL-адрес, а затем запустить «if ... then ... else», чтобы определить имя кнопки, которая был представлен. Не очень элегантно, но наш единственный выбор, так как мы не хотим полагаться на JavaScript.

Единственная проблема заключается в том, что нажатие «Удалить» отправит ВСЕ поля формы на сервер, хотя единственное, что необходимо для этого действия, - это скрытый ввод с post-id. В этом небольшом примере нет ничего сложного, но у меня есть формы с сотнями (так сказать) полей и вкладок в моих LOB- приложениях, которые (из-за требований) должны отправлять все за один раз, и в любом случае это кажется очень неэффективным и трата. Если бы поддержка вложенных форм была поддержана, я бы по крайней мере смог бы обернуть кнопку «Удалить» внутри своей формы только с полем post-id.

Вы можете сказать «Просто внедрите« Удалить »как ссылку вместо отправки». Это было бы неправильно на многих уровнях, но самое главное, потому что побочные действия, такие как «Удалить», никогда не должны быть запросом GET.

Итак, мой вопрос (особенно к тем, кто говорит, что им не нужна вложенность форм): что ВЫ делаете? Есть ли какое-то элегантное решение, которое я пропускаю, или нижняя строка действительно "Требуется JavaScript или отправьте все"?

Я бы реализовал это точно так, как вы описали: отправьте все на сервер и сделайте простой if / else, чтобы проверить, какая кнопка была нажата.

И затем я реализовал бы вызов Javascript, связывающий событие onsubmit формы, который проверял бы перед отправкой формы, и только отправлял соответствующие данные на сервер (возможно, через вторую форму на странице с идентификатором, необходимым для обработки вещи как скрытый ввод, или обновите местоположение страницы с данными, которые вам нужно передать как запрос GET, или отправьте сообщение Ajax на сервер, или ...).

Таким образом, люди без Javascript могут нормально использовать форму, но нагрузка на сервер компенсируется, потому что люди, у которых есть Javascript, представляют только один необходимый фрагмент данных. Сосредоточение внимания только на поддержке одного или другого действительно ограничивает ваши возможности без необходимости.

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

Я знаю, что это старый вопрос, но HTML5 предлагает несколько новых опций.

Первый - это отделить форму от панели инструментов в разметке, добавить другую форму для действия удаления и связать кнопки на панели инструментов с соответствующими формами, используя formатрибут.

<form id="saveForm" action="/post/dispatch/save" method="post">
    <input type="text" name="foo" /> <!-- several of those here -->  
</form>
<form id="deleteForm" action="/post/dispatch/delete" method="post">
    <input type="hidden" value="some_id" />
</form>
<div id="toolbar">
    <input type="submit" name="save" value="Save" form="saveForm" />
    <input type="submit" name="delete" value="Delete" form="deleteForm" />
    <a href="/home/index">Cancel</a>
</div>

Эта опция довольно гибкая, но в оригинальном сообщении также упоминалось, что может потребоваться выполнить различные действия с одной формой. HTML5 снова приходит на помощь. Вы можете использовать formactionатрибут на кнопках отправки, чтобы разные кнопки в одной форме могли отправлять разные URL-адреса. В этом примере просто добавляется метод клонирования на панель инструментов вне формы, но он будет работать так же, как вложенный в форму.

<div id="toolbar">
    <input type="submit" name="clone" value="Clone" form="saveForm"
           formaction="/post/dispatch/clone" />
</div>

http://www.whatwg.org/specs/web-apps/current-work/#attributes-for-form-submission

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

Вы можете иметь формы рядом на странице, но не вложенные. затем использовать CSS, чтобы все кнопки выстроились в ряд?

<form method="post" action="delete_processing_page">
   <input type="hidden" name="id" value="foo" />
   <input type="submit" value="delete" class="css_makes_me_pretty" />
</form>

<form method="post" action="add_edit_processing_page">
   <input type="text" name="foo1"  />
   <input type="text" name="foo2"  />
   <input type="text" name="foo3"  />
   ...
   <input type="submit" value="post/edit" class="css_makes_me_pretty" />
</form>

В HTML5 есть идея «владелец формы» - атрибут «форма» для элементов ввода. Это позволяет эмулировать вложенные формы и решит проблему.

Вид старой темы, но эта может быть полезна для кого-то:

Как кто-то упоминал выше - вы можете использовать пустышку. Мне пришлось преодолеть эту проблему некоторое время назад. Сначала я полностью забыл об этом ограничении HTML и просто добавил вложенные формы. Результат был интересным - я потерял свою первую форму из вложенного. Тогда оказалось, что это своего рода «хитрость» - просто добавить фиктивную форму (которая будет удалена из браузера) перед фактическими вложенными формами.

В моем случае это выглядит так:

<form id="Main">
  <form></form> <!--this is the dummy one-->
  <input...><form id="Nested 1> ... </form>
  <input...><form id="Nested 1> ... </form>
  <input...><form id="Nested 1> ... </form>
  <input...><form id="Nested 1> ... </form>
  ......
</form>

Прекрасно работает с Chrome, FireFox и Safari. IE до 9 (не уверен около 10) и Opera не определяет параметры в основной форме. Глобальное $ _REQUEST пусто, независимо от входных данных. Внутренние формы, кажется, работают хорошо везде.

Не проверялось другое предложение, описанное здесь - набор полей вокруг вложенных форм.

РЕДАКТИРОВАТЬ : Frameset не работает! Я просто добавил основную форму после других (не больше вложенных форм) и использовал «клон» jQuery для дублирования входных данных в форме при нажатии кнопки. Добавлен .hide () к каждому из клонированных входов, чтобы сохранить макет без изменений, и теперь он работает как шарм.

Я думаю, что Джейсон прав. Если ваше действие «Удалить» является минимальным, сделайте так, чтобы оно было в форме само по себе, и выровняйте его с другими кнопками, чтобы интерфейс выглядел как одна унифицированная форма, даже если это не так.

Или, конечно, переделать ваш интерфейс и позволить людям полностью удалить что-то еще, что не требует, чтобы они вообще видели enormo-форму.

Один из способов сделать это без javascript - добавить набор переключателей, определяющих действие:

• Обновить
• Удалить
• Без разницы

Тогда скрипт действия будет выполнять разные действия в зависимости от значения переключателя.

Другим способом было бы разместить две формы на странице, как вы предложили, только не вложенные. Макет может быть трудно контролировать, хотя:

<form name = "editform" action = "the_action_url" method = "post">
   <input type = "hidden" name = "task" value = "update" />
   <input type = "text" name = "foo" />
   <input type = "submit" name = "save" value = "Save" />
</ Форма>

<form name = "delform" action = "the_action_url" method = "post">
   <input type = "hidden" name = "task" value = "delete" />
   <input type = "hidden" name = "post_id" value = "5" />
   <input type = "submit" name = "delete" value = "Удалить" />
</ Форма>

Использование скрытого поля «задача» в скрипте обработки для соответствующего ветвления.

Эта дискуссия по-прежнему интересует меня. За исходным постом стоят «требования», которые, по-видимому, разделяет ФП - то есть форма с обратной совместимостью. Как человек, чья работа на момент написания статьи иногда должна поддерживать IE6 (и на годы вперед), я копаю это.

Без продвижения структуры (все организации захотят убедиться в совместимости / надежности, и я не использую это обсуждение как оправдание для структуры), решения Drupal для этой проблемы интересны. Drupal также имеет прямое отношение, потому что у фреймворка давно существует политика «она должна работать без Javascript (только если вы хотите)», то есть проблема ОП.

Drupal использует довольно обширные функции form.inc, чтобы найти triggering_element (да, это имя в коде). Смотрите в нижней части кода, приведенного на странице API для form_builder (если вы хотите вникнуть в детали, рекомендуется источник - drupal-x.xx / includes / form.inc ). Построитель использует автоматическую генерацию HTML-атрибута и, таким образом, может по возвращении определить, какая кнопка была нажата, и действовать соответствующим образом (их также можно настроить для запуска отдельных процессов).

Помимо конструктора форм, Drupal разделяет действия по удалению данных на отдельные URL / формы, вероятно, по причинам, указанным в исходном посте. Для этого требуется какой-то шаг поиска / листинга ( стонать в другой форме!, Но удобный для пользователя) в качестве предварительного. Но это имеет то преимущество, что устраняет проблему «отправить все». Большая форма с данными используется по назначению, для создания / обновления данных (или даже для действия «слияния»).

Другими словами, один из способов решения проблемы состоит в том, чтобы разделить форму на две части, после чего проблема исчезает (и методы HTML также могут быть исправлены с помощью POST).

Используйте iframeдля вложенной формы. Если им нужно разделить поля, тогда ... это не совсем вложено.

Мое решение состоит в том, чтобы кнопки вызывали функции JS, которые пишут, а затем отправляют формы из основной формы.

<head>
<script>
function removeMe(A, B){
        document.write('<form name="removeForm" method="POST" action="Delete.php">');
        document.write('<input type="hidden" name="customerID" value="' + A + '">');
        document.write('<input type="hidden" name="productID" value="' + B + '">');
        document.write('</form>');
        document.removeForm.submit();
}
function insertMe(A, B){
        document.write('<form name="insertForm" method="POST" action="Insert.php">');
        document.write('<input type="hidden" name="customerID" value="' + A + '">');
        document.write('<input type="hidden" name="productID" value="' + B + '">');
        document.write('</form>');
        document.insertForm.submit();
}
</script>
</head>

<body>
<form method="POST" action="main_form_purpose_page.php">

<input type="button" name="remove" Value="Remove" onclick="removeMe('$customerID','$productID')">
<input type="button" name="insert" Value="Insert" onclick="insertMe('$customerID','$productID')">

<input type="submit" name="submit" value="Submit">
</form>
</body>

Если вы действительно не хотите использовать несколько форм (например, Jason sugests), используйте кнопки и обработчики onclick.

<form id='form' name='form' action='path/to/add/edit/blog' method='post'>
    <textarea name='message' id='message'>Blog message here</textarea>
    <input type='submit' id='save' value='Save'>
</form>
<button id='delete'>Delete</button>
<button id='cancel'>Cancel</button>

И затем в javascript (я использую jQuery здесь для простоты) (хотя это довольно излишне для добавления некоторых обработчиков onclick)

$('#delete').click( function() {
   document.location = 'path/to/delete/post/id'; 
});
$('#cancel').click( function() {
   document.location = '/home/index';
});

Также я знаю, что это сделает половину страницы не работающей без JavaScript.

В ответ на вопрос, размещенный Яром в комментарии к его собственному ответу, я представляю некоторый JavaScript, который изменит размер iframe. В случае кнопки формы можно с уверенностью предположить, что iframe будет в том же домене. Это код, который я использую. Вам придется изменить математические / константы для вашего собственного сайта:

function resizeIFrame(frame)
{
    try {
        innerDoc = ('contentDocument' in frame) ? frame.contentDocument : frame.contentWindow.document;
        if('style' in frame) {
            frame.style.width = Math.min(755, Math.ceil(innerDoc.body.scrollWidth)) + 'px';
            frame.style.height = Math.ceil(innerDoc.body.scrollHeight) + 'px';
        } else {
            frame.width = Math.ceil(innerDoc.body.scrollWidth);
            frame.height = Math.ceil(innerDoc.body.scrollHeight);
        }
    } catch(err) {
        window.status = err.message;
    }
}

Тогда назовите это так:

<iframe ... frameborder="0" onload="if(window.parent && window.parent.resizeIFrame){window.parent.resizeIFrame(this);}"></iframe>

Я только что придумал хороший способ сделать это с помощью jquery.

<form name="mainform">    
    <div id="placeholder">
    <div>
</form>

<form id="nested_form" style="position:absolute">
</form>

<script>
   $(document).ready(function(){
      pos = $('#placeholder').position();
      $('#nested_form')
         .css('left', pos.left.toFixed(0)+'px')
         .css('top', pos.top.toFixed(0)+'px');
   });
</script>

Что ж, если вы отправляете форму, браузер также отправляет входное имя и значение. Итак, что вы можете сделать, это

<form   
 action="/post/dispatch/too_bad_the_action_url_is_in_the_form_tag_even_though_conceptually_every_submit_button_inside_it_may_need_to_post_to_a_diffent_distinct_url"  
method="post">  

    <input type="text" name="foo" /> <!-- several of those here -->  
    <div id="toolbar">
        <input type="submit" name="action:save" value="Save" />
        <input type="submit" name="action:delete" value="Delete" />
        <input type="submit" name="action:cancel" value="Cancel" />
    </div>
</form>

поэтому на стороне сервера вы просто ищете параметр, который запускает ширину строки "action:", а остальная часть говорит вам, какое действие предпринять

поэтому, когда вы нажимаете кнопку Сохранить, браузер отправляет вам что-то вроде foo = asd & action: save = Save

Я обошел проблему, включив флажок в зависимости от того, какую форму человек хотел сделать. Затем использовали 1 кнопку, чтобы отправить всю форму.

В качестве альтернативы вы можете назначить форму actiob на лету ... может быть, это не лучшее решение, но оно действительно облегчает логику на стороне сервера ...

<form name="frm" method="post">  
    <input type="submit" value="One" onclick="javascript:this.form.action='1.htm'" />  
    <input type="submit" value="Two" onclick="javascript:this.form.action='2.htm'" />  
</form>