HTML：フォームの表記ですか？

Question

多くの場合、フォームのテーブルを作成したいと思っています。各行は、独自のフィールドと送信ボタンを持つ別々のフォームです。

​​

：これはあなたが選択してチェックアウトする前に変更を保存してきたペットの量と属性を更新するオプションを提供しますチェックアウト画面で想像 - たとえば、ここでの例のペットショップのアプリケーションです

<table> 
<thead><tr><th>Pet</th> <th>Quantity</th> <th>Color</th> <th>Variety</th> <th>Update</th></tr></thead> 
<tbody> 
    <tr> 
      <form> 
      <td>snake<input type="hidden" name="cartitem" value="55"></td> 
      <td><input name="count" value=4/></td> 
      <td><select name="color"></select></td> 
      <td><select name="variety"></select></td> 
      <td><input type="submit"></td> 
      </form> 
    </tr> 
</tbody> 
</table> 

これは、基本的な形態、行ごとに一つの形の完全なテーブルです：私はこのようになります。この使用してHTMLを行うことができるのが大好きです。更新を一回実行すると、その特定の行を更新できます（これは実際の例ではありません。実際のアプリケーションでは、行の独立性が必要です）。

これは有効なHTMLではありません。仕様によると、<form>は、完全に<td>の内側か、または<table>の外側に完全に入っていなければなりません。この無効なhtmlは、JavaScriptライブラリを破壊し、対処するには巨大な痛みです。

1つの表を作成して列ヘッダーを作成し、フォームごとに1つの表を作成します。しかし、これは固定列の幅が入力を列で整列させる必要があります。これはサブパルです。どのようにしてこの問題に対処しますか？明らかな簡単な解決策はありますか？どのように私はフォームのテーブルを作るのですか？

Answer 1

ここでのトリックは、単一のフォームを使用することです。

<form> 
     <table> 
     <!-- rows... --> 
     </table> 
     <p><input type="submit" value="Update quantity"></p> 
    </form> 

id 6の商品スネークがあるとします。次に、そのアイテムの数量欄[6]の入力に名前を付けます。

あなたが使用しているサーバー側の言語はわかりませんが、PHPでは量子数を反復してIDに基づいて更新できます。

Answer 2

他の要素にテーブルレイアウトを与えるために、CSSを使うことができます。

.table { display: table; } 
.table>* { display: table-row; } 
.table>*>* { display: table-cell; } 

次に、次の有効なhtmlを使用します。

<div class="table"> 
    <form> 
     <div>snake<input type="hidden" name="cartitem" value="55"></div> 
     <div><input name="count" value=4/></div> 
    </form> 
</div>