Question

我试图摆脱使用html TABLE标签，但无法弄清楚如何构建，我希望它看起来像什么。我使用表格标签制作了我的截图我如何使用div或/和span等进行此操作，并仍保留标签的垂直对齐方式（本例中的firstname，lastname）？
（字体大小和颜色等在这里当然无关紧要）
alt text http://img522.imageshack.us/img522/7857/forme.jpg

感谢任何输入，
modano

Answer 1

您不希望将表标记用于布局，这很好。切换时要记住的事情是尽量使HTML尽可能语义化。这意味着什么可能会有所不同，因为没有真正严格的规则，但它可以看起来像这样：

<form [..]>
   <ul>
      <li class="hasError">
         <em class="feedback">error message here</em>
         <div class="attribute">
            <label for="firstName">First name:</label>
            <em>(required)</em>
         </div>
         <div class="input">
            <input type="text" name="firstName" id="firstName" />
            <em class="description">optional description here</em>
         </div>
         <span class="clearBoth" />
      </li>
      <li>
         <em class="feedback" />
         <div class="attribute">
            <label for="firstName">Last name:</label>
            <em>(required)</em>
         </div>
         <div class="input">
            <input type="text" name="lastName" id="firstName" />
            <em class="description">optional description here</em>
         </div>
         <span class="clearBoth" />
      </li>
   </ul>
</form>

这实现了以下目标：

通过将错误反馈消息放在div之上，您可以制作任意长的错误消息而不会丢失对齐
每个输入元素（和标签）都保存在一个列表项中，从而对它们进行逻辑分组。它还在屏幕阅读器中读取如下内容：“表格。两个项目列表。标签[...]”。这为用户提供了表单包含两个输入的提示。
通过将 hasError 类添加到列表项，您可以轻松地使用CSS定位后代元素以进行特定于错误的样式。

示例CSS文件看起来像（注意这是未经测试的）：

form li {
    width: 300px;
}
form li.hasErrors {
    width: 298px;
    border: 1px red;
    background-color: #C55;
}
form .attribute {
    float: left;
    clear: left;
    width: 60px;
}
form .input {
    float: right;
    clear: none;
    width: 240px;
}
form .feedback {
    display: block;
    padding-left: 50px;
    color: red;
}
form .description {
    display: block;
    clear: both;
    color: #888;
}
.clearBoth { display: block; clear: both; }

Answer 2

我不是CSS专家，但这应该让你开始。当然样式应该在外部样式表中。

<html>
<head>
<style>
html {
    font-size: 76%;
}
body {
    font-size: 1.0em;
    font-family: verdana;
}
div.input {
    border: 1px solid white;
    clear: left;
    width: 25em;
    height: 5em;
    padding: 2px;
    margin-bottom: 1.0em;
}
div.error {
    border: 1px solid red;
}
div.label {
    float: left;
    width: 7em;
}
div.field {
    float: left;
}
div.errormessage {
    color: red;
}
div.description {
    color: #bbb;
}
input.text {
    width: 13em;
}
</style>
</head>
<body>
<form>
    <div class="input error">
        <div class="label">
            <div>&nbsp;</div>
            <label>First name:<br>(required)</label>
        </div>
        <div class="field">
            <div class="errormessage">error message here</div>
            <input type="text" name="FirstName" class="text">
            <div class="description">optional description here</div>
        </div>
    </div>
    <div class="input">
        <div class="label">
            <div>&nbsp;</div>
            <label>Last name:<br>(required)</label>
        </div>
        <div class="field">
            <div class="errormessage">&nbsp;</div>
            <input type="text" name="LastName" class="text">
            <div class="description">optional description here</div>
        </div>
    </div>
</form>
</body>
</html>

Answer 3

可以在A list Apart: Prettier Accessible Forms

上找到关于创建可访问的HTML / CSS表单的非常好的教程

通常是一个很棒的网站，提供有关如何创建优质，干净和可访问网站的信息。

Answer 4

只需给你的标签一个特定的宽度;这将确保您的字段排队。您还可以浮动标签和输入，以轻松将其分成行。这是一个最小的例子：

<style type="text/css">
    form { overflow: auto; position: relative; }
    input { float: left; }
    label { clear: left; float: left; width: 10em; }
</style>

<form>
    <label>Field 1</label><input/>
    <label>Field 2</label><input/>
    <label>Field 3</label><input/>
</form>

如何编码此表单？

4 个答案: