【发布时间】：2019-01-09 16:42:47
【问题描述】：
如何在屏幕上定位具有多个字段的复杂表单？
【问题讨论】：
【发布时间】：2019-01-09 16:42:47
【问题描述】：
为什么人们如此执着于避开餐桌？
不推荐使用表格，应在显示逻辑上属于表格的内容时使用表格。
如果您的表单按逻辑分组以便表格直观，请使用表格。
始终在想：“实现此结果的最简洁、最简单、最可维护的方法是什么。”
如果您想要具有可变数量列的流体形式，请忽略此。
【讨论】：
-
表格是否可能更适合这种情况不是问题。他在问如何在没有它们的情况下进行这种布局。所以，你的回答本身并没有太大帮助。
-
它是最干净和简单的，但使用表是不可维护的。流体形式可以自我维护。
-
我同意上述cmets。我使用表格来显示一些表格，但我提出这个问题是因为表格不适用于我正在构建的特定表格。
-
"表格未被弃用，应该在显示逻辑上属于表格的内容时使用。"这是真的，但是，这意味着您应该使用表格来表示表格数据（例如，网格）。你不应该使用表格来设计你的布局。
我更喜欢稍微语义化的方式，使用definition list：
<dl class="form">
<dt><label for="input1">One:</label></dt>
<dd><input type="text" name="input1" id="input1"></dd>
<dt><label for="input2">Two:</label></dt>
<dd><input type="text" name="input2" id="input2"></dd>
</dl>
然后是你的 CSS：
dl.form {
width:100%;
float:left;
clear:both;
}
dl.form dt {
width:50%;
float:left;
clear:left;
text-align:right;
}
dl.form dd {
width:50%;
float:left;
clear:right;
text-align:left;
}
这应该会生成一个位于页面中心的表单，标签在左列，输入在右列
【讨论】：
有许多不同的方法可以做到这一点。这都是偏好问题。我通常做的是有一个包含所有行的包装器 div，然后是每行包含标签、输入和验证器的 div 块。您可以使用 line-height CSS 属性来帮助您进行垂直对齐。示例：
<div class="formWrapper">
<form>
<div class="formItem">
<label for="firstName">First Name:</label>
<input name="firstName" id="firstName" class="required" type="text" />
<span class="validator" style="display: none;">*</>
</div>
... <!-- Rinse repeat -->
</form>
</div>
<style type="text/css">
.formWrapper { width: 400px }
.formWrapper .formItem { line-height: 35px; height: 35px; }
.formWrapper label { width: 50px; }
.formWrapper input { width: 100px; border: 1px solid #000; }
.formWrapper .validator { padding-left: 10px; color: #FF0000; }
</style>
希望对您有所帮助。
【讨论】：
在查看了许多不同的解决方案后，我发现此页面上的示例（尤其是“致命”中的示例？）其中一些最有帮助。但广泛的
和标签确实让我有点困扰。所以这里有一些人可能喜欢的修改。此外，您会发现某种“包装器”或“字段集”样式对于防止浮动影响其他 HTML 非常必要。参考上面的例子。
<style>
.formcol{
float: left;
padding: 2px;
}
.formcol label {
font-weight: bold;
display:block;}
</style>
<div class="formcol">
<label for="org">organization</label>
<input type="text" id="org" size="24" name="org" />
</div>
<div class="formcol">
<label for="fax">fax</label>
<input type="text" id="fax" name="fax" size="2" />
</div>
<div class="formcol">
<label for="3">three</label>
<input type="text" id="3" name="3" />
<label for="4">four</label>
<input type="text" id="4" name="4" />
<label for="5">five</label>
<input type="text" id="5" name="5" />
</div>
<div class="formcol">
<label for="6">six</label>
<input type="text" id="6" name="6" />
</div>
【讨论】：
这可以通过将“display”属性设置为“inline”来使用 CSS 完成（因为默认情况下，表单元素是块级元素）。
【讨论】：
搜索“没有表格的布局”。许多网站使用 CSS 来描述格式。这是一个简单的介绍：http://www.htmlgoodies.com/beyond/css/article.php/3642151
【讨论】：
我建议你blueprint CSS framework。快速查看demo page。
【讨论】：
当我需要设计非常复杂的表单时，我通常会使用它。
HTML：
<fieldset><br> <legend>Consent group</legend><br> <form><br> <fieldset class="nolegend"><br> <p><label><span>Title</span> <input type="text" name="title" size="40" value="" /></label></p><br> <p><label><span>Short name</span> <input type="text" name="sname" size="20" value="" /></label></p><br> <p><label><br /><input type="checkbox" name="approval"> This consent group requires approval</label></p><br> </fieldset><br> <fieldset class="nolegend"><br> <p><label><span>Data use limitations</span> <textarea name="dul" cols="64" rows="4"></textarea></label></p><br> </fieldset><br> <input type="submit" value="Submit" /><br> </form><br></fieldset>CSS：
body, input, textarea, select {<br> font: 1em Arial, Helvetica, sans-serif;<br>}<br>input, textarea, select { font-size: .8em }<br>fieldset,<br>fieldset legend {<br> background-color: #EEE;<br>}<br>fieldset {<br> border: none;<br> margin: 0;<br> padding: 0 0 .5em .01em;<br> top: 1.25em;<br> position: relative;<br> margin-bottom: 2em;<br>}<br>fieldset fieldset {<br> margin: 0 0 1em 0;<br>}<br>fieldset legend {<br> padding: .25em .5em 0 .5em;<br> border-bottom: none;<br> font-weight: bold;<br> margin-top: -1.25em;<br> position: relative;<br> *left: -.5em;<br> color: #666;<br>}fieldset form,<br>fieldset .fieldset {<br> margin: 0;<br> padding: 1em .5em 0 .5em;<br> overflow: hidden;<br>}<br>fieldset.nolegend {<br> position: static;<br> margin-bottom: 1em;<br> background-color: transparent;<br> padding: 0;<br> overflow: hidden;<br>}<br>fieldset.nolegend p,<br>fieldset.nolegend div {<br> float: left;<br> margin: 0 1em 0 0;<br>}<br>fieldset.nolegend p:last-child,<br>fieldset.nolegend div:last-child {<br> margin-right: 0;<br>}<br>fieldset.nolegend label>span {<br> display: block;<br>}<br>fieldset.nolegend label span {<br> _display: block;<br>}我在 Safari hacks 中省略了几行 CSS。您可以查看此代码的live version。
【讨论】：
Pace KyleFarris，但我只需要给 Ben S 投票，因为我有胆量提及桌子。只要看看这个页面上和互联网上的各种 CSS 解决方案，就可以找到一个非常简单的问题。 CSS 可能有一天会成为一个很好的解决方案，但目前复制 table 标签提供的简单行和列网格是非常复杂的。我用这种对表格之类的表格的偏见花费了无数无用的时间。我们为什么要这样对自己？
【讨论】：
默认情况下，输入字段是内联的。因此，您可以简单地使用 line up without
如果您希望它们正确排列，另一个选项如下：
<div id="col1" style="float: left;>
<input type="text" name="field1" />
<br />
<input type="text" name="field3" />
</div>
<div id="col2" style="float: left;>
<input type="text" name="field2" />
<br />
<input type="text" name="field4" />
</div>
【讨论】：
我更喜欢使用 fieldset 对所有元素进行分组，并为每个表单字段使用 p。
<html>
<head>
<style type="text/css">
fieldset {
width: 500px;
background-color: lightblue;
}
fieldset legend {
font-weight: bold;
}
fieldset p {
clear:both;
padding: 5px;
}
fieldset label {
text-align: left;
width: 100px;
float: left;
font-weight: bold;
}
fieldset .Validator {
color: red !important;
font-weight: bold;
}
</style>
<head>
<body>
<form>
<fieldset>
<legend>Data</legend>
<p>
<label for="firstName">First Name:</label>
<input name="firstName" id="firstName" class="required" type="text" />
<span class="Validator" style="display: none;">*</span>
</p>
<p>
<label for="lastName">Last Name:</label>
<input name="lastName" id="lastName" class="required" type="text" />
<span class="Validator">*</span>
</p>
</fieldset>
</form>
</body>
</html>
【讨论】：