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"]但在 Fiddle 中编写的时间更长，然后您必须考虑 HTML 4.01 中的文本、密码和选择元素，在 HTML5 中添加电子邮件、号码、电话等，这将增加您的长度选择器。或者，您可以使用父级上的类来区分和分组表单元素。如果您正在为成千上万的同事编写通用重置样式表，则需要前者，如果您也是编写 HTML 代码的人，则后者效率更高。

  • .group包含 2 .col，它是字段集中的列还是 div 中的字段集都没有关系。

  • 将宽度计算为具有宽度的元素意味着乘法。把它画在一张纸上，写下每个宽度。它会让你不会忘记一个;)

  • 百分比填充似乎不适用于输入。不确定。

  • select如果添加box-sizing ，则宽度更容易跨浏览器：

    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

从用户体验的角度来看，位于字段左侧的表单标签的用户完成率较低。这样做的原因是用户必须阅读标签，将标签与字段相关联，然后在完成字段填写后再次将视线移回左侧。这会导致轻微的眼睛疲劳和精神分心。

完成率最高的表单是标签位于字段上方时。第二高是标签在字段内时。这也将使您的表单看起来更干净，并给最终用户留下印象，即使它可能很长。这不是一个令人生畏的形式来完成。

于 2012-08-20T17:10:16.430 回答