Html 如何在没有表格的情况下对表单进行样式设置和对齐？

我已经习惯使用

s

来完美地对齐表单字段。我通常是这样写表格的：

<table border="0">
   <tr>
     <td><label for="f_name">First name:</label></td>
     <td><input type='text' id='f_name' name='f_name' /></td>
     <td class='error'><?=form_error('f_name');?></td>
   </tr>
</table>

名字：

我知道这是一种不好的做法，我想使用CSS、

s

、

s

，或者更干净的方法。然而，事实是，

s

对于表单非常有效。所有的东西都对齐得很好，间距完美，所有的误差都在彼此的正下方，等等

我最近尝试在表单中使用

和

标记，但最终还是回到了表，因为它们看起来好多了

---

如何在不使用

s的情况下获得这种对齐的表格布局？

为什么不使用表格？听起来他们现在对你很合适。您是否担心可访问性问题？仅仅因为它是一张桌子并不意味着它的可访问性会受到影响

---

我想提醒你们，不要为了纯粹的原因而为一个已解决的问题创造一个新的解决方案。即使您担心语义，究竟什么样的语义描述表单？

是的，使用标签和CSS：

<label class='FBLabel' for="FName">First Name</label>
<input value="something" name="FName" type="text" class='FBInput'>
<br>

---

请看：

这取决于你和谁交谈。纯粹主义者说使用CSS是因为table元素不是用于布局的。但对我来说，如果它有效，为什么要改变它？我现在确实使用CSS进行布局，但我仍然有很多遗留代码没有也不会更改。

我大部分时间都使用以下方法，它允许我按照自己喜欢的方式设置所有对齐方式。如您所见，它为CSS和JS提供了大量的钩子

电子邮件地址*
密码*

我在过去非常有效地使用了这一点：

HTML:

<fieldset>
  <p>
    <label for="myTextBox">Name</label>
    <span class="field"><input type="text" name="myTextBox" id="myTextBox" /></span>
    <span class="error">This a message place</span>
  </p>
</fieldset>

<style type="text/css">
fieldset label, fieldset .field, fieldset .error { display: -moz-inline-box; display: inline-block; zoom: 1; vertical-align: top; }
fieldset p { margin: .5em 0; }
fieldset label { width: 10em;  text-align: right; line-height: 1.1; }
fieldset .field { width: 20em; }
</style>

名称
这是一个留言的地方

CSS:

<fieldset>
  <p>
    <label for="myTextBox">Name</label>
    <span class="field"><input type="text" name="myTextBox" id="myTextBox" /></span>
    <span class="error">This a message place</span>
  </p>
</fieldset>

<style type="text/css">
fieldset label, fieldset .field, fieldset .error { display: -moz-inline-box; display: inline-block; zoom: 1; vertical-align: top; }
fieldset p { margin: .5em 0; }
fieldset label { width: 10em;  text-align: right; line-height: 1.1; }
fieldset .field { width: 20em; }
</style>

字段集标签，字段集。字段，字段集。错误{显示：-moz内联框；显示：内联块；缩放：1；垂直对齐：顶部；}
字段集p{margin:.5em 0；}
字段集标签{宽度：10em；文本对齐：右；行高：1.1；}
字段{宽度：20em；}

---

唯一真正有问题的是Firefox2，它优雅地降级了。（参见-moz内联框，这有点老套，但也不算太糟）

没有表格，有很多方法可以做到这一点。一旦你得到了基本的格式，它就像表格一样容易操作，只是最初的游戏可能会很痛苦。因此，只要看看其他已经为您解决所有问题的人：

我上周还记录了（一个片段）：

---

这方面没有一刀切的办法。您使用的表格示例可以改进，但：

<table>
  <tbody>
    <tr>
      <th scope="row"><label for="f_name">First name:</label></th>
      <td>
        <input type='text' id='f_name' name='f_name' />
        <?php form_error('f_name'); ?>
      </td>
    </tr>
    <!-- ... -->
  </tbody>
</table>

名字：

---

