32

<table>sフォームフィールドを完全に整列させるために使用することに慣れてきました。これは、私が一般的にフォームを書く方法です。

<table border="0">
   <tr>
     <td><label for="f_name">First name:</label></td>
     <td><input type='text' id='f_name' name='f_name' /></td>
     <td class='error'><?=form_error('f_name');?></td>
   </tr>
</table>

私はこれが悪い習慣であることを知っており、CSS 、、、またはよりクリーンな方法を使用したいと考えています。ただし、実際には、フォームに対して非常にうまく機能します。すべてが正確に整列され、間隔が完璧で、すべてのエラーが互いに正確に下にあるなどです。<label>s<div>s<table>s

最近、フォームに<dt>と<dd>タグを使用しようとしましたが、見栄えがよくなったという理由だけで、テーブルに戻ってしまいました。

sを使用せずにこの種の整列テーブル レイアウトを取得するにはどうすればよい<table>ですか?

4

11 に答える 11

27

これはあまり支持されないかもしれませんが、ここに私の2セントがあります：

場合によっては、テーブルの方がレイアウトが簡単です。3 つの列やフォームなど (ただし、純粋な CSS フォーム レイアウトを行うための優れた提案がいくつかありますが、それらも無視しないでください。)

プロセスと方法論は良い使用人にはなりますが、マスターにはなりません。
   - マーク・ダウド、ジョン・マクドナルド、ジャスティン・シュー
     「ソフトウェアセキュリティ評価の芸術」

この言葉は、この状況に非常に強く当てはまると思います。表のレイアウトが機能しており、アクセシビリティの問題が発生しておらず、壊れていない場合は、修正しないでください。

「するべき」、「しなければならない」、「常に」などのフレーズは、私を怖がらせます。一粒の塩で熱狂者を取ります。

于 2009-02-26T18:13:38.957 に答える
15

はい、ラベルと CSS を使用します。

<label class='FBLabel' for="FName">First Name</label>
<input value="something" name="FName" type="text" class='FBInput'>
<br>

CSS:

.FBLabel, .FBInput {
    display:block;
    width:150px;
    float:left;
    margin-bottom:10px;
}

参照: http://www.alistapart.com/articles/prettyaccessibleforms

于 2009-02-26T17:30:56.440 に答える
11

テーブルを使用しない場合は、事前にラベルの幅を知る必要があります。これは、多言語サイト (i18n) で問題になることがよくあります。

テーブルを使用すると、さまざまなサイズのラベルに合わせて伸縮します。CSS だけでは、十分にサポートされた方法でこれを行うことはまだできません。

于 2009-09-08T19:01:47.330 に答える
5

なぜテーブルを使いたくないのですか？彼らは今、あなたにとって完璧に機能しているようです。アクセシビリティの問題が心配ですか? テーブルだからといって、アクセシビリティが損なわれるわけではありません。

純粋さのためだけに、解決された問題に対する新しい解決策を作成しないように注意してください。セマンティクスが気になるところですが、フォームはどのようなセマンティクスで記述されているのでしょうか。

于 2009-02-26T17:30:41.527 に答える
2

本当にあなたが話す相手に依存します。テーブル要素はレイアウト用ではなかったので、純粋主義者は CSS を使用すると言います。しかし、私にとっては、うまくいくなら、なぜそれを変更するのですか? 私は現在、レイアウトに CSS を使用していますが、まだ使用していないレガシー コードがたくさんあり、今後も変更する予定はありません。

于 2009-02-26T17:31:12.447 に答える
0

私もこの問題を抱えていましたが、左側にメニューがあったというcocidilを使用していました（float：leftも含まれています）。

そう。私の解決策は：html

<div class="new">
   <form>
     <label class="newlabel">Name</label>
     <input type="text" name="myTextBox" id="myTextBox" />
   </form>
</div>

CSS

.new {
    display:block;
}
.newlabel {
    min-width: 200px;
    float: left;
}

フォームクラスでも機能すると思いますが、実際には「新しい」クラスにもっとフォームがありました。

于 2013-11-14T17:29:07.793 に答える
0

私は過去にこれをかなり効果的に使用しました：

HTML:

<fieldset>
  <p>
    <label for="myTextBox">Name</label>
    <span class="field"><input type="text" name="myTextBox" id="myTextBox" /></span>
    <span class="error">This a message place</span>
  </p>
</fieldset>

CSS:

<style type="text/css">
fieldset label, fieldset .field, fieldset .error { display: -moz-inline-box; display: inline-block; zoom: 1; vertical-align: top; }
fieldset p { margin: .5em 0; }
fieldset label { width: 10em;  text-align: right; line-height: 1.1; }
fieldset .field { width: 20em; }
</style>

唯一本当に落とし穴があるのは Firefox 2 だけです。(少しハックですが、それほど悪くない -moz-inline-box を参照してください)

于 2009-02-26T17:45:50.117 に答える