Hình thành bên trong một cái bàn

238

Tôi đang bao gồm một số biểu mẫu bên trong bảng HTML để thêm các hàng mới và cập nhật các hàng hiện tại. Vấn đề mà tôi gặp phải là khi tôi kiểm tra các biểu mẫu trong các công cụ dev của mình, tôi thấy rằng các thành phần của biểu mẫu được đóng ngay sau khi mở (đầu vào, v.v. không được bao gồm trong biểu mẫu).

Như vậy, việc gửi một biểu mẫu không bao gồm các trường.

Hàng của bảng và đầu vào như sau:

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

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

Bất kỳ trợ giúp sẽ là tuyệt vời, cảm ơn bạn.

— Alex
nguồn

<form>không thể được đặt bên trong <tr>.

— Derek 朕會

Và bạn quên đóng cửa <tr>.

— Derek 朕會

Sử dụng display: row-row cho biểu mẫu của bạn và bỏ hoàn toàn thẻ bảng. Xem câu trả lời của tôi ở đây: stackoverflow.com/a/15600151/1038812

— Matthew

Không thể, nhưng nó hoạt động ...

— Sandburg

Câu trả lời:

369

Một hình thức không được phép là một yếu tố con của a table, tbodyhoặc tr. Cố gắng đặt một cái ở đó sẽ có xu hướng làm cho trình duyệt di chuyển biểu mẫu đến nó xuất hiện sau bảng (trong khi để lại nội dung của nó - hàng bảng, ô bảng, đầu vào, v.v.) phía sau).

Bạn có thể có toàn bộ bảng trong một biểu mẫu. Bạn có thể có một hình thức bên trong một ô bảng. Bạn không thể có một phần của bảng trong một biểu mẫu.

Sử dụng một hình thức xung quanh toàn bộ bảng. Sau đó, sử dụng nút gửi đã nhấp để xác định hàng nào sẽ xử lý (phải nhanh chóng) hoặc xử lý mỗi hàng (cho phép cập nhật hàng loạt).

HTML 5 giới thiệu form thuộc tính . Điều này cho phép bạn cung cấp một biểu mẫu cho mỗi hàng bên ngoài bảng và sau đó liên kết tất cả các điều khiển biểu mẫu trong một hàng nhất định với một trong các biểu mẫu đó bằng cách sử dụng biểu mẫu đó id.

— Quentin
nguồn

Hãy cẩn thận bằng cách sử dụng một biểu mẫu cho toàn bộ bảng, tất cả các trường sẽ được gửi đến máy chủ, ngay cả khi chúng trống. Nó có thể là một lượng dữ liệu khổng lồ !!! Vui lòng sử dụng hàng loạt / công khai, thích sử dụng hộp thoại (biểu mẫu không có trong bảng) được mở từ một nút trong hàng đó.

— Loenix

@Loenix: Rất khó có khả năng bạn sẽ đặt đủ dữ liệu vào bảng để nó trở thành gánh nặng đáng kể cho băng thông của mọi người (ít nhất là khi so sánh với kích thước của một trang web thông thường). Yêu cầu người dùng tải một trang khác giữa việc chọn chỉnh sửa một hàng và có thể thực hiện các thay đổi của họ, OTOH, sẽ là một tương tác thêm khó chịu mà họ sẽ phải thực hiện.

— Quentin

Bạn không cần một nút chỉnh sửa cho giải pháp được đề xuất trong câu hỏi ban đầu.

— Quentin

Tại sao bị cấm <form>trong <table>các tiêu chuẩn?

— 1234ru

@Qentin đủ công bằng. Thật đáng tiếc điều này vẫn tồn tại sau hai thập kỷ mà không có lý do rõ ràng.

— 1234ru

187

Sử dụng thuộc tính "biểu mẫu" , nếu bạn muốn lưu đánh dấu của mình:

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

(* Các trường biểu mẫu bên ngoài thẻ <form>)

