Форма внутри стола

239

Я включаю некоторые формы в таблицу HTML, чтобы добавить новые строки и обновить текущие строки. Проблема, которую я получаю, заключается в том, что когда я проверяю формы в моих инструментах разработки, я вижу, что элементы формы закрываются сразу после открытия (входные данные и т. Д. Не включаются в форму).

Таким образом, отправка формы не включает поля.

Строка таблицы и входные данные выглядят следующим образом:

<tr>
    <form method="post" action="">
        <td>
            <input type="text" name="job_num">
        </td>

        <td>
            <input type="text" name="desc">
        </td>
    </form>
</tr>

Любая помощь будет отличной, спасибо.

— Alex
источник

<form>нельзя положить внутрь <tr>.

— Дерек 朕會功夫

И ты забыл закрыть <tr>.

— Дерек 朕會功夫

Используйте display: table-row для вашей формы и полностью исключите тег таблицы. Смотрите мой ответ здесь: stackoverflow.com/a/15600151/1038812

— Мэтью

Это не может, но это работает ...

— Сандбург

Ответы:

371

Форма это не разрешено быть дочерним элементом table, tbodyили tr. Попытка поместить его туда приведет к тому, что браузер переместит форму, чтобы она появилась после таблицы (оставляя после себя ее содержимое - строки таблицы, ячейки таблицы, входные данные и т. Д.).

Вы можете иметь всю таблицу внутри формы. Вы можете иметь форму внутри ячейки таблицы. Вы не можете иметь часть таблицы внутри формы.

Используйте одну форму вокруг всей таблицы. Затем либо используйте нажатую кнопку отправки, чтобы определить, какую строку обрабатывать (чтобы быть быстрой), либо обрабатывать каждую строку (разрешая массовые обновления).

HTML 5 вводит form атрибут . Это позволяет вам предоставить одну форму на строку за пределами таблицы, а затем связать все элементы управления формы в данной строке с одной из этих форм, используя ее id.

— Quentin
источник

Будьте внимательны, используя одну форму для всей таблицы, все поля будут отправлены на сервер, даже если они пусты. Это может быть огромное количество данных !!! Пожалуйста, для массового / публичного использования, предпочитайте использовать диалоговое окно (форма не в таблице), открытое с помощью кнопки в этой строке.

— Loenix

@Loenix: Маловероятно, что вы поместите в таблицу достаточно данных, чтобы они были значительным бременем для пропускной способности людей (по крайней мере, по сравнению с размером типичной веб-страницы). Требование, чтобы пользователи загружали другую страницу между выбором редактирования строки и возможностью вносить свои изменения, OTOH, было бы раздражающим дополнительным взаимодействием, которое они должны были бы выполнить.

— Квентин

Вам не нужна кнопка редактирования для решения, предложенного в исходном вопросе.

— Квентин

Почему <form>внутри запрещено <table>в стандартах?

— 1234ru

@ Достаточно честно. Жаль, что это все еще стоит после двух десятилетий без очевидной причины.

— 1234ru

188

Используйте атрибут form , если вы хотите сохранить свою разметку:

<form method="GET" id="my_form"></form>

<table>
    <tr>
        <td>
            <input type="text" name="company" form="my_form" />
            <button type="button" form="my_form">ok</button>
        </td>
    </tr>
</table>

(* Поля формы вне тега <form>)

Также смотрите первые 2 комментария

— Владимир
источник

Обратите внимание, что это решение действительно только для HTML5.

— threenplusone

Более того, он не будет работать в Internet Explorer. Более подробная информация здесь

— Souhaieb Besbes

Состояние атрибута формы «находится на рассмотрении», что означает, что вы должны быть очень терпеливыми developer.microsoft.com/en-us/microsoft-edge/platform/status/… тем временем вы можете попробовать этот полифилл и посмотреть, работает ли он для вас stackoverflow.com/a/26696165/648484

— Souhaieb Besbes

Кажется "в разработке" сейчас и нормально использовать

— user1156544

@ user1156544 Сейчас поддерживается в Edge, но не в IE. Если вам вообще нужна поддержка IE, вам не повезло с этим решением. Я планирую использовать две таблицы для двух элементов формы (я не могу поверить, что я должен это сделать). Спасибо Microsoft!

— Плутон,

Если вы хотите «редактируемую сетку» , т.е. таблицы как структура , которая позволяет сделать любого из строк формы, использование CSS , который имитирует расположение за столом тега: display:table, display:table-row, и display:table-cell.

Нет необходимости оборачивать всю таблицу в форму и не нужно создавать отдельную форму и таблицу для каждой видимой строки таблицы.

Попробуйте это вместо этого:

<style>
DIV.table 
{
    display:table;
}
FORM.tr, DIV.tr
{
    display:table-row;
}
SPAN.td
{
    display:table-cell;
}
</style>
...
<div class="table">
    <form class="tr" method="post" action="blah.html">
        <span class="td"><input type="text"/></span>
        <span class="td"><input type="text"/></span>
    </form>
    <div class="tr">
        <span class="td">(cell data)</span>
        <span class="td">(cell data)</span>
    </div>
    ...
</div>

Проблема с обертыванием всего TABLE в FORM заключается в том, что любые и все элементы формы будут отправлены при отправке (возможно, это желательно, но, вероятно, нет). Этот метод позволяет вам определять форму для каждой «строки» и отправлять только эту строку данных при отправке.

Проблема с обертыванием тега FORM вокруг тега TR (или TR вокруг FORM) заключается в том, что это недопустимый HTML. ФОРМА будет по-прежнему разрешать отправку как обычно, но на этом этапе DOM не работает. Примечание: попробуйте получить дочерние элементы вашей FORM или TR с помощью JavaScript, это может привести к неожиданным результатам.

Обратите внимание, что IE7 не поддерживает эти стили таблиц CSS, и IE8 потребуется объявление doctype, чтобы перевести его в режим «стандартов»: (попробуйте этот или что-то эквивалентное)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Любой другой браузер, который поддерживает display: table, display: table-row и display: table-cell, должен отображать вашу таблицу данных CSS так же, как если бы вы использовали теги TABLE, TR и TD. Большинство из них делают.

Обратите внимание , что вы также можете имитировать THEAD, TBODY, TFOOT, обернув свои группы строк в другой DIV с display: table-header-group, table-row-groupи table-footer-groupсоответственно.

ПРИМЕЧАНИЕ . Единственное, что вы не можете сделать с помощью этого метода, это colspan.

Проверьте эту иллюстрацию: http://jsfiddle.net/ZRQPP/

— Мэтью
источник

+1 за упоминание, что это не включает colspan ... который я, должно быть, пропустил при первом прочтении ;-)

— Йоханнес Рудольф

Это должен быть зеленый проверенный ответ (даже если вы не используете действительно табличный тег)

— Алессио