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

HTML Программирование и разработка

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

Синтаксис:

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

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

  1. Независимые формы. Если вам нужно включить несколько форм на веб-страницу, лучше всего, чтобы они были независимы друг от друга. Каждая форма должна быть помещена за рамки любой другой формы. Такой подход гарантирует, что каждая форма работает правильно и отправляет свои данные независимо.
  2. Разделы на разделы. Если вам нужны логические разделы в одной форме, вы можете использовать элементы 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">
       
        <!-- Form 1 fields -->
        <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">
       
        <!-- Form 2 fields -->
        <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>. Эти разделы обеспечивают визуальное группирование связанных входных данных в одной форме, но не являются отдельными формами. При нажатии кнопки отправки вся форма, включая все разделы, будет отправлена ​​вместе.

Читайте также:  Цикл for в C++

HTML

<!DOCTYPE html>
<html>
<head>
<title>Sectional Nested Form</title>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<form id="mainForm"
action="/submitMainForm">
<!-- Main form fields -->
<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>
<!-- Section 1 fields -->
<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>
<!-- Section 2 fields -->
<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>
Выход:
от пример кода демонстрирует секционное разделение
Оцените статью
bestprogrammer.ru
Добавить комментарий