テーブル内のフォーム

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

— Derek━會功夫2011

そして、あなたはを閉じるのを忘れました<tr>。

— デレク━會功夫2011

フォームにdisplay：table-rowを使用し、テーブルタグをすべて破棄します。ここで私の答えを参照してください：stackoverflow.com/a/15600151/1038812

— Matthew

できませんが、機能します...

— サンドバーグ

回答:

371

フォームは、またはの子要素にすることはできません。そこに配置しようとすると、ブラウザがフォームをテーブルの後に表示されるように移動する傾向があります（その内容（テーブルの行、テーブルのセル、入力など）は残します）。tabletbodytr

フォーム内にテーブル全体を含めることができます。テーブルセル内にフォームを含めることができます。フォーム内にテーブルの一部を含めることはできません。

テーブル全体を1つのフォームで囲みます。次に、クリックした送信ボタンを使用して、処理する行を決定する（迅速にする）か、すべての行を処理する（一括更新を許可する）かを決定します。

HTML 5ではform 属性が導入されています。これにより、テーブルの外の行ごとに1つのフォームを提供し、特定の行のすべてのフォームコントロールを、そのを使用してそれらのフォームの1つに関連付けることができますid。

— クエンティン
ソース

テーブル全体に1つのフォームを使用するように注意してください。フィールドが空であっても、すべてのフィールドがサーバーに送信されます。大量のデータになる可能性があります!!! マス/パブリックの使用については、その行のボタンから開いたダイアログ（表にないフォーム）を使用することをお勧めします。

— Loenix 2016

@Loenix：テーブルに十分なデータを入れて、人々の帯域幅に大きな負担をかけることはほとんどありません（少なくとも、一般的なWebページのサイズと比較すると）。行の編集を選択してから変更を加えることができるまでの間に別のページをロードするようユーザーに要求することは、OTOHは、ユーザーが実行しなければならない煩わしい追加の対話になります。

— クエンティン

元の質問で提案されたソリューションの編集ボタンは必要ありません。

— クエンティン

なぜ規格<form>内で禁止されたの<table>ですか？

— 1234ru 2017

@Qentinは十分に公正です。明らかな理由もなく、これが20年経っても今も変わらないのは残念です。

— 1234ru 2017

188

マークアップを保存する場合は、「フォーム」属性を使用します。

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

さらに、インターネットエクスプローラーでは機能しません。詳細はこちら

— Souhaieb Besbes 2015

フォーム属性のステータスは「検討中」です。つまり、非常に辛抱強く開発者になる必要があります。stackoverflow.com/a/26696165/648484

— Souhaieb Besbes 16

今、「開発中」ようだと使用にOK

— user1156544

@ user1156544現在Edgeでサポートされていますが、IEではサポートされていません。IEをまったくサポートする必要がある場合、このソリューションではうまくいきません。私の計画は、2つのフォーム要素に2つのテーブルを使用することです（これを行う必要があるとは思えません）。Microsoftに感謝します。

— プルート

：あなたは、「編集可能なグリッド」、すなわち、フォームの行のいずれかを行うことができます構造のようなテーブル、使用CSSを模倣TABLEタグのレイアウトしたい場合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でラップする場合の問題は、すべてのフォーム要素が送信時に送信されることです（おそらく望ましいことですが、おそらくそうではありません）。このメソッドを使用すると、「行」ごとにフォームを定義し、送信時にそのデータ行のみを送信できます。

TRタグ（またはFORMの周りのTR）でFORMタグをラップする場合の問題は、HTMLが無効であることです。FORMは通常どおり送信を許可しますが、この時点で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タグを使用した場合と同じように表示する必要があります。それらのほとんどは行います。

また、行グループを別のDIVでdisplay: table-header-group、table-row-groupおよびでラップすることにより、THEAD、TBODY、TFOOTを模倣することもできますtable-footer-group。

注：このメソッドで実行できない唯一のことはcolspanです。

この図を確認してください：http : //jsfiddle.net/ZRQPP/

— マシュー
ソース

これに言及するための+1はcolspanを有効にしません...これは最初にそれを読んで見逃していたに違いありません;-)

— ヨハネスルドルフ

それは緑のチェックされた答えでなければなりません（実際にテーブルタグを使用しない場合でも）

— Alessio