Bentuk di dalam tabel

239

Saya menyertakan beberapa formulir di dalam tabel HTML untuk menambahkan baris baru dan memperbarui baris saat ini. Masalah yang saya dapatkan adalah ketika saya memeriksa formulir di alat dev saya, saya melihat bahwa elemen formulir ditutup segera setelah pembukaan (input, dll tidak termasuk dalam formulir).

Karena itu, mengirimkan formulir gagal menyertakan bidang.

Baris tabel dan input adalah sebagai berikut:

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

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

Bantuan apa pun akan bagus, terima kasih.

html firebug html-table forms Alex
sumber
6
<form>tidak bisa dimasukkan ke dalam <tr>.
Derek 朕 會 功夫
1
Dan Anda lupa menutup <tr>.
Derek 朕 會 功夫
1
Gunakan tampilan: baris tabel untuk formulir Anda dan parit tag tabel sama sekali. Lihat jawaban saya di sini: stackoverflow.com/a/15600151/1038812
Matthew
Tidak bisa, tetapi berhasil ...
Sandburg

Jawaban:

371

Formulir tidak diizinkan menjadi elemen turunan dari table, tbodyatau tr. Mencoba untuk meletakkan satu di sana akan cenderung menyebabkan browser untuk memindahkan formulir itu muncul setelah tabel (sambil meninggalkan isinya - baris tabel, sel tabel, input, dll - di belakang).

Anda bisa memiliki seluruh tabel di dalam formulir. Anda bisa memiliki formulir di dalam sel tabel. Anda tidak dapat memiliki bagian dari tabel di dalam formulir.

Gunakan satu formulir di sekitar seluruh tabel. Kemudian gunakan tombol kirim yang diklik untuk menentukan baris mana yang akan diproses (menjadi cepat) atau memproses setiap baris (memungkinkan pembaruan massal).

HTML 5 memperkenalkan form atribut . Ini memungkinkan Anda untuk menyediakan satu formulir per baris di luar tabel dan kemudian mengaitkan semua kontrol formulir di baris tertentu dengan salah satu formulir yang menggunakan itu id.

Quentin
sumber
2
Berhati-hatilah menggunakan satu formulir untuk seluruh tabel, semua bidang akan dikirim ke server, meskipun kosong. Ini bisa menjadi data dalam jumlah besar !!! Harap untuk penggunaan massal / publik, lebih suka menggunakan dialog (formulir tidak dalam tabel) dibuka dari tombol di baris itu.
Loenix
1
@Loenix: Sangat tidak mungkin bahwa Anda akan menaruh cukup data di tabel untuk itu menjadi beban yang signifikan pada bandwidth orang (setidaknya bila dibandingkan dengan ukuran halaman web yang khas). Membutuhkan pengguna untuk memuat halaman lain antara memilih untuk mengedit baris dan mampu membuat perubahan mereka, OTOH, akan menjadi interaksi ekstra yang menjengkelkan yang harus mereka lakukan.
Quentin
1
Anda tidak perlu tombol edit untuk solusi yang diajukan dalam pertanyaan awal.
Quentin
1
Mengapa bagian <form>dalam <table>standar dilarang ?
1234ru
4
@ Qin cukup adil. Sayang ini masih bertahan setelah dua dekade tanpa alasan yang jelas.
1234ru
188

Gunakan atribut "form" , jika Anda ingin menyimpan markup Anda:

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

(* Bidang formulir di luar tag <form>)

Juga lihat 2 komentar pertama

Vladimir
sumber
64
Catatan, solusi ini hanya valid dengan HTML5.
threenplusone
18
apalagi, itu tidak akan bekerja di internet explorer info lebih lanjut di sini
Souhaieb Besbes
1
Status atribut form 'dalam pertimbangan' yang berarti Anda harus menjadi pengembang yang sangat sabar.microsoft.com/en-us/microsoft-edge/platform/status/... sementara itu Anda dapat mencoba polyfill ini dan melihat apakah itu berfungsi untuk Anda stackoverflow.com/a/26696165/648484
Souhaieb Besbes
1
Tampaknya "dalam pengembangan" sekarang, dan
boleh
1
@ user1156544 Ini didukung di Edge sekarang, tetapi tidak di IE. Jika Anda perlu mendukung IE sama sekali, Anda kurang beruntung dengan solusi ini. Rencana saya adalah menggunakan dua tabel untuk dua elemen bentuk (saya tidak percaya saya harus melakukan ini). Terima kasih Microsoft!
Pluto
41

Jika Anda ingin "grid diedit" yaitu meja seperti struktur yang memungkinkan Anda untuk membuat salah satu baris bentuk, penggunaan CSS yang meniru tata letak TABLE tag: display:table, display:table-row, dan display:table-cell.

Tidak perlu untuk membungkus seluruh tabel Anda dalam formulir dan tidak perlu membuat formulir dan tabel terpisah untuk setiap baris yang tampak dari tabel Anda.

Coba ini sebagai gantinya:

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

Masalah dengan membungkus seluruh TABEL dalam FORMULIR adalah bahwa setiap dan semua elemen bentuk akan dikirim pada ajukan (mungkin yang diinginkan tetapi mungkin tidak). Metode ini memungkinkan Anda untuk menentukan formulir untuk setiap "baris" dan hanya mengirim baris data yang dikirimkan.

Masalah dengan membungkus tag FORM di sekitar tag TR (atau TR di sekitar FORM) adalah bahwa itu HTML yang tidak valid. FORMULIR masih akan mengizinkan pengiriman seperti biasa tetapi pada saat ini DOM rusak. Catatan: Cobalah mendapatkan elemen turunan dari FORMULIR atau TR Anda dengan JavaScript, ini dapat menghasilkan hasil yang tidak terduga.

Perhatikan bahwa IE7 tidak mendukung gaya tabel CSS ini dan IE8 akan memerlukan deklarasi doctype untuk mendapatkannya ke mode "standar": (coba ini setara atau sesuatu)

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

Browser lain yang mendukung tampilan: tabel, tampilan: baris tabel dan tampilan: sel tabel harus menampilkan tabel data css Anda sama seperti jika Anda menggunakan tag TABLE, TR dan TD. Kebanyakan dari mereka melakukannya.

Perhatikan bahwa Anda juga dapat meniru THEAD, TBODY, TFOOT dengan membungkus grup baris Anda dengan DIV lain display: table-header-group, table-row-groupdan table-footer-groupmasing - masing.

CATATAN: Satu-satunya hal yang tidak dapat Anda lakukan dengan metode ini adalah colspan.

Lihatlah ilustrasi ini: http://jsfiddle.net/ZRQPP/

Matius
sumber
4
+1 untuk menyebutkan ini tidak memungkinkan colspan ... yang pasti saya lewatkan saat pertama membacanya ;-)
Johannes Rudolph
1
Itu seharusnya jawaban yang ditandai dengan warna hijau (walaupun tidak menggunakan tag tabel)
Alessio