Question

我知道将HTML表用于所有内容是不好的...并且这些表应仅用于呈现表格数据而不是用于实现某些样式目标。

我的问题是，你如何使用CSS创建HTML表单，以便它们看起来很好并且像使用表格一样对齐？

Answer 1

Nick Rigby为A List Apart写了一篇名为Prettier Accessible Forms

的精彩文章

使用fieldset，legend，label。高度语义化。

Answer 2

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

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

Answer 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中都没问题。

Answer 4

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

表对于表格数据仍然非常有用，但是它对于布局页面感到不满。

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

Answer 5

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

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

我认为这已经足够了。

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

6 个答案: