Вложенные HTML-формы: возможно ли и альтернативы

Быстрый ответ

В соответствии со стандартами HTML вкладывание формы <form> в другую форму не допускается. При этом могут возникнуть ошибки и нестабильное поведение при отправке данных.

Каждая форма должна обеспечивать надежность и последовательность в передаче данных.

<form action="/action1" method="post">
  <input type="text" name="field1">
  <input type="submit" value="Отправить">
</form>

<form action="/action2" method="post">
  <input type="text" name="field2">
  <input type="submit" value="Отправить">
</form>

С сохранением контроля, программист! (KISC)

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

Использование 'полей и областей'

Группируйте связанные элементы с помощью <fieldset>:

<form action="/action" method="post">
  <fieldset>
    <legend>Кто ты?</legend>
    <!-- Детектив, это легенда -->
  </fieldset>

  <fieldset>
    <legend>Возьми мои данные</legend>
    <!-- Ваш банковский консультант будет в восторге -->
  </fieldset>

  <input type="submit" value="Отправить все">
</form>

Подробнее об этом расскажет наш спикер на видео

JavaScript: Рыцарь технических событий

Используйте делегирование событий в JavaScript, чтобы сделать управление формами более понятным:

document.addEventListener('submit', function(event) {
  if (event.target.matches('.inner-action')) {
    // События — отличные помощники
    event.preventDefault();
    // Тактичное управление взаимодействиями всегда важно!
  }
});

JavaScript и целостность формы: динамический дуэт

JavaScript позволяет контролировать отправку данных и имитировать вложенные формы без использования HTML для вложенности:

AJAX для асинхронной отправки

AJAX — это альтернативная возможность перегруппировать части формы, не используя для этого вложенность:

$('#part1').submit(function(event) {
  event.preventDefault();
  $.ajax({
    url: '/part1-action',
    method: 'post',
    data: $(this).serialize(),
    success: function(response) {
      // Успех обеспечен
    }
  });
});

Атрибут 'form' в HTML5: указание принадлежности для элементов

Атрибут form в HTML5 позволяет ассоциировать поля ввода с формой, несмотря на то, что они физически в неё не включены:

<form id="form1" action="/action1" method="post"></form>

<input form="form1" type="text" name="field" />
<input form="form1" type="submit" value="Отправить" />

CSS: Управление отображением

Эмулировать целостность разных форм? Позиционирование в CSS выполнит это задание:

.form-group {
  border: 1px solid #eee;
  padding: 20px;
  display: inline-block;
}

<div class="form-group">
  <!-- Здесь расположена первая форма -->
</div>
<div class="form-group">
  <!-- Здесь расположена вторая форма -->
</div>

Проблемы и обходные решения

Учтите: преодоление ограничений HTML означает столкновение с проблемой совместимости с браузерами. Помните, что сервер должен адекватно обрабатывать множественные запросы. Не пренебрегайте доступностью интерфейса при использовании JavaScript. Готовьтесь ко всему.

Визуализация

Воспользуемся аналогией с коробками-формами:

                            ___________________
                           |   Коробка снаружи 📦  |
                           |                   |
                           |  Можно ли мне     |
                           |  вместить в себя  |
                           |  другую коробку 📦? |
                           |     _________     |
                           |    | Коробка |    |
                           |    | себя    |    |
                           |    | себя    |    |
                           |    |_______|      |
                           |___________________|

Как вложить круг в квадратное отверстие? 🤔

| Вложение HTML-форм | Разрешено? |
| ------------------ | -----------|
| Форма снаружи 📦    |             |
| └─ Внутренняя форма 📦 | 🚫       |

Вложение форм — это табу! 🛑

Iframe: Универсальное решение

Если всё же немудрено использовать вложенные контейнеры, используйте <iframe>. Это изолированное решение для ваших данных:

<iframe src="iframeForm.html"></iframe>

iframeForm.html — это отдельный HTML-документ с формой, действующий как автономный модуль внутри основного документа.

Полезные материалы

1. HTML Standard. Основные принципы синтаксиса HTML для форм.
2. <form>: Элемент формы – HTML: HyperText Markup Language | MDN. Подробное руководство по использованию элемента <form> на MDN.
3. Just a moment.... Дискуссии на Stack Overflow, посвящённые вложенности HTML-форм.
4. HTML Standard. Детальный разбор элемента <form>, в соответствии с современными стандартами HTML.
5. HTML Standard. Инструкции по обработке элементов формы пользовательскими агентами.