6

DIVを使用したフォームの実装例をオンラインで探しましたが、表示されるのは非常に単純な1列のフォームだけです。私はいくつかのかなり複雑なフォームを持っています、これは1つの写真です：

http://img835.imageshack.us/img835/8292/formn.jpg

テーブルで動作させるのは簡単です（私はそうしています）。私が抱えている唯一の問題は、ギャップを避けるために、選択肢の一部を表示せず、値を1行上に移動する必要がある場合があることです。

divを使用していくつかのフォームを作成し始めましたが、ブラウザーのウィンドウサイズを変更すると、フォームがバラバラになり、調整が簡単ではありません。

このトピックは役に立ちます： フォームをhtmlで表示するときにテーブルタグを使用するのは悪いデザインですか？ しかし、それは私が持っている懸念のいくつかに対処していません。

解決策として何を提案しますか？テーブル内の値を動的に削除/挿入したり、DIVを実行したりできます。

4

3 に答える 3

4

私はdivルートに行きます。フロートを適用するときに幅に注意している限り、さまざまな画面解像度でレイアウトを適切に機能させるのは実際には非常に簡単です。

以下にいくつかのルールを示します。

  1. フォームまたはフォームのラッパー要素に最大幅を設定します。要素を 1 行にフロートさせたい場合は、それらの幅の合計がこの幅を超えないようにしてください。
  2. フローティング要素に水平方向のパディング/マージンを追加する場合は、これらが要素の幅全体に追加されることに注意してください。
  3. パーセンテージ幅とピクセル パディングおよびマージンを混在させないでください。パーセンテージ幅を親要素に適用し、ピクセルのパディング/マージンを子要素に適用します。
  4. 要素の行の間にクリア要素を使用して、すべてを一列に並べます。

マークアップに関しては、CSS と共にフォーム要素を使用してセマンティック構造を作成できます。

<fieldset>
    <legend>Fieldset Title</legend>

    <label for="input1">Input 1:</label>
    <span><input type="text" id="input1" name="input1"/></span>
    <label for="input2">Input 2:</label>
    <span><input type="text" id="input2" name="input2"/></span>

    <br/>

    <label for="input3">Input 3:</label>
    <span><input type="text" id="input3" name="input3"/></span>
    <label for="input4">Input 4:</label>
    <span><input type="text" id="input4" name="input4"/></span>
</fieldset>

そしてCSS：

fieldset {
    padding: 20px 0;
    width: 600px;
    margin: 0;
    border: 0;
}

legend {
    display: block;
    width: 100%;
    background: black;
    color: white;
}

label, span{
    float: left;
    width: 150px;
}

input {
    width: 120px;  
}

br {
    clear: both;  
}

結果はこちらでご覧いただけます。

于 2010-08-24T23:12:05.027 に答える
1

固定幅のテーブルの場合、div と float を使用してレイアウトするのは簡単です。各幅を希望どおりに設定するだけです。

リキッド レイアウト テーブルの場合 (リキッド レイアウトは一般に非常に望ましいものです)、テーブル スタイル ディスプレイを使用せずにフォームを配置するのは非常に困難floatですposition。親、固定幅ラベルが割り当てられた後」。

したがって、投稿した 2 列フォームのようなものを確実に含むこのような場合、table-*CSSdisplay値が唯一の可能性です。IE8 やその他の最新のブラウザーのみを対象としている場合はdisplay: table-row、スタイルシートで div と set et al を使用できます。ただし、IE6-7 およびその他の古い/モバイル/ニッチなブラウザーとの互換性のために、実際の<table>/ <tr>/<td>要素を使用する必要があります。これは、最近のブラウザーのみが table-element とは独立して table-CSS をサポートするためです。

これには恥じらいはありません。いずれにせよ、フォームは一種の半表形式であり、ページのコンテンツが適切に並べられたままであるため、実用的なアクセシビリティの欠点はありません。

注: リキッド レイアウト フォームの場合、親要素に合わせて入力フィールドのサイズを変更するという問題もあります。入力がデフォルトで取得する境界線またはパディングが含まれていないinput { width: 100%; }ため、ほとんど実行されますが、完全ではありません。widthCSS3box-sizingとそのブラウザー固有のバージョンを使用して、最新のブラウザーでそれを回避できますが、IE6-7 のピクセルに正確に合わせたい場合は、親要素に等しいパディングを使用する必要があります。子入力フィールドのボーダー/パディング。

于 2010-08-24T23:48:54.923 に答える
0
  • General informationある種のリストであり、正確にはキー>値リストです-<dl />おそらく最適な構造です
  • Issues valuesテーブルであり、
  • Ratingsテーブルであり、
  • Redemptionとの両方Indicatorsがリスト - 順序なしリスト<ul />
于 2010-08-24T23:56:42.830 に答える