0

現在、複数のフォームを一貫して構造化しようとしています。私は HTML が苦手なので、最初の試みは<table>タグを使用してフォームの一貫性を保つことでした。

<table>
  <tr>
    <form>
      <td><input type="text" /></td><td><input type="submit" value="Display" /></td>
    </form>
  </tr>
  <tr>
    <form>
      <td><input type="text" /></td><td><input type="submit" value="Display" /></td>
    </form>
  </tr>
</table>

2 つのフォームは、データを選択する 2 つの可能な方法を表しているため、コード (つまり、それらを 1 つのフォームに簡単に統合することはできません) と視覚スタイルの両方で一貫している必要があります。

これにより、入力フィールドとボタン (元の例では、より多くのデータとボタンがあります) が一貫して配置された 2 つのフォームが得られることを期待していました。ただし、これには 2 つの問題があります。

  • これはレイアウトの悪用<table>です。私はこれが悪いことを知っていますが、この場合、これは私が喜んで受け入れた欠点でした.
  • さらに重大なことに、これは有効な HTML ではあり<form>ません。そのため、これら 2 つの形式は本来のように連携しません。<tr><td>

HTML でフォームを構造化する方法についてオンラインで調べたところ、いくつかのリンクが見つかりましたが、それらはすべて、単一のフォームを一貫してレイアウトすることを扱っているだけです (たとえば、<dl>for layout を使用すると、 を使用するよりも優れていると思われます<table>)。これは、これらの個別のフォームを一貫して構造化するという私の問題にこれを適用する方法について、私がまったく考えていないことを意味します。

これを達成する良い方法はありますか？

編集：

一部の人々は私の説明に混乱しているように見えるので、これが最終的にどのようになることを望んでいるかを示した図を次に示します。

Value1: [input_field1_which_is_longer]  [Button1]
Value2: [input_field2]                  [Button2]

ここ[input_field1_which_is_longer]と[Button1] 1 つのフォームに属します。[input_field2]そして[Button2]第二形態に属します。これら 2 つのフォームは、同じデータにアクセスするための 2 つの異なる方法を提供するため、視覚的に整列する必要があります。

2 つの別個のフォームが必要です。これにより、サーバー側の処理部分を非常にシンプルに保つことができます (どのボタンが押されたかをまったく確認する必要がなく、データだけで十分です)。これを 1 つのフォームに変換しようとすると、2 つのボタンのどちらが押されたかを検出する必要があり、処理側ではさらに複雑になります。

また、これらのフォームを単純な別<div>の s に入れると、最初のフォームが 2 番目のフォームよりもはるかに長いため、形が崩れて見えます。

4

3 に答える 3

1

最初の回答とは異なるアプローチとして、HTML マークアップで表を使用するのではなく、CSS で表形式のプレゼンテーションを作成することを検討してください。主な問題は、IE 9 より前の IE でのサポートの欠如にあるようです。これは、場合によっては許容できるかもしれません。古い IE バージョンでは、機能はまだ存在し、マークアップは有効ですが、書式設定は不十分です。

このアプローチでは、要素を含むdiv、たとえば、要素を持つことになります。それらの内部では、要素の代わりに、たとえば ,を使用します。そして、CSS で適切な値を使用します。class=formsformspanclass=celltddisplay

<style>
.forms { display: table; }
form   { display: table-row; }
.cell  { display: table-cell; }
</style>
<div class="forms">
   <form action="...">
      <span class="cell"><input type="text" ... /></span>
      <span class="cell"><input type="submit" value="Display" /></span>
   </form>
   <form action="...">
      <span class="cell"><input type="text" ... /></span>
      <span class="cell"><input type="submit" value="Display" /></span>
   </form>
</div>
于 2012-05-04T15:37:04.360 に答える
1

フォームの構造にテーブルを使用しても問題ありません。特にフィールドとそのラベルは表形式データの良い例であるため、宗教的な反対意見は無視してください。(すべてのデータが数値であるとは限りません。)

あなたが言及した構文上の問題はより深刻です。はい、どの HTML バージョンでも無効なマークアップであることは確かです。しかし、それは機能します。いいえ、どのような状況でもすべてのブラウザーで動作することを保証することはできません。Firebug でページを見ると、コードが正常に解析されていないことがわかります。したがって、フォームのスタイリングは失敗する可能性があります。

HTML5 には、構文のネストによる通常の単純な関連付けではなく、属性を使用してフォーム フィールドをフォームに関連付けることができる機能があります。クロスブラウザーで動作することに頼ることができれば、問題はうまく解決するでしょう (10 年ほど待つ必要があるかもしれません ☺)。

個別のテーブルをそれぞれ独自の形式で使用すると、この構文上の問題を回避できます。ただし、列幅の割り当てはテーブルごとに個別に行われるため、スタイルの問題があります。固定幅を設定するとこれが修正され、ユニットが使用されていればそれほど悪くはありませんが、em理想的でもありません。ブラウザに適応させるのではなく、幅を推測または推定する必要があります。

理想的な解決策は、実装が可能であれば、テーブルを含む 1 つの大きなフォームにすることです。次に、サーバー側のフォーム ハンドラーは、最初に送信に使用されたボタンを確認し、それに応じて分岐する必要があります。フォームが複雑で、構造と機能が異なる場合、これは実行できません。しかし、一連の小さなフォームの場合はうまくいくかもしれません。

于 2012-05-04T11:56:16.227 に答える
1

ええ...私は個人的に使用<form>し<ul> <li>たり<div>、標準では表形式のデータにのみ使用する必要があるテーブル以外のものを使用したりします。何を達成する必要があるかについて、もう少し詳しく説明する必要があります。個人的には少し混乱しています。

于 2012-05-04T08:33:28.820 に答える