html - 如何编码这种形式？

Question

我试图摆脱使用 html TABLE 标签，但无法弄清楚如何构建，我希望它看起来像什么。我已经使用表格标签制作了我的屏幕截图， 我如何使用 div 或/和 span 等来做到这一点，并且仍然保持标签的垂直对齐(本例中的名字、姓氏)？
(字体大小和颜色等在这里当然是无关紧要的)
alt text http://img522.imageshack.us/img522/7857/forme.jpg

感谢任何输入，
莫达诺

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