我一整天都在试图弄清楚如何创建大型表单，同时保持布局的正确设计。
目前我正在使用formee（样式和960网格系统），我试图将其变成内联表单而不是基于行的（默认）。不幸的是，它变得非常混乱，看起来很可怕。
为了直观地理解我想要归档的内容，我创建了一个模型。
我该如何解决问题？
问问题
689 次
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 回答