2009-02-17 2 views
257

Правомерно HTML, чтобы иметь следующее:Действительно ли имеет html-форму внутри другой html-формы?

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

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

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

+22

Мне кажется, что на самом деле это очень распространенная потребность, знакомая с интерфейсами db. Если форма обновляет таблицу A, а в этой таблице есть поле, связанное с таблицей B, нам часто нужен способ обновления или создания записи для этого связанного поля без необходимости покидать текущую форму. Вложенные подформы будут очень интуитивным способом сделать это (и это ui реализовано несколькими настольными базами данных). – monotasker

+1

Недействительно. Существуют обходные пути, но вы должны использовать другой метод для получения этих данных. Рассмотрим одну форму, отправляющую все данные в почтовый скрипт PHP, который затем отправляет часть (часть из a) как одно электронное письмо, а часть (часть из b) - как другое электронное письмо. Или в базу данных или что бы вы ни делали с этими данными. Вложенные формы могут быть выполнены, но это НЕ ответ! – user1596138

+1

Возможный дубликат [Можете ли вы вложить html-формы?] (Http://stackoverflow.com/questions/379610/can-you-nest-html-forms) – user

ответ

301

А. Это не действительный HTML, ни XHTML

В официальной спецификации W3C XHTML, раздел В. "Элемент Запреты", говорится, что:

"form must not contain other form elements." 

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

Что касается старшего HTML 3.2 spec, раздел на элементе ФОРМ говорится, что:

«Каждая форма должна быть заключена в пределах элемента формы. Там может быть несколько форм в одном документе, но элемент FORM не могут быть вложенными «

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

Однако, кто-то уже пытался что по адресу:.

"Как создать вложенную форму."

http://blog.avirtualhome.com/how-to-create-nested-forms/

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

+62

Стандарты pshh. Слово оскорбляет меня –

+18

Что означает pshh? –

+436

«Pshh» в этом контексте, по-видимому, это гомеопатия, используемая для выражения отвращения к определенному стандарту. Выделяет то же значение, что и «да», «как будто» или «что угодно». В начале XXI века это слово стало самостоятельным предложением, по сути, междометием, оно используется как пассивно-агрессивная диалоговая блокировка инструмент, оставляя ответчика без убедительной реторты.В Word говорится, что W3C выпустил рабочий дрифт, описывающий достоинства введения элемента в будущую версию HTML. – GeneQ

7

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

6

достаточно использовать пользовательский 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> 
+0

Только то, что я искал! –

5

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

(И нет, это не будет проверять.)

12

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

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

+2

+1 для двух разных форм и использования CSS для размещения их – billrichards

+0

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

20

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

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

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

Не знаете, почему это было пропущено. Здесь ссылка на раздел W3C владельцев форм: http://www.w3.org/TR/html5/association-of-controls-and-forms.html#form-owner – SooDesuNe

+4

@SooDesuNe ваша ссылка устарела, здесь новый http://www.w3.org/TR/html5/forms.html#form-owner – chiliNUT

6

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

40

В случае, если кто-то найдет это сообщение, это отличное решение без необходимости использования 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!"; 
?> 
+0

Это не то же самое, в этом случае вы хотите перейти на ту же страницу и выполнить разные действия, с 2 формы, вы можете перейти на разные страницы И/ИЛИ иметь различную информацию, отправленную в каждом случае. –

+0

Вы можете использовать php-файл в качестве оболочки и включать любой файл, который хотите, если вы хотите, чтобы код в разных файлах. Итак, вместо (echo «stored!»;) Вы можете написать (include «a.php»;) – Andreas

+0

У меня есть несколько кнопок удаления в моей форме (причина, по которой я пришел сюда с учетом вложенной формы) 1 для каждой записи и установите флажок для каждого, чтобы сделать массовое удаление. Ваш ответ побудил меня пересмотреть мой план, думая теперь, что я должен назвать кнопки для отдельного удаления с числовым идентификатором и массовым удалением как таковым. Il делает php сортировкой. – Chris

0

Если вам нужна форма для отправки/фиксаций данных в 1: реляционную базу данных М, я рекомендовал бы создавая «после вставки» триггера DB на таблицу A, в который будут вставлены необходимые данные для таблицы B.

1

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

Смежные вопросы