如何在不使用表格的情况下格式化 HTML 表单答案

【问题标题】：How Do I Format a HTML Form Without Using Tables如何在不使用表格的情况下格式化 HTML 表单
【发布时间】：2010-09-15 20:13:37
【问题描述】：

我知道对所有东西都使用 HTML 表格是很糟糕的……而且表格应该只用于呈现表格数据，而不是实现某种样式目标。

我的问题是，如何使用 CSS 制作 HTML 表单，使它们看起来像使用表格时一样美观且对齐？

【问题讨论】：

标签： html css

【解决方案1】：

Nick Rigby 为 A List Apart 写了一篇出色的文章，标题为 Prettier Accessible Forms

使用字段集、图例、标签。高度语义化。

【讨论】：

【解决方案2】：

看看 wufoo 表单中使用的代码，他们使用 ul 来格式化表单，它们看起来非常好。

http://wufoo.com/gallery/templates/

【讨论】：

【解决方案3】：

您可以尝试将表单尽可能向后剥离，并根据需要使用 <label> 和各种表单输入元素，并利用 CSS 中的 clear:left; 属性。

这将确保每一行都重新开始，而不必将表单的每一行包装在额外的 <div> 或 <p> 中，甚至可以从中列出。

.formlabel{
    clear:left;
    display:block;
    float:left;
    margin:0 0 1em 0;
    padding:0 0.5em 0 0;
    text-align:right;
    width:8em;
}

.forminput{
    float:left;
    margin:0 0.5em 0.5em 0;
}

.formwarning{
    clear:left;
    float:left;
    margin:0 0.5em 1em 0;
}

这是一个示例 HTML 表单，其中显示了各种输入类型的示例以及您可以根据需要隐藏或设置样式的额外验证消息：

<fieldset><legend>Details</legend>
    <label for="name" class="formlabel">Name</label>
      <input id="name" name="name" type="text" class="forminput" />
      <div class="formwarning">Validation error message</div>

    <label for="dob_year" class="formlabel">DOB</label>
      <div class="forminput">
        <input id="dob_year" name="dob_year" type="text" size="4" /> /
        <input id="dob_month" name="dob_month" type="text" size="2" /> /
        <input id="dob_day" name="dob_day" type="text" size="2" />
      </div>

    <label class="formlabel">Sex</label>
      <label for="female" class="forminput">Female</label>
        <input id="female" name="sex" type="radio" class="forminput" />
      <label for="male" class="forminput">Male</label>
        <input id="male" name="sex" type="radio" class="forminput" />

    <label for="state" class="formlabel">State</label>
      <select id="state" name="state" class="forminput">
        <option>ACT</option>
        <option>New South Wales</option>
        <option>Northern Territory</option>
        <option>Queensland</option>
        <option>South Australia</option>
        <option>Tasmania</option>
        <option>Victoria</option>
        <option>Western Australia</option>
      </select>

    <label for="deadseal" class="formlabel">Death certificate</label>
      <input id="deadseal" name="deadseal" type="file" class="forminput" />
</fieldset>

在上面的例子中，DOB 确实有一个额外的<div> 使事情变得混乱。如果在需要的地方将日期斜线设置为 :after 伪元素的一部分，则可以去掉它。

在 Opera 11.60、Firefox 11、Google Chrome 18 和 Internet Explorer 8 中运行良好。

【讨论】：

【解决方案4】：

我会使用 div 标签来查找页面上的数据布局。

表格对于表格数据仍然非常有用，但它在布局页面时不受欢迎。

在 stackoverflow.com 上查看源代码，可能有一些很好的例子。

【讨论】：

<table> 标签在此页面上被使用了 24 次。

【解决方案5】：

考虑将字段名称放在字段上方，而不是旁边。我发现这是最好的。

【讨论】：

如果操作得当，表格的可读性会无限提高，因为您的眼睛只需朝一个方向移动，而不是来回扫描。
虽然对于复杂的表单来说效果不是很好。对我来说，它只是迫使我简化表格，这绝不是一件坏事。
不幸的是，我们并不总是能奢侈地指定设计。

【解决方案6】：

HTML

<form>
<div id="personal_name">
<label>Name</label>
<input name="name" />
</div>
</form>

CSS

form
{display: table}
#personal_name
{display: table-row}
#personal_name input, #personal_name label
{display: table-cell}

我觉得这就够了。

【讨论】：