2

注文入力フォームは、データベースで定義されたフィールドから作成されます。すべてのフィールドには、テキスト キャプションと入力要素が含まれています。

input 要素は input type=text、checkbox または select 要素です。右側にドロップダウンボタンを含むjquery ui autocompleteまたはdatepickerにすることもできます。JQuery UI を使用しています。

出力では、入力要素が整列されていません。乱雑に見えます:

乱雑なフォーム

このレイアウトの読みやすさを改善するにはどうすればよいですか?

入力要素の左側を垂直方向に揃えて、同じ列から開始する方法は? ブラウザー ウィンドウのサイズが変更された場合、新しい列が自動的に表示または削除されます。

これを可能にする魔法の css または jquery ui 機能があるのではないでしょうか? また、すべてのフィールド幅を同じにすることもできます。各入力要素の最小幅はデータベースで定義されています。レンダリングされる幅は多少大きくなります。キャプションの場合、2 パス レンダリングを行うことができます。最初のパスでは、キャプションの最大文字数を見つけ、すべてのキャプションの幅を計算します。

使用されるhtmlは次のとおりです。

<form id='_form' class='form-fields'>

<div class='form-field'>
<label class='form-label' for='Klient0_nimi'><u>Customer</u></label>
<span id='span_Klient0_nimi'><input id='Klient0_nimi' name='Klient0_nimi'  style='width:100px'  class='ui-widget-content ui-corner-all' maxlength='80'  lookup='Klient' value='Brad Abrams' ></input>
<button type='button' class='form-combobutton' tabindex=-1 ></button>
</span>
</div>

<div class='form-field'>
<label class='form-label' for='Tasudok'>Number</label>
<input class='ui-widget-content ui-corner-all'  id='Tasudok' name='Tasudok' value='798'  style='width:100px'  maxlength='25' />
</div>

<div class='form-field'>
<label class='form-label' for='Kuupaev'>Date</label>
<input maxlength=10 size=10 class='ui-widget-content ui-corner-all'  id='Kuupaev' name='Kuupaev'   value='1/26/2012' />
</div>


<div class='form-field'>
<label class='form-label' for='Maksetin1_tingimus'><u >Condition</u></label>
<span><select id='Maksetin1_tingimus' name='Maksetin1_tingimus' class='ui-widget-content ui-corner-all' style='width:100px'  
 lookup='Maksetin' value='10' >

 <option value=''></option>
 <option value='10'>10 days</option>
 </select>
</span>
</div>


<div class='form-field'>
<label class='form-label' for='Eimuuda'>No change</label>
<input type='hidden' value='false' name='Eimuuda' />
<input type='checkbox' id='Eimuuda' name='Eimuuda'/>
</div>

<div class='form-field'>
<label class='form-label' for='Doksumma'>Total</label><input style='text-align:right'  id='Doksumma' name='Doksumma'  disabled='disabled' class='jqgrid-readonlycolumn' readonly='readonly' tabindex='-1'  value='0.00'  style='width:100px'  maxlength='0' />
</div>

</form>
4

4 に答える 4

4

列の配置を使用できます。最初の列にラベル、2 番目の列に入力フィールドです。

最終的には、4 つの列を使用できます。1 番目と 3 番目にラベル、2 番目と 3 番目に入力フィールドです。

また、入力フィールドでは width:100% を使用してください。また、ラベルには text-align:right を検討することをお勧めします。

ここでは、古い html テーブルが役立つ場合があります。

多くのフィールドがあるため、フォームをセクションに分割することを検討することをお勧めします。ここで説明されているよう<fieldset><legend>

例:

<!DOCTYPE html>
<html>
<body>

<style type="text/css">
    .lbl {
        text-align: right;
        width: 100px;
        white-space: nowrap;
    }

    .fld {
        width: 100%;
    }

    .frm {
        display: inline-block;
    }

</style>
</head>

<form>
    <fieldset>
        <legend>Person</legend>

        <div class="frm">
            <table>
                <tr>
                    <td class="lbl"><label for="name">Name:</label></td>
                    <td><input class="fld" id="name" type="text"></td>
                </tr>
                <tr>
                    <td class="lbl"><label for="email">Email:</label></td>
                    <td><input class="fld" id="email" type="text"></td>
                </tr>
                <tr>
                    <td class="lbl"><label for="dob">Date of birth:</label></td>
                    <td><input class="fld" id="dob" type="text"></td>
                </tr>
            </table>
        </div>

        <div class="frm">
            <table>
                <tr>
                    <td class="lbl"><label for="addr">Address:</label></td>
                    <td><input class="fld" id="addr" type="text"></td>
                </tr>
                <tr>
                    <td class="lbl"><label for="city">City:</label></td>
                    <td><input class="fld" id="city" type="text"></td>
                </tr>
                <tr>
                    <td class="lbl"><label for="ctry">Country:</label></td>
                    <td><input class="fld" id="ctry" type="text"></td>
                </tr>
            </table>
        </div>

    </fieldset>
</form>

</body>
</html>

結果は次のようになります。

横方向に十分なスペースがある場合:

ここに画像の説明を入力

横方向に十分なスペースがない場合:

ここに画像の説明を入力

于 2012-12-26T09:35:53.907 に答える
1

div の代わりに table を使用できます。6列または必要なだけ作成します。

 <table>
        <tr>
            <td style="width: 20%;">
            </td>
             <td style="width: 20%;">
            </td>
             <td style="width: 20%;">
            </td>
            <td style="width: 20%;">
            </td> 
            <td style="width: 20%;">
            </td>
        </tr>
        <tr>
            <td style="width: 20%;">
            </td>
             <td style="width: 20%;">
            </td>
             <td style="width: 20%;">
            </td>
            <td style="width: 20%;">
            </td> 
            <td style="width: 20%;">
            </td>
        </tr>

    </table>
于 2012-12-26T09:33:32.597 に答える
1

「レスポンシブ デザイン」ソリューションを探しています。これは通常、この非常にシンプルでわかりやすい 12 列のグリッドhttp://cssgrid.net/などのグリッド ベースのスタイル シートを使用して実現されます。

また、ラベルを左揃えではなく右揃えにする必要があります(つまり、ルイージの答えのように)

レイアウトにテーブルを使用しないでください。テーブルは表形式のデータ用です。

于 2012-12-26T10:57:56.277 に答える
0

一般に、オンライン フォームの純粋な CSS ソリューションは簡単ではありません。幸いなことに、Wufoo の優秀な人々が、私が学ぶことのできる優れた CSS フォームを作成してくれました。彼らの CSS ベースのフォームのオンライン例:

サンプルページ: http://www.wufoo.com/examples/#eventregistration

複数列フォームの例: https://examples.wufoo.com/forms/s7p7s5/

于 2012-12-26T22:29:50.150 に答える