331

Чи дійсно html мати таке:

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

Тож коли ви подаєте "b", ви отримуєте лише поля у внутрішній формі. Коли ви подаєте "a", ви отримуєте всі поля мінус поля "b".

Якщо це неможливо, які шляхи вирішення цієї ситуації доступні?

html web-standards standards-compliance

— allyourcode
джерело

28

Мені здається, що це насправді дуже поширена потреба, яка знайома з інтерфейсами db - Якщо форма оновлює таблицю A, а в цій таблиці є поле, пов’язане з таблицею B, ми часто хочемо спосіб оновлення або створення записів для цього зв'язане поле без необхідності залишати поточну форму. Вкладені підформи були б дуже інтуїтивним способом це зробити (і це інтерфейс, реалізований декількома базами даних настільних ПК).

— монотакер

3

Це не вірно. Існують способи вирішення, але для отримання цих даних вам слід використовувати інший метод. Розглянемо одну форму, що надсилає всі дані до скрипту PHP, який потім подає частину (частину з а) як одну електронну пошту, а частину (частину з b) як іншу електронну пошту. Або в базу даних, або все, що ви робите з цими даними. Вкладати форми можна, але це НЕ відповідь!

2

можливий дублікат Чи можете ви вкладати HTML-форми?

— користувач

Питання добре, але швидкий пошук в Google (навіть не натискаючи вказані посилання) виявляє, чи дійсні форми у формах, чи ні. мені особисто сподобалась відповідь @Andreas

— Джаретт Ллойд

380

A. Це недійсний HTML і XHTML

В офіційній специфікації XHTML W3C, Розділ B. "Заборони елементів", зазначено:

"form must not contain other form elements."

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

Що стосується старших специфікації HTML 3.2 , то в розділі про елемент FORMS зазначено, що:

"Кожна форма повинна бути вкладена в елемент FORM. У одному документі може бути кілька форм, але елемент FORM не може бути вкладений."

Б. Обхід

Існують обхідні шляхи, що використовують JavaScript, не потрібно вкладати теги форм.

"Як створити вкладену форму." (незважаючи на назву, це не так вкладені теги форм, а вирішення JavaScript).

Відповіді на це питання StackOverflow

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

— GeneQ
джерело

4

Дивіться мій коментар вище .... Це чудова відповідь, чудова робота, але жахлива практика. Ви можете зробити те саме, з меншими клопотами, передаючи всі дані в PHP-скрипт і розділяючи та надсилаючи до своїх місць призначення звідти. Хоча ти відповів на питання, яке чудово, це просто погана і безглузда практика, оскільки ти можеш це зробити правильно за менший час.

53

Якщо хтось знайде цю посаду тут - це чудове рішення без необхідності 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!";
?>

— Андреас
джерело

Це не те саме, в цьому випадку ви хочете перейти на одну і ту ж сторінку і зробити різні дії, за допомогою двох форм ви можете переходити на різні сторінки І / АБО мати різну інформацію, що надсилається у кожному випадку.

— Луїс Теллез

Ви можете використовувати файл php в якості обгортки і включати будь-який потрібний файл, якщо ви хочете код у різних файлах. Тож замість (відлуння "зберігається!";) Ви могли написати (включити "a.php";)

— Андреас

У моїй формі є декілька кнопок видалення (причина, по якій я прийшов сюди з огляду на вкладену форму) 1 для кожного запису та прапорець списку на кожному, щоб зробити групове видалення. Ваша відповідь спонукала мене переосмислити мій план, думаючи тепер, що я повинен назвати кнопки для індивідуального видалення з числовим ідентифікатором і масове видалення як таке. Я роблю php робити сортування.

— Кріс

@Andreas на гроші. Це природне рішення для зміни способу інтерпретації введення форми. Якщо ви використовуєте Пост / Переадресація / Отримати, то пункт призначення також може змінюватися. Однак, якщо у вас немає гнучкості на серверній частині, щоб поєднати свої дії в єдину кінцеву точку 'aORb', то, я думаю, ви боронитеся з хаком.

27

HTML 4.x та HTML5 забороняють вкладені форми, але HTML5 дозволить вирішити атрибут "form" ("власник форми").

