具有多列的表单，无表格

Question

如何在屏幕上定位具有多个字段的复杂表单？

Answer 1

为什么人们如此热衷于避开餐桌？

表格并未被弃用，在显示逻辑上属于表格的内容时应使用表格。

如果您的表单按逻辑分组以便表格直观，请使用表格。

始终思考：“实现这一结果的最干净、最简单、最可维护的方法是什么。”

如果您想要具有可变数量列的流体形式，请忽略这一点。

Answer 2

喜欢稍微语义化的方式，使用 定义列表：

<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;
}

这应该会生成一个位于页面中心的表单，标签位于左列，输入位于右列

Answer 3

有许多不同的方法可以做到这一点。 这都是一个偏好问题。 我通常做的是有一个包含所有行的包装器 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>

希望有帮助。

Answer 4

在查看了许多不同的解决方案之后，我发现此页面上的示例（特别是“致命”中的示例？）是一些最有帮助的。 但广泛的

标签确实让我有点困扰。 所以这里有一些可能会喜欢的修改。 另外，您会发现某种“包装器”或“字段集”样式对于防止浮动影响其他 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>

Answer 5

这可以使用 CSS 通过将“display”属性设置为“inline”来完成（因为默认情况下，表单元素是块级元素）。

Answer 6

搜索“没有表格的布局”。 许多网站都描述了使用 CSS 进行格式化。 这是一个简单的介绍： http://www.htmlgoodies.com/beyond/ css/article.php/3642151

Answer 7

我建议您blueprint CSS 框架。 快速浏览一下演示页面。

Answer 8

当我需要设计相当复杂的表单时，这就是我通常使用的方法。

HTML：

<fieldset>
    <legend>Consent group</legend>
    <form>
        <fieldset class="nolegend">
            <p><label><span>Title</span> <input type="text" name="title" size="40" value="" /></label></p>
            <p><label><span>Short name</span> <input type="text" name="sname" size="20" value="" /></label></p>
            <p><label><br /><input type="checkbox" name="approval"> This consent group requires approval</label></p>
     </fieldset>
        <fieldset class="nolegend">
            <p><label><span>Data use limitations</span> <textarea name="dul" cols="64" rows="4"></textarea></label></p>
        </fieldset>
        <input type="submit" value="Submit" />
    </form>
</fieldset>

CSS：

body, input, textarea, select {
    font: 1em Arial, Helvetica, sans-serif;
}
input, textarea, select { font-size: .8em }
fieldset,
fieldset legend {
    background-color: #EEE;
}
fieldset {
    border: none;
    margin: 0;
    padding: 0 0 .5em .01em;
    top: 1.25em;
    position: relative;
    margin-bottom: 2em;
}
fieldset fieldset {
    margin: 0 0 1em 0;
}
fieldset legend {
    padding: .25em .5em 0 .5em;
    border-bottom: none;
    font-weight: bold;
    margin-top: -1.25em;
    position: relative;
    *left: -.5em;
    color: #666;
}fieldset form,
fieldset .fieldset {
    margin: 0;
    padding: 1em .5em 0 .5em;
    overflow: hidden;
}
fieldset.nolegend {
    position: static;
    margin-bottom: 1em;
    background-color: transparent;
    padding: 0;
    overflow: hidden;
}
fieldset.nolegend p,
fieldset.nolegend div {
    float: left;
    margin: 0 1em 0 0;
}
fieldset.nolegend p:last-child,
fieldset.nolegend div:last-child {
    margin-right: 0;
}
fieldset.nolegend label>span {
    display: block;
}
fieldset.nolegend label span {
    _display: block;
}

我通过 Safari hacks 省略了几行 CSS。 您可以查看此代码的实时版本。

Answer 9

佩斯·凯尔·法里斯 (Pace KyleFarris)，但我不得不给 Ben S 投一票，因为他有勇气提到桌子。 只需查看本页和互联网上的各种 CSS 解决方案即可解决一个极其简单的问题。 CSS 有一天可能会成为一种很好的解决方案，但目前复制 table 标签提供的简单行和列网格是极其复杂的。 我带着对表格之类的东西的偏见度过了无数毫无结果的时间。 我们为什么要这样对自己？

Answer 10

默认情况下，输入字段是内联的。 因此，您可以简单地使用将它们排列起来，而无需
如果您希望它们正确排列，另一种选择如下：

<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>

Answer 11

我更喜欢使用 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>