Cũng xem 2 bình luận đầu tiên

— Vladimir
nguồn

Lưu ý, giải pháp này chỉ hợp lệ với HTML5.

— threenplusone

hơn nữa, nó sẽ không hoạt động trong trình thám hiểm internet thêm thông tin ở đây

— Souhaieb Besbes 27/08/2015

Trạng thái của thuộc tính biểu mẫu là 'đang xem xét', điều đó có nghĩa là bạn phải rất kiên nhẫn developer.microsoft.com/en-us/microsoft-edge/pl platform / status / trộm trong khi đó bạn có thể dùng thử polyfill này và xem nó có hoạt động với bạn không stackoverflow.com/a/26696165/648484

— Souhaieb Besbes

Có vẻ như "đang phát triển" và sử dụng ok

— user1156544

@ user1156544 Nó được hỗ trợ trong Edge ngay bây giờ, nhưng không phải IE. Nếu bạn cần hỗ trợ IE, bạn sẽ không gặp may với giải pháp này. Kế hoạch của tôi là sử dụng hai bảng cho hai yếu tố hình thức (tôi không thể tin rằng mình phải làm điều này). Cảm ơn Microsoft!

— Sao Diêm Vương

Nếu bạn muốn có một "lưới có thể chỉnh sửa" tức là một bảng như cấu trúc cho phép bạn thực hiện bất kỳ hàng một hình thức, việc sử dụng CSS mà bắt chước TABLE thẻ của bố trí: display:table, display:table-row, và display:table-cell.

Không cần phải bọc toàn bộ bảng của bạn trong một biểu mẫu và không cần phải tạo một biểu mẫu và bảng riêng biệt cho mỗi hàng rõ ràng của bảng của bạn.

Hãy thử điều này thay thế:

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

Vấn đề với việc gói toàn bộ BẢNG trong MẪU là bất kỳ và tất cả các yếu tố biểu mẫu sẽ được gửi khi gửi (có thể đó là mong muốn nhưng có thể không). Phương pháp này cho phép bạn xác định một biểu mẫu cho mỗi "hàng" và chỉ gửi hàng dữ liệu đó khi gửi.

Vấn đề với việc bọc thẻ FORM xung quanh thẻ TR (hoặc TR quanh FORM) là HTML không hợp lệ. MẪU vẫn sẽ cho phép gửi như bình thường nhưng tại thời điểm này, DOM bị hỏng. Lưu ý: Hãy thử lấy các phần tử con của FORM hoặc TR của bạn bằng JavaScript, nó có thể dẫn đến kết quả không mong muốn.

Lưu ý rằng IE7 không hỗ trợ các kiểu bảng CSS này và IE8 sẽ cần một khai báo kiểu tài liệu để đưa nó vào chế độ "tiêu chuẩn": (thử kiểu này hoặc một cái gì đó tương đương)

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

Bất kỳ trình duyệt nào khác hỗ trợ hiển thị: bảng, hiển thị: hàng bảng và hiển thị: ô bảng sẽ hiển thị bảng dữ liệu css của bạn giống như khi bạn sử dụng các thẻ TABLE, TR và TD. Hầu hết họ làm.

Lưu ý rằng bạn có thể thead cũng bắt chước, tbody, TFOOT bằng cách gói nhóm hàng của bạn trong một DIV với display: table-header-group, table-row-groupvà table-footer-grouptương ứng.

LƯU Ý: Điều duy nhất bạn không thể làm với phương pháp này là colspan.

Kiểm tra hình minh họa này: http://jsfiddle.net/ZRQPP/

— Matthew
nguồn

+1 để đề cập đến điều này không kích hoạt colspan ... mà tôi đã bỏ lỡ lần đầu tiên đọc nó qua ;-)

— Johannes Rudolph

Đó phải là câu trả lời được kiểm tra màu xanh lá cây (ngay cả khi không sử dụng thẻ bảng thực sự)

— Alessio