Щодо HTML 4.x, ви можете:

Використовуйте додаткові форми з лише прихованими полями та JavaScript, щоб встановити вхідні дані та надіслати форму.
Використовуйте CSS для складання декількох форм HTML, щоб мати вигляд однієї сутності, але я думаю, що це занадто важко.

— Ніші
джерело

1

Не впевнений, чому це було знято. Тут посилання на розділ W3C власників форм: w3.org/TR/html5/…

— SooDesuNe

5

@SooDesuNe ваше посилання застаріло, ось новий w3.org/TR/html5/forms.html#form-owner

— chiliNUT

13

Як говорили інші, це неправдивий HTML.

Здається, що ви робите це, щоб візуально розташувати форми одна в одній. Якщо це так, просто зробіть дві окремі форми та використовуйте CSS для їх розміщення.

— user64075
джерело

1

Це те, що я думав, що мені знадобиться для свого веб-сайту, але мені б дуже приклад, як це зробити.

— Брайан Петерсон

8

Ні, специфікація HTML зазначає, що жоден FORMелемент не повинен містити іншого FORMелемента.

— Девід Грант
джерело

5

Ви можете відповісти на власне запитання дуже легко, ввівши HTML-код у W3 Validator . (У ньому є поле для введення тексту, вам навіть не доведеться ставити код на сервер ...)

(І ні, це не буде підтверджено.)

— Християнин
джерело

5

скоріше використовуйте користувальницький метод 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>

— Андреас Нідермайр
джерело

5

Можливість полягає у тому, щоб у зовнішній формі був кадр. Рамка містить внутрішню форму. Обов’язково використовуйте <base target="_parent" />тег всередині тегу заголовка iframe, щоб форма поводилася як частина головної сторінки.

— Робін Манолі
джерело

4

ні, дивіться w3c

— тліфф
джерело

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>

Це легко зробити, якщо ви використовуєте завантажувальний файл або матеріалізуєте css. Я роблю це, щоб уникнути використання iframe.

— Джонатас Гортенс
джерело

0

Вирішення не-JavaScript для тегів форм вкладення:

Тому що ви дозволяєте

всі поля мінус поля в межах "b".

при надходженні "а" працює наступне, використовуючи звичайні веб-форми без химерних хитрощів JavaScript:

Крок 1. Розмістіть кожну форму на власній веб-сторінці.

Крок 2. Вставте кадр, де ви хочете, щоб ця підформат з'явився.

Крок 3. Прибуток.

Я намагався використовувати веб-сайт кодової майданчика для демонстрації демонстрації, але багато з них забороняють вбудовувати свої веб-сайти в рамки кадрів, навіть у межах власного домену.

— ADJenks
джерело

-1

Якщо вам потрібна форма для подання / фіксації даних у реляційній базі даних 1: M, я рекомендую створити тригер БД "після вставки" в таблиці А, який буде вставляти необхідні дані для таблиці Б.

— cbWrites
джерело

-2

Ні, це не вірно, але ви можете ввести своє внутрішнє становище у HTMLформаті за допомогою CSSта jQueryвикористання. Спершу створіть девайс контейнера у батьківській формі, а потім у будь-якому іншому місці сторінки з дітьми (внутрішньою) формою:

<form action="a">
    <input.../>
    <div class="row" id="other_form_container"></div>
    <input.../>
</form>

….

<div class="row" id="other_form">
    <form action="b">
        <input.../>
        <input.../>
        <input.../>
    </form>
</div>

Дайте вашому контейнеровіду стабільну міцність

<style>
  #other_form_container {
    height:90px;
    position:relative;
  }
</style>

Дякую, що вдається, позицію "other_form" щодо контейнера div.

<script>
  $(document).ready(function() {
    var pos = $("#other_form_container").position();
    $("#other_form").css({
      position: "absolute",
      top: pos.top - 40,
      left: pos.left + 7,
      width: 500,
    }).show();
  });
</script>

PS: Вам доведеться грати з номерами, щоб це виглядало красиво.

— Ярослав Вархоль
джерело

Чи дійсно мати форму HTML в іншій формі html?

Вирішення не-JavaScript для тегів форм вкладення: