Форма всередині таблиці

239

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

Таким чином, подання форми не включає поля.

Рядок таблиці та вхідні дані такі:

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

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

Будь-яка допомога була б чудовою, дякую.

— Олексій
джерело

<form>не можна ставити всередину <tr>.

— Дерек 朕會功夫

І ти забув закрити <tr>.

— Дерек 朕會功夫

Використовуйте дисплей: рядок таблиці для своєї форми та загалом вирийте тег таблиці. Дивіться мою відповідь тут: stackoverflow.com/a/15600151/1038812

— Матвій

Він не може, але це працює ...

— Сендберга

Відповіді:

370

Форма це заборонено бути дочірнім елементом table, tbodyабо tr. Спроба помістити туди, як правило, змушує браузер переміщувати форму в неї, з'являється після таблиці (залишаючи її вміст - рядки таблиці, комірки таблиці, введення тощо) позаду.

Ви можете мати всю таблицю всередині форми. Ви можете мати форму всередині комірки таблиці. Ви не можете мати частину таблиці всередині форми.

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

HTML 5 представляє form атрибут . Це дозволяє надати одну форму на рядок поза таблицею, а потім пов’язати весь контроль форми в даному рядку з однією з цих форм, використовуючи його id.

— Квентін
джерело

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

— Loenix

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

— Квентін

Вам не потрібна кнопка редагування для рішення, запропонованого в оригінальному запитанні.

— Квентін

Чому заборонено <form>всередині <table>стандартів?

— 1234ру

@Qentin досить справедливо. Шкода, що це все ще залишається через два десятиліття без очевидних причин.

— 1234ру

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

Зараз, здається, "у розвитку", і нормально використовувати

— користувач1156544

@ 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>

Проблема із загортанням всієї ТАБЛИЦІ у ФОРМУ полягає в тому, що будь-які елементи форми будуть надсилатись при подачі (можливо, це бажано, але, мабуть, ні). Цей метод дозволяє визначити форму для кожного "рядка" та надіслати лише цей рядок даних при надсиланні.

Проблема із загортанням тегу FORM навколо тега TR (або TR навколо FORM) полягає в тому, що це недійсний HTML. ФОРМА все ще дозволить надсилати, як зазвичай, але в цей момент DOM порушено. Примітка. Спробуйте отримати дочірні елементи вашої ФОРМИ або 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">

Будь-який інший веб-переглядач, що підтримує дисплей: таблиця, дисплей: рядок таблиці та дисплей: комірка таблиці повинен відображати таблицю даних css такою ж, як і при використанні тегів TABLE, TR і TD. Більшість з них.

Зверніть увагу , що ви також можете імітувати THEAD, TBODY, TFOOT, обернувши свої групи рядків в інший DIV з display: table-header-group, table-row-groupі table-footer-groupвідповідно.

ПРИМІТКА . Єдине, що ви не можете зробити з цим методом - це колпан.

Ознайомтеся з цією ілюстрацією: http://jsfiddle.net/ZRQPP/

— Метью
джерело

+1, якщо згадати про це, це не дозволяє колпану ... що я, мабуть, пропустив під час першого читання ;-)

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

Це має бути зелена перевірена відповідь (навіть якщо ви не використовуєте дійсно тег таблиці)

— Алессіо