对错误部分不太确定；我认为将其放在输入旁边比为其设置单独的列更有意义。

这可能不会得到很多支持，但这是我的两分钱：

在某些情况下，表格更易于布局；例如三列或三个表单（尽管这里有一些关于纯css表单布局的建议，所以也不要忽略它们）

过程和方法可以成为好的仆人，但不是好的主人。 -马克·多德、约翰·麦克唐纳和贾斯汀·舒赫 在“软件安全评估的艺术”中 我相信这句话非常适用于这种情况。如果您的表布局适合您，不会导致可访问性问题，并且没有损坏，那么不要修复它

---

像“你应该”、“必须”、“永远”这样的短语让我害怕，因为一个尺码不适合所有人！以狂热者为例。

如果你不使用表格，你需要事先知道标签的宽度。对于多语言站点（i18n），这通常是一个问题

---

对于表格，它们可以拉伸以适应不同大小的标签。单靠CSS还不能很好地支持这一点。

我也有这个问题，但是对于cocidil，我在左边有一个菜单（还有float:left）

所以。我的解决办法是： html

---

我认为，它在form类中也会起作用，但事实上，我在“new”类中有更多的表单。

这里的大多数非基于表格的答案都依赖于预先确定的固定宽度，这可能是国际化的一个难题，或者是任何其他无法确定标签所需宽度的情况

但是CSS有

display:table

，正是因为这个原因：

HTML

<div class="form-fields">
  <div class="form-field">
    <label class="form-field-label" for="firstNameInput">First Name</label>
    <div class="form-field-control"><input type="text" id="firstNameInput"></div>
    <div class="form-field-comment">Required</div>
  </div>
  <div class="form-field">
    <label class="form-field-label" for="lastNameInput">Last Name</label>
    <div class="form-field-control"><input type="text" id="lastNameInput"></div>
    <div class="form-field-comment">Required</div>
  </div>
</div>

---

简单。

我基本上关心语义：）使用更好的解决方案会更优雅。表是用于表格数据的，等等。我同意-语义对于内容非常重要。我的观点是，表单无论如何都不是真正的内容，也没有任何语义来描述它。“表单无论如何都不是真正的内容”WTF语义是描述文档中内容的一种方式—将表单放在表中而不是使用块级元素会损失多少语义值？在用户输入表单之前，表单不包含任何内容-空表单的语义值是多少？这真是太离谱了：语义标记的关键在于结构本身就是内容。一个没有用户输入的表单有很多内容，每个字段都是有意义的。你曾经尝试过自己使用屏幕阅读器吗？这是一个很有启发性的体验。这将打破一个长的下拉列表，一个长的文本区域，或者错误消息不会正确显示。这些问题很容易解决。这只是你要开始的基础。这个解决方案为标签使用了明确的宽度，这是一个国际化的PITA（例如，德语单词可能是巨大的）。理想的解决方案应具有动态标签宽度，可进行调整以最适合co Processes and methodologies can make good servants but are poor masters. - Mark Dowd, John McDonald & Justin Schuh in "The Art of Software Security Assessment"

<div class="new">
   <form>
     <label class="newlabel">Name</label>
     <input type="text" name="myTextBox" id="myTextBox" />
   </form>
</div>

.new {
    display:block;
}
.newlabel {
    min-width: 200px;
    float: left;
}

<div class="form-fields">
  <div class="form-field">
    <label class="form-field-label" for="firstNameInput">First Name</label>
    <div class="form-field-control"><input type="text" id="firstNameInput"></div>
    <div class="form-field-comment">Required</div>
  </div>
  <div class="form-field">
    <label class="form-field-label" for="lastNameInput">Last Name</label>
    <div class="form-field-control"><input type="text" id="lastNameInput"></div>
    <div class="form-field-comment">Required</div>
  </div>
</div>

.form-fields {
  display: table;
}

.form-field {
  display: table-row;
}

.form-field-label,
.form-field-control,
.form-field-comment {
  display: table-cell;
  padding: 3px 10px;
}