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

我知道什么都使用HTML表是不好的。。。表格应该只用于显示表格数据，而不是实现某种风格目标

---

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

我会使用div标记在页面上布局数据进行查找

表格对于表格数据仍然非常有用，但对于页面布局来说，表格是不可取的

---

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

考虑将字段名放在字段上方，而不是旁边。我觉得这是最好的方法。

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

---

尼克·里格比为一份名为

---

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

您可以尝试将表单尽可能向后剥离，并根据需要使用

和各种表单输入元素，靠在

清除：左侧属性

这将确保每一行都重新开始，而不必将表单的每一行包装成额外的
或
，甚至不必列出列表

.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确实有一个额外的
使事情变得混乱。如果将日期斜杠作为
：after
伪元素的一部分进行样式化，则可以在需要时将其删除

在Opera 11.60、Firefox 11、Google Chrome 18和Internet Explorer 8中显示正常。
HTML

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

我认为这就足够了。
如果做得好，表单的可读性会大大提高，因为你的眼睛只需朝一个方向移动，而不必来回扫描。但对于复杂的表单来说，这种方法效果不太好。对我来说，它只是迫使我简化表单，这从来都不是一件坏事。不幸的是，我们并不总是能够奢侈地指定设计。在这个页面上，
标记被使用了24次。
form
{display: table}
#personal_name
{display: table-row}
#personal_name input, #personal_name label
{display: table-cell}