1

私は一日中、大きなフォームを作成すると同時に、レイアウトの適切なデザインを維持する方法を模索してきました。

現在、formee（スタイルおよび960グリッドシステム）を使用しています。これは、行ベース（デフォルト）ではなくインラインフォームに変換しようとしました。残念ながら、それは本当に厄介になり、ひどいように見えます。

何をアーカイブしたいかを視覚的に理解するために、モックアップを作成しました。

どうすれば問題を解決できますか？

モックアップ

4

2 に答える 2

1

そのような例を次に示します。http：//jsfiddle.net/PhilippeVay/gaegv/2/

HTML：

<fieldset class="group">
    <legend>First logical group of items</legend>
    <div class="col">
        <p class="text">
            <label for="label1">Field label 1</label>
            <input type="text" id="label1" />
        </p>
        <p class="text">
            <label for="label2">Field label 2</label>
            <input type="text" id="label2" />
        </p>
        <p class="text">
            <label for="label3">Field label 3</label>
            <input type="text" id="label3" />
        </p>
    </div>
    <div class="col">
        <p class="text">
            <label for="label4">Field label 4</label>
            <input type="text" id="label4" />
        </p>
        <p class="text">
            <label for="label5">Field label 5</label>
            <input type="text" id="label5" />
        </p>
        <p class="text">
            <label for="label6">Field label 6</label>
            <input type="text" id="label6" />
        </p>
    </div>
</fieldset>

<div class="group fieldset-like">
    <p class="textarea">
        <label for="label7">Field label 7</label>
        <textarea id="label7">some text (test font-size)</textarea>
    </p>
</div>

<div class="group">
    <fieldset class="col">
        <legend>Third legend</legend>
        <p class="text">
            <label for="label8">Field label 8</label>
            <input type="text" id="label8" />
        </p>
        <p class="text">
            <label for="label9">Field label 9</label>
            <input type="text" id="label9" />
        </p>
        <p class="text">
            <label for="label10">Field label 10</label>
            <input type="text" id="label10" />
        </p>
    </fieldset>

    <fieldset class="col">
        <legend>Fourth legend</legend>
        <p class="text">
            <label for="label11">Field label 11</label>
            <input type="text" id="label11" />
        </p>
        <p class="text">
            <label for="label12">Field label 12</label>
            <input type="text" id="label12" />
        </p>
        <p class="text">
            <label for="label13">Field label 13</label>
            <input type="text" id="label13" />
        </p>
    </fieldset>
</div>

CSS：

.col {
    float: left;
    width: 36%;
    padding: 2%;
    background: #EEE;
}
.col + .col {
    margin-left: 10%;
}
.col:after {
    content: "";
    display: block;
    clear: both;
}

fieldset,
.fieldset-like {
    margin: 0;
    padding: 0;
    border: 1px solid darkgreen;
}

.group {
    margin: 20px 10px; /* must come after .fieldset-like rule */
}

label {
    font-weight: bold;
    cursor: pointer;
}

.text { /* because .radio and .checkbox are SO different! */
    clear: both;
}
.text label,
.textarea label {
    display: inline-block;
    width: 39%;
    margin-right: 1%;
    text-align: right;
    background-color: lightgreen;
}
.text input,
.textarea textarea {
    display: inline-block;
    width: 55%;
    border: 1px solid darkgreen;
    padding: 4px;
}

.textarea {
    width: auto;
    padding: 2% 4% 2% 4%;
}
/* label and textarea: also see above */
.textarea label {
    width: 14.04%; /* 39% of 36% Yeah I know... */
    margin-right: 0.36%; /* 1% of 36% */
    background-color: lightgreen;
    vertical-align: top; /* otherwise label is at the the bottom of a very high neighbor */
}
.textarea textarea {
    width: 74%;
}

  • 段落のクラスを使用すると、フォーム要素の性質に応じてラベルのスタイルを設定できます（DOM、2012、および少なくともCSS3では、後続の要素に応じて前の兄弟（または親）のスタイルを設定することはできません）。 ;））。

  • 最新のブラウザではセレクタ属性を使用できます。input[type="text"]ただし、フィドルでの書き込みには時間がかかります。その後、HTML 4.01ではテキスト、パスワード、要素を選択し、HTML5ではメール、番号、電話番号などを追加する必要があります。セレクター。または、親のクラスを使用して、フォーム要素を区別してグループ化することもできます。前者は、何千人もの同僚のために一般的なリセットスタイルシートを作成する場合に必要ですが、HTMLコードを作成する場合は、後者の方が効率的です。

  • .group2が含まれ.colています。フィールドセットの列であるか、divのフィールドセットであるかは関係ありません。

  • 幅を持つ要素への幅の計算は乗算を意味します。それを一枚の紙に描き、それぞれの幅を書き留めます。それはあなたが単一のものを忘れないようにするでしょう;）

  • パーセンテージでのパディングは、入力には機能しないようです。それについてはよくわかりません。

  • ボックスサイズを追加すると、幅selectがより簡単になり、クロスブラウザになります。

    select {
-moz-box-sizing: content-box;   /* Firefox, meet padding ... */
    box-sizing: content-box;    /* IE8+ */
    padding: 4px 6px; /* example */
}
于 2012-07-02T18:55:16.153 に答える
0

UXの観点から、フィールドの左側にあるフォームラベルは、ユーザーの完了率が低くなります。これは、ユーザーがラベルを読み、ラベルをフィールドに関連付けてから、フィールドへの入力が完了した後、目を左に戻す必要があるためです。これは、軽度の眼精疲労と精神的注意散漫を引き起こします。

完了率が最も高いフォームは、ラベルがフィールドの上にある場合です。2番目に高いのは、ラベルがフィールド内にある場合です。これにより、フォームの外観がすっきりし、長くてもエンドユーザーに印象を与えることができます。記入するのは難しいフォームではありません。

于 2012-08-20T17:10:16.430 に答える