Можем ли мы создать вложенную форму в HTML?

В HTML- формах вложенность означает, что размещение одного элемента <form> внутри другого не допускается, хотя можно создать несколько форм. Спецификация HTML явно указывает, что формы не могут быть вложенными. Вложенные формы могут привести к неожиданному поведению и конфликтам между формами. В результате веб-браузеры не поддерживают вложенность форм.

Синтаксис:

<form>
    <!-- Form fields and controls go here -->
</form>

Подход: Для создания множественных форм будут использоваться следующие подходы:

Независимые формы. Если вам нужно включить несколько форм на веб-страницу, лучше всего, чтобы они были независимы друг от друга. Каждая форма должна быть помещена за рамки любой другой формы. Такой подход гарантирует, что каждая форма работает правильно и отправляет свои данные независимо.
Разделы на разделы. Если вам нужны логические разделы в одной форме, вы можете использовать элементы HTML, такие как <fieldset>или <div>, чтобы сгруппировать связанные входные данные вместе. Хотя эти подразделения визуально выглядят как отдельные разделы, они все же являются частью одной и той же формы.

Пример 1. В следующем примере кода демонстрируются независимые формы. Здесь у нас есть две отдельные формы, форма 1 и форма 2, которые размещаются на странице независимо друг от друга. Каждая форма может быть представлена индивидуально без каких-либо конфликтов.

HTML

<!DOCTYPE html>

<html>

<head>

    <title>Nested Forms</title>

</head>

<body>

    <h1 style="color:green">

          GeeksforGeeks

      </h1>

    <h3>Nesting forms</h3>

    <p>

          <b>Form 1:</b>

      </p>

    <form id="form1"

          action="/submitForm1">



        

        <label for="name">Name:</label>

        <input type="text"

               id="name"

               name="name" required><br>

        <label for="email">

              Email:

          </label>

        <input type="email"

               id="email"

               name="email" required><br>

        <input type="submit"

               value="Submit Form 1">

    </form>

    <br>

    <p>

          <b>Form 2:</b>

      </p>

    <form id="form2"

          action="/submitForm2">



        

        <label for="message">

              Message:

          </label><br>

        <textarea id="message"

                  name="message"

                  rows="4"

                  cols="50" required>

          </textarea><br>

        <input type="submit"

               value="Submit Form 2">

    </form>

</body>

</html>

Выход:

Пример 2. Этот пример кода демонстрирует секционное разделение формы. Здесь mainForm содержит логические разделы, представленные <fieldset>. Эти разделы обеспечивают визуальное группирование связанных входных данных в одной форме, но не являются отдельными формами. При нажатии кнопки отправки вся форма, включая все разделы, будет отправлена вместе.

HTML

<!DOCTYPE html>

<html>

<head>

<title>Sectional Nested Form</title>

</head>

<body>

<h1 style="color:green">

GeeksforGeeks

</h1>

<form id="mainForm"

action="/submitMainForm">



<label for="name">

Name:

</label>

<input type="text"

id="name"

name="name" required><br>

<label for="email">

Email:

</label>

<input type="email"

id="email"

name="email" required><br>

<fieldset>

<legend>Section 1</legend>



<label for="age">Age:</label>

<input type="number"

id="age"

name="age" required><br>

<label for="gender">Gender:</label>

<select id="gender"

name="gender" required>

<option value="">Select</option>

<option value="male">Male</option>

<option value="female">Female</option>

<option value="other">Other</option>

</select><br><br>

</fieldset>

<fieldset>

<legend>Section 2</legend>



<label for="message">Message:</label>

<textarea id="message"

name="message"

rows="4"

cols="50" required>

</textarea><br>

<label for="rating">Rating:</label>

<input type="number"

id="rating"

name="rating"

min="1"

max="5" required><br>

</fieldset>

<br>

<button type="submit">Submit</button>

</form>

</body>

</html>

Выход: